HTML TABLE HEADERS

An HTML Table Header is the top row of a table that contains the titles of each column. It is created using the <th> (table header) tag.

HTML Example

<table border="1">
  <tr>
    <th>Student ID</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Ali</td>
    <td>85</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Sara</td>
    <td>92</td>
  </tr>
</table>

Diagram

+------------+-----------+--------+
| Student ID |   Name    | Marks  |  ← Header Row (<th>)
+------------+-----------+--------+
|    101     |    Ali    |   85   |  ← Data Row (<td>)
+------------+-----------+--------+
|    102     |    Sara   |   92   |  ← Data Row (<td>)
+------------+-----------+--------+

Structure of a Table

<table>
   ├── <tr>          ← Table Row
   │     ├── <th>Student ID</th>
   │     ├── <th>Name</th>
   │     └── <th>Marks</th>
   ├── <tr>
   │     ├── <td>101</td>
   │     ├── <td>Ali</td>
   │     └── <td>85</td>
   └── <tr>
         ├── <td>102</td>
         ├── <td>Sara</td>
         └── <td>92</td>
</table>

Key Points

• <th> defines a table header cell.
• <td> defines a table data cell.
• <tr> defines a table row.
• Header cells are bold and center-aligned by default in most browsers.
• Using <thead> is recommended for better HTML structure:

<table border="1">
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Ali</td>
      <td>85</td>
    </tr>
  </tbody>
</table>