Scope of Headers

Scope is the attribute used to define the direction and range of data cells that are covered by a header cell. For example a header cell that spans three columns with the scope value "colgroup" associates the header with the data cells in all three columns. The scope attribute should be used for all <th> cells where either the direction or range of data cell coverage needs to be clearly associated. @@@Or always?@@@. Possible values for the scope attribute are “row”, “col”, “rowgroup” or “colgroup”.

Table with header cells in one column only Link to this section of the page

This example has <th> elements for all cells in the left column of a table. The scope value “row” is used on each <th> cell to ensure that it cannot be mistaken as a header for other cells in the same column.

<table>
  <caption>Capital cities</caption>
  <tr>
    <th scope="row">Belgium</th> <td>Brussels</td>
  </tr>
  <tr>
    <th scope="row">France</th> <td>Paris</td>
  </tr>
  <tr>
    <th scope="row">Holland</th> <td>Amsterdam</td>
  </tr>
  […]
</table>

Full code Example “Table with header cells in one column only”

Table with an offset (@@@internal?@@@) column of header cells Link to this section of the page

In this table the row header cells are in the second column rather than the first. The scope values "row" and has been used on the <th> second column cells to ensure that data cells in the first column, as well as those in cells to the right of the headers are correctly associated.

[…]
<tr>
  <td>215</td>
  <th scope="row">Abel</th>
  <td>5</td>
  <td>2</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
</tr>
[…]

Full code for “Table with an offset column of header cells”

Table with headers spanning multiple rows or columns Link to this section of the page

In this example, some of the row header cells span two or more rows of data cells and one column header spans three columns.

[…]
<tr>
  <th scope="col">Poster name</th>
  <th scope="col">Color</th>
  <th colspan="3" scope="colgroup">Sizes available</th>
  </tr>
<tr>
  <th rowspan="3" scope="rowgroup">Zodiac</th>
  <td>Full color</td>
  <td>A2</td>
  <td>A3</td>
  <td>A4</td>
</tr>
[…]

Full code for “Table with headers spanning multiple rows or columns”

Related WCAG2.0 Techniques Link to this section of the page

The following WCAG 2.0 technique was used in the examples above:

• H63: Using the scope attribute to associate header cells and data cells in data tables