thead
The thead element groups header rows in a table. Vanilla Breeze styles it with a raised background and a medium bottom border to visually separate column headers from data.
Description
The <thead> element contains one or more <tr> elements that define the header row(s) of a table. It must appear after any <caption> or <colgroup> elements and before <tbody> and <tfoot>.
Vanilla Breeze styles <thead> header cells with a raised background (var(--color-surface-raised)) and a thicker bottom border (var(--border-width-medium)) to visually separate headers from data rows.
When to Use
- Every data table: All tables with meaningful data should have thead to define column headers
- Multiple header rows: When columns have grouped headers or sub-headers
- Printed tables: Headers repeat on each page when printing long tables
- Sticky headers: Use
data-sticky="header"on the table so headers remain visible while scrolling
Examples
Basic Table with thead
A complete table using thead with <th scope="col"> for column headers, alongside <tbody> and <tfoot>.
<table> <caption>Quarterly Report</caption> <thead> <tr> <th scope="col">Product</th> <th scope="col" data-numeric>Q1</th> <th scope="col" data-numeric>Q2</th> </tr> </thead> <tbody> <!-- Data rows --> </tbody> <tfoot> <tr> <td>Total</td> <td data-numeric>$27,600</td> <td data-numeric>$31,800</td> </tr> </tfoot></table>Sticky Header
Add data-sticky="header" to the <table> element so the header row stays visible as the user scrolls through long tables. VB applies position: sticky, inset-block-start: 0, and z-index: 1 to the thead th cells.
<table data-sticky="header"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Product</th> <th scope="col" data-numeric>Price</th> </tr> </thead> <tbody> <!-- Many rows of data --> </tbody></table>Scope Attribute
The scope attribute on <th> tells assistive technologies which cells the header relates to. See the shared demo for headers using scope="col" and scope="row".
CSS Reference
Vanilla Breeze applies these styles to <th> elements within thead:
/* VB default thead styles */thead th { background: var(--color-surface-raised); border-block-end: var(--border-width-medium) solid var(--color-border);} /* Sticky header via data attribute */table[data-sticky="header"] thead th { position: sticky; inset-block-start: 0; z-index: 1;}| Property | Value | Purpose |
|---|---|---|
background |
var(--color-surface-raised) |
Subtle background to distinguish headers from data |
border-block-end |
var(--border-width-medium) solid var(--color-border) |
Thicker border separating header from body |
position: sticky |
Via data-sticky="header" |
Header stays fixed at the top when scrolling |
z-index |
1 |
Ensures sticky header paints above body rows |
Accessibility
- Structural grouping: Helps assistive technologies distinguish header rows from data rows
- Always use scope: Set
scope="col"on each<th>inside thead so screen readers announce the header for each column - Grouped headers: Use
scope="colgroup"withcolspanfor multi-column header groups - Implicit role: thead has an implicit ARIA role of
rowgroup - Repeated headers: When printing, thead content can repeat on each page