HTML Table Headers

Understanding HTML Table Headers

HTML table headers identify the meaning of the data contained in table rows and columns.

The <th> element creates a table header cell, while the scope attribute can identify whether that header applies to a row, column, row group, or column group.

Table Header Syntax

Table header cells are created with the <th> element and are placed within a <tr> just like regular table data cells.

<table>
  <tr>
    <th>Course</th>
    <th>Level</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
    <td>Completed</td>
  </tr>
</table>

In this example, the first row contains headers that describe the data appearing in each column.

The <th> Element

The <th> element represents a header cell for a row or column of table data.

<th>Course</th>

Browsers commonly display header cells with bold, centered text by default, but their appearance should not determine whether <th> is used. The element provides structural meaning to the table, while CSS controls its presentation.

Column Headers

Column headers identify the meaning of the data that appears beneath them. They are commonly placed in the first row of a table.

<tr>
  <th scope="col">Course</th>
  <th scope="col">Level</th>
  <th scope="col">Status</th>
</tr>

The scope="col" attribute indicates that each header applies to the cells in its column.

Row Headers

Header cells can also identify rows. A row header is commonly placed as the first cell in a row and describes the data that follows across that row.

<tr>
  <th scope="row">HTML</th>
  <td>Beginner</td>
  <td>Completed</td>
</tr>
<tr>
  <th scope="row">CSS</th>
  <td>Beginner</td>
  <td>In Progress</td>
</tr>

The scope="row" attribute indicates that the header applies to the other cells in that row.

The scope Attribute

The scope attribute describes which cells a <th> element provides a header for. This relationship is especially useful to assistive technologies when interpreting table data.

<th scope="col">Price</th>

<th scope="row">Basic Plan</th>

The most common values are col for a column header and row for a row header. HTML also provides colgroup and rowgroup for headers that apply to groups of columns or rows.

<th> vs <td> Elements

The <th> and <td> elements both create cells within table rows, but they have different meanings. Use <th> for cells that identify or describe other table cells and <td> for the actual table data.

<tr>
  <th scope="row">HTML</th>
  <td>Beginner</td>
  <td>Completed</td>
</tr>

Do not choose <th> simply because you want text to appear bold. If a regular data cell needs different visual styling, use CSS instead.

Table Headers and Accessibility

Proper table headers help establish relationships between header cells and data cells. This allows readers, including people using screen readers, to understand which headings apply to particular pieces of data.

For straightforward tables, correctly using <th> with scope="col" and scope="row" provides clear header relationships. More complex tables may require additional techniques, which are covered in the Accessible Tables tutorial.

HTML Table Header Example

The following example uses both column and row headers. Edit the header text, change a scope value, or add another row to explore the table structure.

Table Header Best Practices

• Use <th> for cells that identify rows or columns rather than using <td> and making the text look like a heading with CSS.
• Use scope="col" for headers that identify columns.
• Use scope="row" for headers that identify rows.
• Write concise header text that clearly describes the associated data.
• Use CSS to control the visual appearance of header cells rather than choosing elements based on their default browser styling.
• Use appropriate header relationships to make table data easier to understand and navigate with assistive technology.
• Use additional accessibility techniques when a complex table cannot be described adequately with simple row and column headers.

Summary

The HTML <th> element creates table header cells that identify rows or columns of data. The scope attribute can specify whether a header applies to a column, row, column group, or row group. Using table headers correctly gives tabular data meaningful structure and helps make tables more accessible.