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:

<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

Add a comment

Required fields are marked *.

Back to top