The <thead> Element
As defined in the HTML Living Standard, the <thead> element represents the header section of a table. It groups the rows that define the columns of the table, separating them from the actual data.
| Name | Role | Department |
|---|---|---|
| Jane Doe | Engineer | Product |
(The top row is wrapped in a <thead> element.)
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>...</tbody>
</table>
View HTML Living Standard: The thead element
Technical Rules & Hierarchy
- Placement: The
<thead>must be a child of a<table>. It must appear after any<caption>and<colgroup>, but before<tbody>or<tfoot>. - Content: It can contain zero or more
<tr>elements. - Semantic Purpose: It explicitly tells the browser and assistive technology: "These rows are the labels for the data below."
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <thead>, you provide a programmatic boundary between the labels and the data. This is essential for screen readers to correctly identify the "header" context when a user navigates through the <tbody>. Without it, the relationship between the data cell and its header is less explicit.
Best Practices
- Use TH inside THEAD: Always use
<th>elements inside your<thead>rows. Using<td>in the header is a semantic error. - Scope Attribute: Use
<th scope="col">to explicitly define that the header applies to the column below it. - Styling: Use CSS to style the
<thead>(e.g., background color, bold text) rather than using presentational attributes.
A11y Tip: Printing Tables
One of the functional benefits of <thead> is that some browsers will automatically repeat the header at the top of every page when a long table is printed, ensuring the data remains readable across page breaks.