The <thead> Element
As defined in the HTML Living Standard, the <thead> element represents the block of rows that consist of the column headings (header) for the parent <table> element.
| Standard | Version | Release Date |
|---|---|---|
| WCAG | 2.1 | June 2018 |
| HTML5 | Living Standard | Rolling |
<table>
<thead>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
</tr>
</thead>
<tbody>...</tbody>
</table>
View HTML Living Standard: The thead element
Structural and Semantic Purpose
The <thead> element is part of the table sectioning model. It provides several technical advantages over simply using <tr> tags:
- Identification: It explicitly identifies header rows, separating them from data (
<tbody>) and footer (<tfoot>) rows. - One per Table: A table must not contain more than one
<thead>element. - Placement: It must appear after any
<caption>and<colgroup>elements, and before any<tbody>,<tfoot>, or<tr>elements.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Grouping headers within <thead> allows user agents to handle the table structure more robustly. For example, some browsers and printer drivers will repeat the <thead> content at the top of every new page when a table spans multiple pages. This ensures the relationship between headers and data remains perceivable to the user, regardless of where they are in a large dataset.
Styling with SMACSS
The <thead> element is a convenient hook for applying styles to the entire table header at once.
- Visual Hierarchy: Use it to apply distinct background colors or borders to help users with low vision or cognitive disabilities distinguish the headers from the data cells.
- Sticky Headers: In modern CSS, applying
position: sticky; top: 0;to the<thead>(or its child<th>elements) ensures that headers remain visible while scrolling through long tables.
thead th {
position: sticky;
top: 0;
background-color: var(--color-primary);
z-index: 10;
}
A11y Tip: Logical Fragments
Ensure that all headers within the <thead> use the <th> element with the appropriate scope="col" attribute. The <thead> provides the container, but the <th> provides the link between the category and the data.