Headers Attribute

title: "Headers Attribute — Associating Cells in Complex Tables" description: "Learn how to use the headers attribute on td and th cells to create explicit associations for complex tables with merged cells and multi-level headers." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

The headers attribute explicitly associates data cells with header cells by referencing header ids, essential for complex tables where scope is insufficient.

## What You'll Learn

How to use the headers attribute to create cell-to-header associations in complex tables with merged cells and multiple header levels.

## Why It Matters

In tables with merged cells or multiple header rows, scope alone cannot create correct associations. The headers attribute provides explicit references.

## Real-World Use

A budget table has quarter columns that span three months each. A cell in the "Q1" column under "January" uses headers="q1 jan" to associate with both the quarter and month headers.

## Headers Attribute

```html
<table>
  <caption>Quarterly budget</caption>
  <tr>
    <th id="empty" rowspan="2"></th>
    <th id="q1" scope="colgroup" colspan="3">Q1</th>
    <th id="q2" scope="colgroup" colspan="3">Q2</th>
  </tr>
  <tr>
    <th id="jan" headers="q1">Jan</th>
    <th id="feb" headers="q1">Feb</th>
    <th id="mar" headers="q1">Mar</th>
    <th id="apr" headers="q2">Apr</th>
    <th id="may" headers="q2">May</th>
    <th id="jun" headers="q2">Jun</th>
  </tr>
  <tr>
    <th id="revenue" scope="row">Revenue</th>
    <td headers="revenue q1 jan">$10K</td>
    <td headers="revenue q1 feb">$12K</td>
    <td headers="revenue q1 mar">$15K</td>
    <td headers="revenue q2 apr">$11K</td>
    <td headers="revenue q2 may">$13K</td>
    <td headers="revenue q2 jun">$16K</td>
  </tr>
</table>

Multiple Header Levels

<td headers="region-west product-phones q1-sales">$50K</td>

The cell is associated with three headers: Region (West), Product (Phones), and Quarter (Q1 Sales).

Common Mistakes

1. headers attribute on wrong elements

headers is valid on both th and td. Put it on data cells that need explicit associations.

2. References to non-existent ids

Every id in the headers attribute must exist on a th element. Missing ids break the association.

3. Space-separated ids in wrong order

The order of ids in headers does not matter, but all referenced ids must be valid.

4. Using headers when scope is sufficient

Use scope for simple tables. headers adds complexity and maintenance burden.

5. No headers on cells with merged headers

Cells under merged headers need explicit headers references to associate with all applicable headers.

Practice Questions

1. What attribute explicitly associates a td with a th? The headers attribute on the td cell, referencing the id of the th element.

2. When is the headers attribute necessary? When tables have merged cells (colspan/rowspan) or multiple header levels that scope cannot handle.

3. How are multiple header ids separated in the headers attribute? By spaces: headers="header-id-1 header-id-2 header-id-3".

Challenge: Create a table with two levels of column headers and two levels of row headers. Use the headers attribute to create correct associations.

FAQ

Mini Project

Create a complex budget table with two header rows (quarter and month) and two header columns (category and subcategory). Use the headers attribute for all data cells.

What's Next

Learn about the Caption Element for naming data tables and providing context for screen reader users.