# Using `id` and `headers` attributes to associate data cells with header cells in data tables

ID: H43

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a `headers` attribute to each data cell (`td` element). It also adds an `id` attribute to any cell used as a header for other cells. The `headers` attribute of a cell contains a list of the `id` attributes of the associated header cells. If there is more than one `id`, they are separated by spaces.

This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the `th` element alone or the `th` element with the `scope` attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.

## Examples

### A table with multiple rows of headers

    <table>
      <tr>
        <th rowspan="2" id="h">Homework</th>
        <th colspan="3" id="e">Exams</th>
        <th colspan="3" id="p">Projects</th>
      </tr>
      <tr>
        <th id="e1" headers="e">1</th>
        <th id="e2" headers="e">2</th>
        <th id="ef" headers="e">Final</th>
        <th id="p1" headers="p">1</th>
        <th id="p2" headers="p">2</th>
        <th id="pf" headers="p">Final</th>
      </tr>
      <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
      </tr>
    </table>

## Tests

### Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If "no", the table is a layout table. If "yes", the table is a data table.
2. For data tables, check that any cell that is associated with more than one row and/or one column header contains a `headers` attribute that lists the `id` for all headers associated with that cell.

3. For data tables where any cell contains an `id` or `headers` attribute:

   1. Check that each `id` listed in the `headers` attribute of the data cell matches the `id` attribute of a cell that is used as a header element.
   2. Check that the `headers` attribute of a data cell contains the `id` attribute of all headers associated with the data cell.
   3. Check that all `id`s are unique (that is, no two elements in the page have the same `id`).

### Expected Results

- If table is a layout table, no cells contain `headers` or `id` attributes.
- If table is a data table and any cell contains an `id` attribute, checks #3.1, #3.2, and #3.3 are true.
- If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.

## Related Techniques

- H39
- H51
- H63

## Resources

- HTML - attributes common to `td` and `th` elements.