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 
<style>table{border-collapse:collapse}th,td{border:1px solid #cbd5e1;padding:6px 10px}</style>
<table>
  <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