HTML Table Headers

HTML table headers provide context for the data in tables by defining headings for columns and rows.

Basic Syntax

Table headers are defined using the <th> element, usually within a <tr> tag.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Output:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3

Using <thead>, <tbody>, and <tfoot>

These elements group the header, body, and footer of the table.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

Scope Attribute

The scope attribute improves accessibility by defining the scope of the header.

<table>
  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
  </tr>
  <tr>
    <th scope="row">Row 1</th>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Output:

	Column 1	Column 2	Column 3
Row 1	Data 1	Data 2

 

Summary

HTML table headers (<th>) define headings for columns and rows, enhancing table structure and accessibility. Use <thead>, <tbody>, and <tfoot> for organization, and the scope attribute for accessibility.