References

Beginner-friendly references for web development, with live, editable examples.

The HTML <th> tag

Element All modern browsers Updated
Quick answer

The HTML <th> element defines a header cell in a table. Give it a scope (col or row) so assistive technology announces it with the right data cells. It is bold and centered by default.

Overview

The <th> (table header) element labels a row or a column of data. Browsers render it bold and centered, but the important part is invisible: screen readers announce it as the header for the cells it governs, so a user navigating the table hears "Price, $9" rather than just "$9".

Make that association explicit with the scope attribute — scope="col" for a column header, scope="row" for a row header. This is the single most valuable thing you can do for table accessibility, and it takes one attribute. The abbr attribute can give a long heading a short spoken form.

For complex tables with multiple levels of headers, the scope attribute is not enough — connect each data cell to its headers with the headers attribute referencing the headers' ids. As with <td>, style header cells with CSS rather than the obsolete presentational attributes.

Syntax

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

Attributes

The <th> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
abbr A short string. Gives a table header cell a short abbreviated label.
colspan A positive integer (default 1). Spans a table cell across columns.
headers A space-separated list of header cell ids. Links data cells to header cells for accessibility.
rowspan A non-negative integer (0 means span to the end of the section). Spans a table cell across rows.
scope row col rowgroup colgroup States what a table header cell labels.

Example

Live example 
<table border="1">
  <tr><th scope="col">Name</th><th scope="col">Role</th></tr>
  <tr><th scope="row">Ada</th><td>Engineer</td></tr>
</table>

Best practices

  • Set scope="col" or scope="row" on every header cell so screen readers associate it correctly.
  • Use <th> for all header cells, never a styled <td>.
  • Give long headings a short spoken form with the abbr attribute.
  • For multi-level headers, link data cells to headers with the headers attribute and matching ids.

Accessibility

<th> with a correct scope is the single most important thing for table accessibility: it lets screen readers announce "Price, £12" instead of just "£12". Use real header cells (never a styled <td>) for any row or column labels.

Frequently asked questions

What is the th element?
A table header cell that labels a row or column. Screen readers announce it as the header for the cells it governs.
What is the difference between th and td?
<th> is a header that labels data; <td> holds the data itself.
What does the scope attribute do?
It states whether a header applies to a column (scope="col") or a row (scope="row"), making the association explicit for assistive technology.
How do I make a data table accessible?
Use <th> for headers with scope, add a <caption>, and for complex tables connect cells to headers with the headers attribute.
tfoot thead