<th> : Table Header element

by

Introduction

The <th> element in HTML stands for “Table Header.” It’s used to define a header cell within a table. Header cells typically contain labels or titles for the columns or rows of the table.

Here’s an example of how you might use the <th> element to create a table header:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Header Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Example Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>David</td>
            <td>40</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>

Output :

In this example:

  • Each <th> element represents a header cell in the table.
  • Header cells are typically contained within the first row (<tr>) of the table.
  • Header cells are commonly used to label the columns or rows of the table.
  • CSS is used to style the table, including setting border styles, cell padding, and alignment.

This results in a simple table with three columns: Name, Age, and Country, where each column is labeled with a header cell (<th>).

Leave a Comment