The <th> Element
As defined in the HTML Living Standard, the <th> element represents a header cell in a table. It is used to label a group of data cells, providing context and structure to the tabular data.
| Device | Browser | Status |
|---|---|---|
| Desktop | Chrome | Verified |
| Mobile | Safari | Pending |
(Note: Headers are used for both column titles and row titles.)
<tr>
<th scope="col">Column Header</th>
<td>Data Cell</td>
</tr>
View HTML Living Standard: The th element
Accessibility: The scope Attribute
To provide an accessible experience, <th> elements must be programmatically linked to the data they describe.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The scope attribute is the primary mechanism for meeting this criterion in simple tables. It tells assistive technology if the header applies to the rest of the column (scope="col") or the rest of the row (scope="row").
When a screen reader user moves from cell to cell, the browser announces the associated headers. Without scope, the user hears "Chrome, Verified" but has no way of knowing those values belong to the "Browser" and "Status" categories.
Technical Attributes
scope: Possible values arecol,row,colgroup, orrowgroup. This defines the direction of the header's relationship.abbr: Provides a short, abbreviated version of the header cell's content, which screen readers can use when repeating the header for every data cell.colspan&rowspan: Allows a single header to span multiple columns or rows.
<!-- Using abbr for long headers -->
<th scope="col" abbr="Compliance">Accessibility Compliance Level</th>
Best Practices
- Header placement: Use
<thead>to group your primary column headers and<th scope="row">as the first child of each<tr>for row-level headers. - Complex Tables: For tables with multi-level headers, the
scopeattribute may not be sufficient. In those cases, use theidattribute on<th>and theheadersattribute on<td>to create explicit links. - Avoid Visual-Only Headers: Do not use
<td>with bold styling (<b>) to create headers. This fails to provide the programmatic relationship required for accessibility.
A11y Tip: Alignment and Scannability
Following SMACSS Module Rules, headers should be visually distinct from data (e.g., using bold text or background colors). However, ensure the text remains left-aligned if the data is left-aligned to help users with low vision or cognitive impairments track the relationship between the header and the content below it.