HTML / Element

How to Use the th Element

The th element marks a table cell as a heading. It gives a heading meaning in the HTML structure, so readers and assistive technology can tell which data it describes.

The short answer

Use th for a row or column heading. Use td for values and other data. Making text bold does not turn a data cell into a heading.

Set scope="col" when a heading describes a column, and scope="row" when it describes a row.

A small example

<table>
  <caption>Opening hours this week</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Opening hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>9:00–18:00</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>9:00–18:00</td>
    </tr>
  </tbody>
</table>

Opening hours this week
Day	Opening hours
Monday	9:00–18:00
Tuesday	9:00–18:00

“Day” and “Opening hours” label columns. “Monday” and “Tuesday” label their rows. Each time in a td belongs to both a row and a column.

Use scope to say what a heading describes

Common scope values
Value	Cells described by the heading	Example
`col`	Data in the same column	“Opening hours” or “Price”
`row`	Data in the same row	“Monday” or “Product A”

In a table with grouped rows or columns, scope="rowgroup" or scope="colgroup" may describe a group. These values fit tables that actually have row or column groups. Start by making the table easy to follow.

Check heading relationships in complex tables

A table may have several levels of headings, or a data cell may depend on more than one heading. In those cases, give each heading a unique id and list the related IDs, separated by spaces, in the data cell’s headers attribute.

<th id="product" scope="row">Product A</th>
<th id="spring" scope="col">Spring price</th>
<td headers="product spring">$12</td>

This method depends on keeping the IDs and references correct. If you can make the table simpler or split it into smaller tables, that may be easier to understand.

Common mistakes

Marking every value as th. Use td for values that are not headings.
Making a td bold with CSS and treating it as a heading. Visual style and HTML meaning are separate.
Using the same scope everywhere without checking which cells each heading describes.
Forcing a complex table into one large grid when it would be clearer to split it.

A little more detail

Browsers and screen readers can announce related headings while a person moves through table cells. Correct HTML structure is the starting point for that information. The announcement and display can still vary across browsers and assistive technologies.

For a table title, see How to Use the caption Element; for data cells, see How to Use the td Element. For the whole table, see How to Use the table Element. For the th specification, header-assignment algorithm, and browser evidence, see the th element in Yugien Atlas.