th

The th element defines a header cell in a table. It establishes relationships between headers and data cells, which is critical for accessibility. Always use the scope attribute to specify what cells the header applies to.

Description

The <th> (table header) element defines a cell that acts as a header for a group of table cells. Headers can apply to columns, rows, or groups of either. The scope attribute explicitly declares which cells the header describes.

Vanilla Breeze styles header cells with a raised background, semi-bold font weight, and a thicker bottom border to distinguish them from data cells.

When to Use

Column headers: In <thead> rows with scope="col"
Row headers: First cell of data rows with scope="row"
Group headers: Headers spanning multiple columns/rows with scope="colgroup" or scope="rowgroup"

When to Use td Instead

Data cells: Cells containing actual data values
Summary cells: Totals in <tfoot> (though the label cell may be th)

The scope Attribute

The scope attribute is essential for accessibility. It tells assistive technologies which cells the header applies to.

Value	Description	Use Case
`col`	Header applies to all cells in the column	Column headers in thead
`row`	Header applies to all cells in the row	Row headers in first cell of tbody rows
`colgroup`	Header applies to multiple columns	Group headers with colspan
`rowgroup`	Header applies to multiple rows	Group headers with rowspan or section headers

Important: Always include the scope attribute. Screen readers use it to announce which header applies to each data cell.

Column Headers (scope="col")

Most common use: headers in <thead> that describe entire columns.

Employee Directory
Name	Department	Location	Start Date
Alice Johnson	Engineering	New York	2022-03-15
Bob Smith	Design	San Francisco	2021-08-22

<thead> <tr> <th scope="col">Name</th> <th scope="col">Department</th> <th scope="col">Location</th> <th scope="col">Start Date</th> </tr> </thead>

Row Headers (scope="row")

Use when the first cell of a row identifies that row's data.

Pricing Comparison
Plan	Basic	Pro	Enterprise
Monthly Price	$9	$29	$99
Storage	5 GB	50 GB	500 GB
Users	1	10	Unlimited
Support	Email	Priority	24/7 Phone

<tr> <th scope="row">Monthly Price</th> <td>$9</td> <td>$29</td> <td>$99</td> </tr>

Column Group Headers (scope="colgroup")

Use with colspan for headers that span multiple columns.

Quarterly Performance
Region	Q1		Q2
Region	Revenue	Profit	Revenue	Profit
North	$150K	$45K	$175K	$52K
South	$120K	$36K	$140K	$42K

<thead> <tr> <th scope="col" rowspan="2">Region</th> <th scope="colgroup" colspan="2">Q1</th> <th scope="colgroup" colspan="2">Q2</th> </tr> <tr> <th scope="col" data-numeric>Revenue</th> <th scope="col" data-numeric>Profit</th> <th scope="col" data-numeric>Revenue</th> <th scope="col" data-numeric>Profit</th> </tr> </thead>

Row Group Headers (scope="rowgroup")

Use for headers that apply to multiple rows, often as section dividers.

Budget by Department
Item	Budget	Actual
Engineering
Software	$25,000	$23,500
Hardware	$50,000	$48,200
Marketing
Advertising	$30,000	$32,100
Events	$15,000	$14,800

<tr> <th scope="rowgroup" colspan="3">Engineering</th> </tr> <tr> <td>Software</td> <td data-numeric>$25,000</td> <td data-numeric>$23,500</td> </tr>

Numeric Headers

Use data-numeric on header cells for numeric columns to right-align both the header and its associated data cells.

Sales Data
Product	Quantity	Unit Price	Total
Widget A	150	$25.00	$3,750.00
Widget B	75	$40.00	$3,000.00

<th scope="col" data-numeric>Quantity</th> <th scope="col" data-numeric>Unit Price</th> <th scope="col" data-numeric>Total</th>

Accessibility

Always use scope: The scope attribute is essential for screen readers to associate headers with data cells
Screen reader announcement: When navigating to a data cell, the associated headers are announced
Complex tables: For very complex tables with multiple header levels, consider using headers attribute on <td> elements
Implicit role: th has an implicit ARIA role of columnheader (scope="col") or rowheader (scope="row")

Testing Header Associations

Use browser developer tools or screen readers to verify that data cells correctly announce their headers. Navigate through the table with a screen reader to ensure relationships are clear.

Styling

Vanilla Breeze applies these styles to th elements:

Property	Value	Purpose
`padding`	`var(--size-s) var(--size-m)`	Consistent spacing
`text-align`	`start`	Left-aligned (RTL-aware)
`font-weight`	`600`	Semi-bold for emphasis
`background`	`var(--color-surface-raised)`	Subtle distinction from data cells
`border-block-end`	`var(--border-width-medium)`	Thicker border for headers

Attributes

Attribute	Values	Description
`scope`	`col`, `row`, `colgroup`, `rowgroup`	Specifies which cells the header applies to
`colspan`	Positive integer	Number of columns the cell spans
`rowspan`	Positive integer	Number of rows the cell spans
`abbr`	String	Abbreviated version of header content for screen readers
`data-numeric`	Boolean attribute	Right-aligns content for numeric columns

Related Elements

<td> - Data cells (th provides headers for)
<tr> - Table rows containing th cells
<thead> - Primary location for column headers
<tbody> - Contains row headers with scope="row"
<table> - The table container