HTML headers Attribute

The HTML headers attribute identifies one or more header cells that apply to a table cell. It creates an explicit relationship between a <td> or <th> cell and the relevant <th> elements, which can be especially useful in complex tables.

Syntax

The headers attribute contains the id of a <th> element that serves as a header for the cell.

<th id="name">Name</th>
<td headers="name">Alex</td>

Each identifier in the headers value must match the id of a header cell in the same table.

Elements That Use the headers Attribute

The headers attribute can be used on table header and data cells.

Element	Description
`<td>`	Identifies the header cells associated with a table data cell.
`<th>`	Identifies other header cells associated with a table header cell.

Attribute Values

The value of headers is an unordered set of one or more space-separated identifiers. Each identifier references the id of a <th> element in the same table.

<td headers="product quarter-one">$1,250</td>

In this example, the data cell is associated with two header cells: one with id="product" and another with id="quarter-one".

Multiple Header Cells

Complex tables may require a data cell to be associated with more than one header. Multiple header IDs are separated by spaces within the headers attribute.

<table>
  <tr>
    <th id="product">Product</th>
    <th id="quarter-one">Quarter 1</th>
  </tr>
  <tr>
    <th id="tomatoes">Tomatoes</th>
    <td headers="tomatoes quarter-one">$1,250</td>
  </tr>
</table>

The value cell is explicitly associated with both the Tomatoes row header and the Quarter 1 column header.

Table Accessibility

Explicit header associations can help assistive technologies determine which headers provide context for a table cell. This is particularly useful when a table has multiple levels of row or column headers and the relationships cannot be represented as clearly with simpler table markup.

For straightforward tables, properly structured <th> elements are often sufficient. The headers attribute is most useful when explicit associations are needed to describe more complex relationships.

headers vs scope

The headers and scope attributes both help describe relationships between cells in a table, but they approach the relationship differently.

Attribute	Used On	Purpose
`headers`	`<td>` and `<th>`	References one or more specific header cells by their IDs.
`scope`	`<th>`	Indicates whether a header applies to a row, column, row group, or column group.

The scope attribute is generally simpler for tables with clear row and column relationships, while headers can explicitly describe more complex associations.

Common Mistakes

Do not separate multiple IDs in a headers value with commas. The identifiers must be separated by spaces.

Make sure every identifier listed by headers matches the id of a <th> element in the same table.

Do not use duplicate id values for table headers. Each referenced header needs a unique identifier so the association is unambiguous.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The headers attribute is widely supported on <td> and <th> table cells in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the headers Attribute

The example uses headers to associate each sales value with both its product row header and quarter column header.

Play in Editor

Summary

The HTML headers attribute explicitly associates a <td> or <th> cell with one or more header cells. Its value contains space-separated IDs that reference <th> elements in the same table, making it especially useful for describing relationships in complex tables.