Summary

Identify which column(s) or row(s) table headers apply to so that users of assistive technologies can understand the context of the data they are reading.

Techniques

Examples

Example 1 — Headers at end of row

The following table shows a distance chart with the start destinations defined in the first row and at the end destination at the end of each subsequent row.

The scope "row" is added to the row headers to ensure they are correctly associated with all the cells that precede them.

Vancouver Calgary Saskatoon Winnipeg Toronto Montreal St. John's
7323 6334 5838 5010 3141 2602 St. John's
4271 3743 3232 2408 539 2602 Montreal
<table>
   <tr>
     <th>Vancouver</th>
     <th>Calgary</th>
     <th>Saskatoon</th>
     <th>Winnipeg</th>
     <th>Toronto</th>
     <th>Montreal</th>
     <th>St. John's</th>
     <td></td>
   </tr>
   <tr>
     <td>7323</td>
     <td>6334</td>
     <td>5838</td>
     <td>5010</td>
     <td>3141</td>
     <td>2602</td>
     <td></td>
     <th scope="row">St. John's</th>
   </tr>
   <tr>
     <td>4271</td>
     <td>3743</td>
     <td>3232</td>
     <td>2408</td>
     <td>539</td>
     <td></td>
     <td>2602</td>
     <th scope="row">Montreal</th>
   </tr>
   …
</table>
Example 2 — Sectioned Table

In this example, the table shows population change over time. It is split into sections for each fictional region, so the scope "rowgroup" is applied to each section heading to associate it with all the cells in the group (each tbody element defines a new group).

1950 1975 2000
Gondor
Male 1,001,542 1,583,771 2,221,945
Female 1,122,947 1,782,371 2,544,187
Mordor
<table>
   <thead>
      <tr>
         <th></th>
         <th>1950</th>
         <th>1975</th>
         <th>2000</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th colspan="4" scope="rowgroup">Gondor</th>
      </tr>
      <tr>
         <th>Male</th>
         <td>1,001,542</td>
         <td>1,583,771</td>
         <td>2,221,945</td>
      </tr>
      <tr>
         <th>Female</th>
         <td>1,122,947</td>
         <td>1,782,371</td>
         <td>2,544,187</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th colspan="4" scope="rowgroup">Mordor</th>
      </tr>
      …
   </tbody>
</table>

Explanation

The scope attribute is used to clarify relationships between headers and cells. It is attached to th elements to clarify their directionality and takes one of the following four values:

col

The col value indicates that the header applies to the cells below or above it (dpeending on the directionality of the language).

The col value can be used with headers that span multiple columns (i.e., that have a colspan attribute).

colgroup

The colgroup value indicates that the header applies to the cells in the corresponding colgroup element definition.

The colgroup value must always correspond to a colgroup element declaration for the table. If a colgroup element is not defined, the value is invalid.

row

The row value indicates that the header applies to the cells to the right or left of it (depending on the directionality of the language).

The row value can be used with headers that span multiple rows (i.e., that have a rowspan attribute).

rowgroup

The rowgroup value indicates that the header applies to the cells above or below and to the right or left (depending on the directionality of the language) in the group of rows the header belongs to.

A row group is defined by the thead, tbody, or tfoot that the header is within. If none of these elements are specified, the attribute value is invalid.

Although it is not necessary to specify a scope for simple tables where the first row(s) or column(s) contain the header cells, it is best to specify the scope whenever there is an ambiguity.

If the header for a row is not in the first column, for example, it may not be recognized as applying to some or all of the cells. In this case, specifying scope="row" will make the association explicit for all the cells (see Example 1).

Similarly, if a table is divided into sections, the header rows for each section might be read out for each cell if a row group is not properly defined (see Example 2.

If you do not declare a scope information where these ambiguities exist, assistive technologies will make a best guess at how to apply the headers, which can lead to incorrect interpretations.

Note

Some guidance states that col and row scopes cannot be used with when colspan and rowspan attributes are declared; that you must define colgroup and rowgroup scopes with the applicable structuring requirements. This advice is incorrect.

Related Links