9.3. In simple tables use the scope attribute to associate data cells with their corresponding headers

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

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".

<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

Find out more

Comments

Back to top