Scope and headers

Provide complex table accessibility with scope, headers and id.

The scope attribute

At beginner level you added the scope attribute to <th> cells. This attribute tells screen readers whether a cell is a row or a column header.

Its values are: col (column header), row (row header), colgroup (column-group header) and rowgroup (row-group header). For simple tables col and row are usually enough.

Complex tables with headers and id

Some tables hold two-dimensional headers; each cell links to both a row and a column header. In such complex tables scope is not enough; with the headers attribute and id you bind a cell to its headers explicitly.

The recipe is: give each <th> an id, and on the matching <td> cells write headers="id1 id2". The screen reader then reads the headers as it reads the cell.

Exercise Write a complex table: scope, id and headers

Write a two-column table. Put a non-empty <caption> inside <table>. In <thead> put two <th>; give each scope="col" and an id. In <tbody> add at least two rows; each row's first cell is a <th> with scope="row", and the second cell is a <td> whose headers attribute points to the relevant th ids.

Show example solution

<table>
  <caption>Phone Features</caption>
  <thead>
    <tr>
      <th scope="col" id="feature">Feature</th>
      <th scope="col" id="value">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="weight">Weight</th>
      <td headers="weight value">180 g</td>
    </tr>
    <tr>
      <th scope="row" id="screen">Screen</th>
      <td headers="screen value">6.1 in</td>
    </tr>
  </tbody>
</table>

Test yourself

What does the scope="col" attribute indicate?
- The cell is a column header
- The cell is a row header
- The cell spans several columns
- The cell spans several rows
Show answer

The cell is a column header — Correct. scope="col" marks the th as a column header.

Bind the td to the th header

<th id="name" scope="row">Weight</th>
<td headers="____">320 g</td>

Show answer

<th id="name" scope="row">Weight</th>
<td headers="name">320 g</td>

Match each scope value to its meaning

scope="col"

Column header
scope="row"

Row header
scope="colgroup"

Column-group header
headers+id

Complex-table binding

Next lesson: Table accessibility

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies