9.3. Baliser les entêtes des tableaux de données complexes avec <th> et headers et id

Un tableau de données complexe est un tableau dans lequel les cellules d’entêtes ne s’appliquent pas systématiquement à la totalité des cellules de données d’une ligne ou d’une colonne.

Pour associer les entêtes aux données dans ce type de tableaux, utiliser les attributs id (identifiants) sur les cellules <th> et headers sur les cellules <td>.

Il s’agit ensuite de renseigner l’attribut headers avec les identifiants des cellules d’entêtes associées. Si plusieurs entêtes sont associés à une cellule de données, les identifiants doivent être séparés par des espaces dans headers.

<table>
   <caption>Températures moyennes mensuelles des 3 plus grandes villes de France et d'Espagne <span class="sr-only">(la première colonne indique le mois, et les autres colonnes indiquent les températures en fonction du pays et de la ville)</span></caption>
   <tr>
      <td></td>
      <th id="col1" colspan="3">France</th>
      <th id="col2" colspan="3">Espagne</th>
   </tr>
   <tr>
      <td></td>
      <th id="col3" headers="col1">Paris</th>
      <th id="col4" headers="col1">Marseille</th>
      <th id="col5" headers="col1">Lyon</th>
      <th id="col6" headers="col2">Madrid</th>
      <th id="col7" headers="col2">Barcelone</th>
      <th id="col8" headers="col2">Valence</th>
   </tr>
   <tr>
      <th id="row1">Juin</th>
      <td headers="col1 col3 row1">22°C</td>
      <td headers="col1 col4 row1">28°C</td>
      <td headers="col1 col5 row1">26°C</td>
      <td headers="col2 col6 row1">32°C</td>
      <td headers="col2 col7 row1">26°C</td>
      <td headers="col2 col8 row1">26°C</td>
   </tr>
   <tr>
      <th id="row2">Juillet</th>
      <td headers="col1 col3 row2">24°C</td>
      <td headers="col1 col4 row2">30°C</td>
      <td headers="col1 col5 row2">28°C</td>
      <td headers="col2 col6 row2">34°C</td>
      <td headers="col2 col7 row2">28°C</td>
      <td headers="col2 col8 row2">30°C</td>
   </tr>
</table>

Températures moyennes mensuelles des 3 plus grandes villes de France et d’Espagne (la première colonne indique le mois, et les autres colonnes indiquent les températures en fonction du pays et de la ville)

	France			Espagne
	Paris	Marseille	Lyon	Madrid	Barcelone	Valence
Juin	22°C	28°C	26°C	32°C	26°C	26°C
Juillet	24°C	30°C	28°C	34°C	28°C	30°C

Commentaires

Mises à jour

Haut de page