Transformation élégante des tableaux
Par Victor Brito, le jeudi 14 février 2008, à 15h00 - Catégorie Moyens techniques - Lien permanent
Un tableau n'est pas conçu pour la mise en page d'un document Web. Ce qui ne veut pas dire qu'il faut le bannir, surtout quand on a des données qui, par nature, sont sous forme de tableaux. Encore faut-il savoir qu'un tableau, s'il n'est pas balisé de façon élégante, pose des difficultés d'accessibilité aux utilisateurs de lecteurs d'écran ou de plages braille.
Prenons l'exemple d'un tableau codé comme suit :
<table>
<tr>
<td>Pays</td>
<td>Population (en millions d'habitants)</td>
<td>Densité de la population (en habitants par kilomètre carré)</td>
</tr>
<tr>
<td>France</td>
<td>64</td>
<td>112</td>
</tr>
<tr>
<td>Espagne</td>
<td>43</td>
<td>86</td>
</tr>
<tr>
<td>Portugal</td>
<td>10</td>
<td>118</td>
</tr>
<tr>
<td>Inde</td>
<td>1 080</td>
<td>329</td>
</tr>
<tr>
<td>Chine</td>
<td>1 306</td>
<td>136</td>
</tr>
<tr>
<td>États-Unis</td>
<td>295</td>
<td>31</td>
</tr>
<tr>
<td>Canada</td>
<td>32</td>
<td>3</td>
</tr>
</table>
Un lecteur d'écran lira ce tableau comme si c'était un simple texte ; autrement dit, à partir de la deuxième ligne du tableau, l'utilisateur entendra le nom du pays, puis une série de deux nombres, si bien qu'à la longue, il ne saura plus à quoi correspondent ces chiffres.
Pour rendre le tableau accessible, il faut d'abord identifier les en-têtes de lignes et de colonnes. Pour cela, on recourt à la balise th.
<table>
<tr>
<th>Pays</th>
<th>Population (en millions d'habitants)</th>
<th>Densité de la population (en habitants par kilomètre carré)</th>
</tr>
<tr>
<th>France</th>
<td>64</td>
<td>112</td>
</tr>
<tr>
<th>Espagne</th>
<td>43</td>
<td>86</td>
</tr>
<tr>
<th>Portugal</th>
<td>10</td>
<td>118</td>
</tr>
<tr>
<th>Inde</th>
<td>1 080</td>
<td>329</td>
</tr>
<tr>
<th>Chine</th>
<td>1 306</td>
<td>136</td>
</tr>
<tr>
<th>États-Unis</th>
<td>295</td>
<td>31</td>
</tr>
<tr>
<th>Canada</th>
<td>32</td>
<td>3</td>
</tr>
</table>
Lorsqu'un tableau comporte un ou plusieurs groupes de données logiques, que ce soient des en-têtes, des corps ou des pieds de données, il faut les regrouper au moyen des balises suivantes : thead, tfoot et tbody pour regrouper les lignes, col et colgroup pour regrouper les colonnes. À noter que l'élément tfoot doit impérativement suivre thead et précéder tbody. Dans notre exemple, nous identifions clairement un groupe d'en-têtes pour la première ligne et nous pouvons regrouper les données restantes en les triant par continent, par exemple ; comme il n'y a pas de pied de tableau, nous n'utiliserons pas tfoot ; ce qui donne le code suivant :
<table>
<thead>
<tr>
<th>Pays</th>
<th>Population (en millions d'habitants)</th>
<th>Densité de la population (en habitants par kilomètre carré)</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">Europe</th>
</tr>
<tr>
<th>France</th>
<td>64</td>
<td>112</td>
</tr>
<tr>
<th>Espagne</th>
<td>43</td>
<td>86</td>
</tr>
<tr>
<th>Portugal</th>
<td>10</td>
<td>118</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Asie</th>
</tr>
<tr>
<th>Inde</th>
<td>1 080</td>
<td>329</td>
</tr>
<tr>
<th>Chine</th>
<td>1 306</td>
<td>136</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Amérique</th>
</tr>
<tr>
<th>États-Unis</th>
<td>295</td>
<td>31</td>
</tr>
<tr>
<th>Canada</th>
<td>32</td>
<td>3</td>
</tr>
</tbody>
</table>
Le tableau est à présent nettement mieux structuré. Mais, cela ne suffit pas, puisqu'il faut associer les cellules de données et les cellules d'en-tête, de façon à ce que l'utilisateur du lecteur d'écran sache à quoi correspondent les chiffres qu'il entend. Pour cela, plusieurs attributs sont disponibles, comme scope, id et headers. Dans notre exemple, nous ajoutons à chaque élément th l'attribut id ; puis, à chaque élément td (ainsi qu'aux éléments th contenant le nom des pays) nous ajoutons l'attribut headers, dont la valeur reprend celle de l'id des éléments th avec lesquels nous voulons associer l'élément en question (si plusieurs valeurs doivent être saisies, elles sont séparées par une espace). Cela donne le code suivant :
<table>
<thead>
<tr>
<th id="pays">Pays</th>
<th id="population">Population (en millions d'habitants)</th>
<th id="densite">Densité de la population (en habitants par kilomètre carré)</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3" id="europe">Europe</th>
</tr>
<tr>
<th id="fr" headers="pays europe">France</th>
<td headers="fr population europe">64</td>
<td headers="fr densite europe">112</td>
</tr>
<tr>
<th id="es" headers="pays europe">Espagne</th>
<td headers="es population europe">43</td>
<td headers="es densite europe">86</td>
</tr>
<tr>
<th id="pt" headers="pays europe">Portugal</th>
<td headers="pt population europe">10</td>
<td headers="pt densite europe">118</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" id="asie">Asie</th>
</tr>
<tr>
<th id="in" headers="pays asie">Inde</th>
<td headers="in population asie">1 080</td>
<td headers="in densite asie">329</td>
</tr>
<tr>
<th id="cn" headers="pays asie">Chine</th>
<td headers="cn population asie">1 306</td>
<td headers="cn densite asie">136</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" id="amerique">Amérique</th>
</tr>
<tr>
<th id="us" headers="pays amerique">États-Unis</th>
<td headers="us population amerique">295</td>
<td headers="us densite amerique">31</td>
</tr>
<tr>
<th id="ca" headers="pays amerique">Canada</th>
<td headers="ca population amerique">32</td>
<td headers="ca densite amerique">3</td>
</tr>
</tbody>
</table>
Ainsi, l'utilisateur d'un lecteur d'écran saura que le nombre 329 correspond à la densité de population de l'Inde, qui est incluse dans le groupe de données des pays d'Asie. On peut encore améliorer l'accessibilité du tableau, en y ajoutant un sommaire ; pour cela, il y a la balise caption, qui donne une légende au tableau (elle doit être placée tout en haut de l'élément table), et l'attribut summary, qui résume le tableau (il doit être placé dans la balise table) ; si les navigateurs visuels n'affichent que caption, les lecteurs d'écran, quant à eux, restituent en outre la valeur de summary. Enfin, on peut fournir des abréviations aux en-têtes grâce à l'attribut abbr, qui doit être placé dans la balise th et est pris en compte par les lecteurs d'écran. Sur ce, le résultat final de notre exemple ressemble au code suivant (on abrège deux des en-têtes présentes, les autres ayant un contenu déjà suffisamment court) :
<table summary="Nombre d'habitants, exprimé en millions, et densité de la population, exprimée en habitants par kilomètre carré, de quelques pays">
<caption>Tableau 1. Population et densité de population de quelques pays</caption>
<thead>
<tr>
<th id="pays">Pays</th>
<th id="population" abbr="Population">Population (en millions d'habitants)</th>
<th id="densite" abbr="Densité de population">Densité de la population (en habitants par kilomètre carré)</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3" id="europe">Europe</th>
</tr>
<tr>
<th id="fr" headers="pays europe">France</th>
<td headers="fr population europe">64</td>
<td headers="fr densite europe">112</td>
</tr>
<tr>
<th id="es" headers="pays europe">Espagne</th>
<td headers="es population europe">43</td>
<td headers="es densite europe">86</td>
</tr>
<tr>
<th id="pt" headers="pays europe">Portugal</th>
<td headers="pt population europe">10</td>
<td headers="pt densite europe">118</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" id="asie">Asie</th>
</tr>
<tr>
<th id="in" headers="pays asie">Inde</th>
<td headers="in population asie">1 080</td>
<td headers="in densite asie">329</td>
</tr>
<tr>
<th id="cn" headers="pays asie">Chine</th>
<td headers="cn population asie">1 306</td>
<td headers="cn densite asie">136</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" id="amerique">Amérique</th>
</tr>
<tr>
<th id="us" headers="pays amerique">États-Unis</th>
<td headers="us population amerique">295</td>
<td headers="us densite amerique">31</td>
</tr>
<tr>
<th id="ca" headers="pays amerique">Canada</th>
<td headers="ca population amerique">32</td>
<td headers="ca densite amerique">3</td>
</tr>
</tbody>
</table>
Bien entendu, il faut éviter d'utiliser th parce que son contenu est centré et affiché en gras par défaut sur les navigateurs visuels. Pour le centrage et la graisse, les CSS offrent de quoi s'amuser.
Si vous désirez approfondir l'utilisation des tableaux et leur accessibilité, en étudiant des cas de tableaux plus complexes que celui donné en exemple ci-dessus, vous n'avez qu'à aller au tableau.
