The <th> Element
As defined in the HTML Living Standard, the <th> (Table Header) element represents a header cell in a table. It is used to provide a label for a column or a row of data.
| Product Name | Price |
|---|---|
| A11y Guide | $20 |
(The cells "Product Name" and "Price" are <th> elements.)
<th scope="col">Product Name</th>
View HTML Living Standard: The th element
The Power of the Scope Attribute
The scope attribute is the most critical part of the <th> element. It tells assistive technology exactly which cells the header applies to:
scope="col": The header applies to all cells in the column below it.scope="row": The header applies to all cells in the row to its right.scope="colgroup": The header applies to a group of columns.scope="rowgroup": The header applies to a group of rows.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <th> with a proper scope is the primary way to satisfy SC 1.3.1 for tables. Without <th> elements, a screen reader user only hears a stream of data (e.g., "New York", "8.4M", "London", "8.9M") without knowing what those numbers represent. With <th>, they hear "City: New York", "Population: 8.4M".
Best Practices
- Never Use TD for Headers: Never use a
<td>and style it to look like a header. This is a major accessibility failure. - Be Concise: Header text should be short and descriptive. If a header needs a long explanation, use the
abbrattribute or a caption. - Visual Distinction: While
<th>is bold and centered by default, use CSS to ensure there is sufficient color contrast between the header and the data cells.
A11y Tip: Complex Tables
For tables with multi-level headers, the scope attribute may not be enough. In those cases, use the id attribute on the <th> and the headers attribute on the <td> to create an explicit, unbreakable link between the data and its headers.