The <th> Element

Technical Summary

Definition / Content model

Basic definition of the th element

Item	Definition
Meaning	A header cell in a table
Context	As a child of a tr element
Content model	Flow content, without header, footer, sectioning, or heading content descendants
Categories	Not classified into a specific content category
Key attributes	Global attributes, colspan, rowspan, headers, scope, and abbr
DOM interface	HTMLTableCellElement, the same interface used by td

Header cells and data cells are both cells in the table grid. A th is a header cell and a td is a data cell; the table model uses that distinction when forming header relationships.

scope and header types

scope keywords and meanings

Keyword	Header direction	Condition
row	Data cells in the same row	Declares a row header
col	Data cells in the same column	Declares a column header
rowgroup	Data cells in the same row group	The cell belongs to a row group
colgroup	Data cells in the same column group	The cell belongs to a column group

When scope is missing or has an unrecognized value, its state is Auto. Auto is a specification state, not a literal attribute value. In this state, the table model uses the cell's position and factors such as whether data cells appear above or beside it to determine the header direction. A cell cannot use the rowgroup or colgroup state unless it belongs to that group.

HTML-AAM maps a computed header type to the columnheader or rowheader role. The role, relationships, and announcements exposed by an implementation must be observed separately from the HTML-AAM mapping.

Automatic header assignment

When a cell has no headers attribute, the HTML Standard's “Forming relationships between data cells and header cells” algorithm assigns headers using the cell's coordinates in the table grid. At a high level, it scans left along the same row and upward along the same column, and also considers row-group and column-group headers selected by scope.

<table>
  <thead>
    <tr><th scope="col">Product</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Apple</th><td>$1.20</td></tr>
  </tbody>
</table>

In this example, “$1.20” is related to both the column heading “Price” and the row heading “Apple”. rowspan and colspan change the grid slots occupied by a cell, so they affect header assignment. Do not infer the full relationship from source order alone; inspect the normative algorithm and implementation results separately.

Explicit associations with id and headers

For a cell that specifies headers, the browser splits the value on ASCII whitespace and uses the resulting ID tokens to form its header list. Each token must refer to a th in the same table, and a cell must not target itself. The specification also defines relationships that continue from one header cell through that header's own headers attribute.

<table>
  <thead>
    <tr><th id="cost" scope="colgroup" colspan="2">Cost</th></tr>
    <tr>
      <th id="base" scope="col" headers="cost">Base fee</th>
      <th id="extra" scope="col" headers="cost">Extra fee</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="plan" scope="row">Plan A</th>
      <td headers="plan cost base">$10.00</td>
      <td headers="plan cost extra">$2.00</td>
    </tr>
  </tbody>
</table>

Conforming markup uses unique IDs from the same table and should be checked for correct references. First consider whether the table itself can be simplified. WAI authoring guidance uses scope for simple tables and id with headers when multi-level or multidirectional relationships require explicit links.

Key attributes and DOM interface

Attributes on th and shared cell attributes

Attribute	Scope and notes
scope	Keywords: row, col, rowgroup, and colgroup. Missing or unrecognized values use Auto state.
headers	Available on td and th. A token list referring to th IDs in the same table.
abbr	An alternative label for the header when it is referenced in another context. It need not be an abbreviation.
colspan / rowspan	The number of table-grid columns or rows occupied by the cell. Check limits and row-group boundaries.

HTMLTableCellElement exposes attributes such as cellIndex, colSpan, rowSpan, headers, scope, and abbr. Reflection of the headers and scope strings in the DOM is a different surface from a browser's header relationships in its accessibility API.

Fact / Evidence

Specification claims are linked to their scope and source location. Browser, WPT, and accessibility measurements are recorded separately under Implementation Evidence. Unmeasured scope stays listed under Coverage / Open Issues.

Evidence

1. HTML Standard: The th element — meaning, context, content model, scope, abbr, and DOM interface
2. HTML Standard: Attributes common to td and th — rowspan, colspan, headers, and cellIndex
3. HTML Standard: Header and data cell semantics — header types and the data/header relationship algorithm
4. HTML Accessibility API Mappings: th — computed role and platform mapping
5. WAI Tables Tutorial — authoring guidance for simple and complex header relationships

Implementation Evidence

Browser, WPT, accessibility API, and assistive-technology results are recorded separately from specification claims. The entries cover selected fixtures, tests, and environments; they do not imply the same result in every implementation.

WPT execution, browser accessibility tree, Windows UI Automation, and NVDA observations are recorded as separate measurements. Selected tests do not establish full WPT conformance.

Coverage / Open Issues

• ReviewedMeaning, context, key attributes, scope states, same-table constraint on headers tokens, and basic HTML-AAM role mapping
• OpenAll header assignment branches, nested headers, duplicate IDs, and exhaustive rowspan / colspan limits and boundary cases
• OpenOnly selected WPT coverage. Other browsers, the full WPT suite, all Windows UIA properties, and assistive technologies other than NVDA remain untested.
• OpenUse of abbr in speech, announcement order for complex tables, browser / assistive-technology combinations, and Expert-gap Review

This is initial coverage. The recorded observations do not claim that every table structure, browser, and assistive technology exposes the same header relationships.

Related surfaces

For a beginner-friendly heading example and the use of scope, see the th element in Yugien. For a beginner-friendly data-cell example, see How to Use the td Element; the specification and evidence are in the td Topic. The table title and accessible-name mapping are covered in the caption Topic; for the full table model and parser recovery, see the table Topic.