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 into the <th>tags. The value of the attribute depends on the type of header:

<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