[DRAFT] 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".
Example 1:Table with header cells in one column only
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.
Belgium | Brussels |
---|---|
France | Paris |
Holland | Amsterdam |
Luxembourg | Luxembourg |
Spain | Madrid |
UK | London |
Code snippet
<tr>
<th scope="row">Belgium</th>
<td>Brussels</td>
</tr>
Full code Example 1:Table with header cells in one column only
Example 2: Table with an offset (@@@internal?@@@) column of header cells
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.
PayrollRef. | Name | Jul | Aug | Sept | Oct | Nov | Dec |
---|---|---|---|---|---|---|---|
215 | Abel | 5 | 2 | 0 | 0 | 0 | 3 |
231 | Annette | 0 | 5 | 3 | 0 | 0 | 6 |
173 | Bernard | 2 | 0 | 0 | 5 | 0 | 0 |
141 | Gerald | 0 | 10 | 0 | 0 | 0 | 8 |
99 | Michael | 8 | 8 | 8 | 8 | 4 |
Code snippet
<tr>
<td>215</td>
<th scope="row">Abel</th>
Full code for Example 2: Table with an offset column of header cells
Example 3: Table with headers spanning multiple rows or columns
In this example, some of the row header cells span two or more rows of data cells and one column header spans three columns.
Poster name | Color | Sizes available | ||
---|---|---|---|---|
Zodiac | Full color | A2 | A3 | A4 |
Black and white | A1 | A2 | A3 | |
Sepia | A3 | A4 | A5 | |
Angels | Black and white | A1 | A3 | A4 |
Sepia | A2 | A3 | A5 |
Code snippet
<th scope="col">Color</th>
<th colspan="3" scope="coltroup">Sizes available</th>
</tr>
<tr>
<th rowspan="3" scope="rowgroup">Zodiac</th>
<td>Full color</td>
Full code for Example 3: Table with headers spanning multiple rows or columns
Related WCAG2.0 Techniques
The following WCAG 2.0 technique was used in the examples above: