How do I connect a table's row and column headers to data cells?

When the relationships are more complicated than a clear row-and-column arrangement, identify each header explicitly and connect each data cell to every header that describes it. In HTML, give each relevant <th> a unique id; on a data cell, put the applicable IDs in its headers attribute, separated by spaces. A cell may need several IDs—for example, the column group, a subheading, and its row label. [S1]

Here is a small illustrative example. The IDs and figures are invented for demonstration; the figures are not factual data.

<table>
  <caption>Illustrative quarterly units by region</caption>
  <thead>
    <tr>
      <th id="region" rowspan="2">Region</th>
      <th id="year-2025" colspan="2">2025</th>
    </tr>
    <tr>
      <th id="q1">Quarter 1</th>
      <th id="q2">Quarter 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north">North</th>
      <td headers="north year-2025 q1">12</td>
      <td headers="north year-2025 q2">15</td>
    </tr>
  </tbody>
</table>

For the value 12, the associated headers are North, 2025, and Quarter 1. The caption names the table, but it does not replace the cell-to-header relationships. [S1]

Look at what the heading spans and whether its relationship to the data is clear from the table structure. For irregular headings that span multiple rows or columns, define the row or column groups in the markup and use scope="rowgroup" or scope="colgroup" for the corresponding group headers. [S2]

Use explicit IDs and headers on data cells when the associations are still unclear or too complicated to express with that group pattern. These are different approaches for different structures, not attributes to add indiscriminately to every table. WAI’s multi-level guidance points to explicit associations for unclear or non-linear relationships, including cases where a data cell has three or more headers. [S1] If a table is so complex that its relationships are difficult to follow, consider whether it can be split into smaller tables. [S1]

The value is under the 2025 group, as well as the Quarter 1 or Quarter 2 subheading, and it belongs to the North row. Listing all three makes those relationships explicit for that cell. Give other rows their own distinct IDs—for example, south—and include the appropriate row ID on each of their data cells.

For instance, a hypothetical South-region Quarter 1 value would use headers="south year-2025 q1". If you add another year, create a distinct year-header ID and connect each value to the correct year and quarter. Check the structure cell by cell: a copied headers value can accidentally point to the wrong row or column group.

Review the finished markup against the table’s actual layout. In particular, check the IDs and each data cell’s list of associated headers; a caption is helpful for identifying the table but does not establish those associations. [S1]

1. Give each header a unique id.
2. For every data cell, list all and only the headers that apply to it in headers, separated by spaces.
3. Check cells under grouped or spanning headings against the real row and column groups; use scope="rowgroup" or scope="colgroup" where that pattern fits. [S2]
4. Recheck the associations after inserting, moving, or renaming a row or column.
5. If the relationships remain unwieldy, consider splitting the table into smaller tables. [S1]

This example explains HTML markup patterns; the cited guidance does not establish that a particular table has been tested or that every browser or assistive-technology combination will present it identically.