References

Beginner-friendly references for web development, with live, editable examples.

The HTML headers attribute

Attribute All modern browsers Updated
In short

The HTML headers attribute associates a data cell with its header cells by their ids, for accessibility in complex tables. It is used on the <td> and <th> elements.

Overview

The headers attribute links data cells to header cells for accessibility. It is used on the <td> and <th> elements.

It defines table structure: spanning cells across rows or columns, and connecting data cells to their headers. These attributes are central to making data tables understandable to screen-reader users.

Syntax

<th id="q1">Q1</th> … <td headers="q1">100</td>

Values

Value
A space-separated list of header cell ids.

Best practices

  • Set scope on every <th> so screen readers associate headers with cells.
  • Use colspan/rowspan to merge cells rather than nesting tables.
  • For complex tables, link cells to headers with the headers attribute and matching ids.
  • Add a <caption> so the table has an accessible name.

Accessibility

In complex tables where scope is not enough, headers explicitly ties each data cell to its header cells so screen readers announce the right context.

Frequently asked questions

What does the headers attribute do?
Links data cells to header cells for accessibility.
How do I merge table cells?
Use colspan to span columns and rowspan to span rows.
How do I make a data table accessible?
Use <th> headers with scope, add a <caption>, and link cells to headers with headers in complex tables.
Which elements use the headers attribute?
It is an element-specific attribute, used on the <td> and <th> elements.
formtarget height