9.2. Tag simple data table headers with <th> and scope

A data table is simple when each header cell applies to all the cells in the row or column.

Tag each row and column header cell with the <th> tag

In each data table, tag each row and column header cell with the <th> tag.

In other words, whenever a cell is required to understand the data proposed in the table, it must be tagged with <th>.

Using the scope attribute on <th> tags

To associate headers with their corresponding data in this type of table, add the scope attribute to the <th> tags. The value of the attribute depends on whether the header cell concerns:

• An entire column: scope="col".
• An entire row: scope="row".

Example

<table>
   <caption>Average monthly temperatures of the 3 largest cities in Canada.</caption>
   <tr>
      <td>&nbsp;</td>
      <th scope="col">Toronto</th>
      <th scope="col">Montreal</th>
      <th scope="col">Vancouver</th>
   </tr>
   <tr>
      <th scope="row">June</th>
      <td>22°C</td>
      <td>28°C</td>
      <td>26°C</td>
   </tr>
   <tr>
      <th scope="row">July</th>
      <td>24°C</td>
      <td>30°C</td>
      <td>28°C</td>
   </tr>
</table>

Average monthly temperatures of the 3 largest cities in Canada.

	Toronto	Montreal	Vancouver
June	22°C	28°C	26°C
July	24°C	30°C	28°C

Comments

Updates

Back to top