9. TABLEAUX

9.1 Tableaux de mise en forme

L’utilisation des CSS est privilégiée pour la mise en forme des pages.

Dans le cas où l’utilisation du tableau pour la mise en forme de la page vous est contraint, il faut ajouter l’attribut role=”presentation” dans la balise <table>.

9.2 Tableaux de données

9.2.1 Donner un titre à chaque tableau de données avec la balise <caption>

Chaque fois qu’un tableau de données est intégré dans la page HTML, celui-ci doit posséder un titre clair et concis.  Ce titre doit être balisé avec <caption> et doit introduire le contenu du tableau.

<table>
   <caption>
      Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.
   </caption>
   […]
</table>

ASTUCES - BONIFICATION

Résumer le contenu et la structure de chaque tableau de données avec l'attribut summary. Cet attribut doit être utilisé en complément de la balise <caption> . La balise <caption> est pour tous, tandis que l'attribut summary est une annotation additionelle sur l'affichage du tableau pour les lecteurs d'écran. Ex : Mon tableau présente la liste des nominés au gala des Oliviers de 2010 à 2015 par catégorie. Celle-ci affiche les catégories par ordre alphabétique (et non pas dans l'ordre de nomination durant la soirée).

<table summary="La liste suivante est affichée par catégorie en ordre alphabétique">
   <caption>
      Liste des nominés au gala des Oliviers de 2010 à 2015 par catégorie.
   </caption>
   [...]
</table>

9.2.2 Baliser chaque cellule d'en-tête de ligne et de colonne avec la balise <th>

Dans un tableau de données, baliser chaque cellule d’en-tête de ligne et de colonne avec la balise <th> . C’est-à-dire, chaque fois qu’une cellule est nécessaire à la compréhension des données proposées dans le tableau, celle-ci doit être balisée avec <th>.

<table>
   <caption> Fiche de points par personne</caption>
   <tr>
      <th>Prénom</th>
      <th>Nom</th> 
      <th>Points</th>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
   </tr>
   [...]
</table>

9.2.3 Utiliser l'attribut « scope » pour associer les cellules aux en-têtes des tableaux de données simples

Un tableau de données simple est un tableau dans lequel les cellules d’en-têtes s’appliquent systématiquement à la totalité des cellules de données d’une ligne ou d’une colonne.

Pour associer les en-têtes à leurs données dans ce type de tableaux, utiliser l’attribut « scope » sur les balises<th> . La valeur de cet attribut changera selon la cellule d’en-tête concernée :

• La totalité d’une colonne : scope=”col”. 

• La totalité d’une ligne : scope=”row”.

<table>
   <caption>
      Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.
   </caption>
   <tr>
       <td> </td>
       <th scope="col">Paris</th>
       <th scope="col">Marseille</th>
       <th scope="col">Lyon</th>
   </tr>
   <tr>
       <th scope="row">Juin</th>
       <td>22°C</td>
       <td>28°C</td>
       <td>26°C</td>
   </tr>
   <tr>
       <th scope="row">Juillet</th>
       <td>24°C</td>
       <td>30°C</td>
       <td>28°C</td>
   </tr>
</table>

9.2.4 Utiliser les attributs « headers » et « id » pour associer les cellules aux en-têtes des tableaux de données complexes

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

Pour associer les en-têtes aux données dans ce type de tableaux, utiliser les attributs « id » (identifiants) sur les cellules <th>  et « header » sur les cellules <td>.

Il suffit ensuite de préciser l’attribut « header » avec les identifiants des cellules d’en-têtes associées. Si plusieurs en-têtes sont associés à une cellule de données, les identifiants doivent être séparés par des espaces dans headers.

<table>
   <caption>
      Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en 2011
   </caption>
   <tr>
       <th id="entete-un">En millions d'euros</th>
       <th id="entete-deux">En France</th>
       <th id="entete-trois">Dans le monde</th>
   </tr>
   <tr>
       <th id="entete-quatre">Dupond</th>
       <td headers="entete-quatre entete-deux entete-un">50,7</td>
       <td headers="entete-quatre entete-trois entete-un">139,3</td>
   </tr>
   <tr>
       <th id="entete-cinq">Dupont</th>
       <td headers="entete-cinq entete-deux entete-un">27,1</td>
       <td headers="entete-cinq entete-trois entete-un">476,0</td>
   </tr>
</table>

REMARQUES

Une bonne pratique d’accessibilité consiste à respecter un ordre logique lorsque les valeurs des attributs « id » des cellules d’en-têtes associées à une cellule de données sont intégrées dans l’attribut headers de cette dernière.

L’ordre de ces valeurs suivra l’ordre de lecture par un lecteur d’écran.

ATTENTION

Les attributs « header » et « id » ne doivent pas être utilisés en combinaison de l’attribut « scope ».