9.2.3. Use the scope attribute to associate cells with the headers in simple tables

A simple data table is a table in which the header cells apply systematically to all the data cells in the corresponding row or column.

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

  • The entirety of a column: scope=“col”.
  • The entirety of a row: scope=“row”.
<table>
    <caption>Average monthly temperatures of the 3 largest United States cities in 2012.</caption>
    <tr>
        <td>&nbsp;</td>
        <th scope="col">New York</th>
        <th scope="col">Boston</th>
        <th scope="col">Washington</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 United States cities in 2012.
  New York Boston Washington
June 22°C 28°C 26°C
July 24°C 30°C 28°C

notices/html-css/utiliser-l-attribut-scope-pour-associer-les-cellules-aux-entetes-des-tableaux-de-donnees-simples.txt · Last modified: 11 June 2013 at 14:37 by Sébastien Delorme (Atalan)
 

Project coordinated by Atalan.

In partnership with:

Observers: