Tableaux

Tableaux de présentation

5.3 [A] L’élément <table> doit posséder un attribut role="presentation".

Le contenu linéarisé doit rester compréhensible.

5.8 [A] Les tableaux de présentation ne doivent pas utiliser d’éléments propres aux tableaux de données :

  • l’élément <table> ne doit pas contenir d’éléments <caption>, <th>, <thead>, <tbody> ou <tfoot> ;
  • les éléments <td> ne doivent pas posséder d’attributs scope, headers ou colgroup.

N.B. : L’attribut axis est obsolète.

Tableaux de données

Légende

Les tableaux de données doivent posséder une légende (élément <caption>) :

  • Pour un tableau de données simple, la légende doit correspondre au « titre » du tableau 5.4 [A]. Ce titre doit être pertinent 5.5 [A].
  • Pour un tableau de données complexe, la légende doit donner un résumé du tableau 5.1 [A]. Ce résumé doit être pertinent 5.2 [A].

N.B. : L’attribut summary (résumé) de l’élément <table> est obsolète. Utiliser l’élément caption (légende).

En-têtes de colonnes et de lignes

5.6 [A] Les cellules correspondant aux en-têtes de colonnes et de lignes doivent être des éléments <th>.

Liens entre les données et les en-têtes de colonnes et de lignes

5.7 [A] Chaque cellule doit être reliée à ses en-têtes de colonnes et de lignes.

Première méthode : attribut scope

Tableau 1 : Données démographiques
Ville Population Densité
Paris 2 229 621 hab. 21 154 hab./km2
Lyon 500 715 hab. 10 460 hab./km2

Code :

<table>
   <caption>Tableau 1 : Données de l'entreprise</caption>
   <thead>
      <tr>
         <th scope="col">Ville</th>
         <th scope="col">Population</th>
         <th scope="col">Densité</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Paris</th>
         <td>2 229 621 hab.</td>
         <td>21 154 hab./km2</td>
      </tr>
      <tr>
         <th scope="row">Lyon</th>
         <td>500 715 hab.</td>
         <td>10 460 hab./km2</td>
      </tr>
   </tbody>
</table>

N.B. : L’attribut scope ne peut s’appliquer qu’à des lignes ou à des colonnes entières.

Deuxième méthode : attributs id et headers

Tableau 2 : Données démographiques
Ville Population Densité
Paris 2 229 621 hab. 21 154 hab./km2
Lyon 500 715 hab. 10 460 hab./km2

Code :

<table>
   <caption>Tableau 2 : Données de l'entreprise</caption>
   <thead>
      <tr>
         <th id="c1">Ville</th>
         <th id="c2">Population</th>
         <th id="c3">Densité</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th id="l1">Paris</th>
         <td headers="l1 c1">2 229 621 hab.</td>
         <td headers="l1 c2">21 154 hab./km2</td>
      </tr>
      <tr>
         <th id="l2">Lyon</th>
         <td headers="l2 c1">500 715 hab.</td>
         <td headers="l2 c2">10 460 hab./km2</td>
      </tr>
   </tbody>
</table>