Au tableau !

Par Roger Johansson

L'utilisation des tableaux semble embrouiller les personnes qui débutent dans la mise en page basée sur les feuilles de styles. Dans beaucoup de cas, les gens traduisent « évitez d'utiliser les tableaux à des fins de présentation » par « n'utilisez pas de tableaux ». Il est important de savoir que les tableaux sont très pratiques, s'ils sont utilisés correctement.

Bien sûr, mieux vaut éviter d'utiliser les tableaux à des fins de mise en page, mais pour les données tabulaires, c'est ce qu'il faut employer. J'aimerais vous parler de la façon d'utiliser les tableaux pour mettre en forme des données tabulaires. En HTML et en XHTML, les tableaux sont plus que de simples lignes et cellules. Beaucoup plus. Surtout si vous désirez les rendre accessibles.

Tout d'abord, quelques informations de base. Vous pouvez trouver la recommandation « évitez d'utiliser les tableaux à des fins de présentation » dans l'introduction aux tableaux de la spécification HTML 4.01 :

Les tableaux ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tableaux peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir un tableau qui aura été conçu sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition plutôt que des tableaux.

Ceci me semble clair, bien que le verbe utilisé est devraient et non doivent, ce qui rend la spécification assez souple à ce sujet.

Mais le propos de cet article n'est pas de discuter du bien-fondé de l'utilisation de tableaux à des fins de présentation. L'objectif est de traiter de l'utilisation des tableaux dans leur but originel : mettre en forme des données tabulaires.

Lorsque les tableaux sont utilisés pour mettre en forme des données, ce ne sont pas simplement des grilles servant à la mise en page. Les personnes voyantes peuvent facilement discerner les en-têtes des cellules de données en regardant la mise en page et la présentation visuelle du tableau. Les personnes aveugles ou fortement malvoyantes ne le peuvent pas. Pour permettre à un tableau d'être accessible aux personnes utilisant un lecteur d'écran ou tout autre logiciel de rendu non visuel, il faut expliquer au logiciel comment les différentes informations contenues dans ce tableau sont associées.

Pour cela, le langage HTML propose heureusement de nombreux éléments et attributs. En revanche, il est assez difficile de comprendre l'utilisation qu'on peut faire de ces caractéristiques destinées à l'accessibilité. Dans cet article, je vais essayer d'expliquer comment utiliser quelques-unes de ces possibilités.

Les en-têtes de tableaux, <th>

Commençons par un tableau très simple qui n'aurait qu'une seule ligne d'en-têtes, chacun d'eux définissant les données contenues dans les colonnes. Avec une mise en page à l'ancienne, contenant uniquement des lignes et des cellules, le balisage ressemblerait à ceci :

<table>
<tr>
<td>Entreprise</td>
<td>Employés</td>

<td>Fondée en</td>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>

<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>

<td>1973</td>
</tr>
</table>

Sans aucun style ni bordure, le tableau ressemble à cela dans votre navigateur :

Entreprise Employés Fondée en
ACME Inc 1000 1947
XYZ Corp 2000 1973

En appliquant quelques styles au tableau, vous pouvez mettre en évidence les en-têtes pour ceux qui utilisent un navigateur graphique :

Entreprise Employés Fondée en
ACME Inc 1000 1947
XYZ Corp 2000 1973

Pour une personne voyante, il est maintenant rapide et facile de faire le lien entre les en-têtes et les cellules de données qu'ils décrivent. En revanche, l'utilisateur d'un lecteur d'écran entendrait quelque chose comme Entreprise Employés Fondée en ACME Inc. 1000 1947 XYZ Corp 2000 1073. Pas vraiment facile de donner un sens à toutes ces informations.

La première — et la plus facile — des étapes à effectuer pour rendre ce tableau plus accessible est d'identifier correctement les en-têtes. C'est très simple : il suffit d'utiliser la balise <th> (table header, ou en-tête de tableau) au lieu de <td> (table data, donnée tabulaire) pour les cellules qui servent d'en-têtes :


<table>

<tr>
<th>Entreprise</th>
<th>Employés</th>
<th>Fondée en</th>

</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>

</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>

</tr>
</table>
Entreprise Employés Fondée en
ACME Inc 1000 1947
XYZ Corp 2000 1973

Dans ce tableau simple, il y a suffisamment d'informations pour qu'un lecteur d'écran soit capable de faire comprendre à l'utilisateur quel en-tête est en relation avec quelles cellules. Un lecteur d'écran prononcera Entreprise : ACME Inc. Employés : 1000. Fondée en : 1947., et ainsi de suite pour chaque ligne. C'est bien mieux qu'avant.

Les légendes de tableaux : <caption>

L'élément <caption> peut être utilisé pour fournir une courte description du tableau, un peu comme la légende d'une image. Par défaut, la plupart des navigateurs graphiques affichent l'élément <caption> centré au-dessus de la table. Si nécessaire, cela peut-être changé à l'aide de la propriété CSS caption-side. La majorité des navigateurs afficheront la légende soit au dessus (caption-side: top), soit en dessous (caption-side: bottom) du contenu du tableau, tandis que d'autres accepteront gauche (caption-side: left) et droite (caption-side: right) comme valeurs. Je vous laisse le soin de tester cela par vous-même.

Lorsqu'il est utilisé, l'élément <caption> doit être placé juste après la balise ouvrante <table> :


<table>
<caption>Tableau 1 : données de l'entreprise</caption>

<tr>
<th>Entreprise</th>
<th>Employés</th>
<th>Fondée en</th>

</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>

</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>

</tr>
</table>
Tableau 1 : données de l'entreprise
Entreprise Employés Fondée en
ACME Inc 1000 1947
XYZ Corp 2000 1973

Vous pouvez évidemment utiliser les styles pour modifier l'apparence de la légende, si vous le désirez. Cependant, il faut parfois faire preuve d'un peu de ruse pour modifier l'apparence de façon uniforme, quel que soit le navigateur utilisé. C'est un autre exercice que je vous laisse.

Pour expliquer les tableaux : l'attribut summary

Une personne voyante peut facilement décider de lire un tableau en détail ou pas. Un rapide coup d'oeil lui indiquera la taille du tableau, et ce qu'il contient globalement. Une personne utilisant un lecteur d'écran ne peut pas faire de même, à moins d'ajouter l'attribut summary à notre tableau. De cette façon vous pouvez fournir une description du tableau plus détaillée qu'en utilisant simplement l'élément <caption>, qui peut se révéler trop synthétique.

Le contenu de l'attribut summary ne sera pas interprété par les navigateurs visuels, donc n'hésitez pas à fournir une description assez longue pour que tous ceux qui l'entendent comprennent de quoi il s'agit. N'en faites pas trop non plus, et n'utilisez l'attribut summary que lorsque c'est vraiment nécessaire, par exemple pour des tableaux plus complexes dans lesquels un résumé facilitera la compréhension du tableau à une personne utilisant un lecteur d'écran.


<table summary="Le nombre d'employés et la date de création de quelques entreprises fictives.">

<caption>Tableau 1 : données de l'entreprise</caption>
<tr>
<th>Entreprise</th>
<th>Employés</th>

<th>Fondée en</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>

<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>

<td>1973</td>
</tr>
</table>

Pour raccourcir les en-têtes : l'attribut abbr

Lorsqu'un lecteur d'écran rencontre un tableau, il peut prononcer le ou les en-têtes associés avant chaque cellule de données. Si vous avez de longs en-têtes, les entendre à chaque nouvelle ligne peut devenir pénible. En recourant à l'attribut abbr pour abréger chaque en-tête trop long, vous permettez aux utilisateurs d'un lecteur d'écran d'utiliser ces abréviations en lieu et place de l'en-tête lui-même. L'utilisation de abbr est optionnel, et de toute façon vos en-têtes seront (ou devraient être) assez courts.

En modifiant légèrement notre tableau d'exemple pour rallonger les en-têtes, l'attribut abbr pourrait être utilisé comme suit :


<table summary="Le nombre d'employés et l'année de création de quelques entreprises imaginaires.">
<caption>Tableau 1 : données de l'entreprise</caption>
<tr>

<th abbr="Entreprise">Nom de l'entreprise</th>
<th abbr="Employés">Nombre d'employés</th>
<th abbr="Fondée en">Année de création</th>
</tr>

<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>

</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>

</tr>
</table>
Tableau 1 : données de l'entreprise
Nom de l'entreprise Nombre d'employés Année de création
ACME Inc 1000 1947
XYZ Corp 2000 1973

Un lecteur d'écran pourrait alors lire l'en-tête complet pour la première ligne de données, puis l'abréger dans les lignes suivantes.

Au vu de la difficulté à faire tenir des tableaux de données dans une mise en page, je dirais qu'il est plus simple de faire le contraire : raccourcir autant que possible les en-têtes, voire les abréger, et utiliser l'attribut title ou l'élément <abbr> afin de fournir une explication plus fournie.

Pour lier les en-têtes aux données : les attributs scope, id et headers

Beaucoup de tableaux sont plus complexes que celui que j'ai utilisé en guise d'exemple. Je vais le compliquer un peu en enlevant l'en-tête "Entreprise" et en transformant les cellules de données de la première colonne en cellules d'en-tête :


<table summary="Le nombre d'employés et l'année de création de quelques entreprises imaginaires.">
<caption>Tableau 1 : données de l'entreprise</caption>
<tr>
<td></td>
<th>Employés</th>

<th>Fondée en</th>
</tr>
<tr>
<th>ACME Inc</th>
<td>1000</td>

<td>1947</td>
</tr>
<tr>
<th>XYZ Corp</th>
<td>2000</td>

<td>1973</td>
</tr>
</table>
Tableau 1 : données de l'entreprise
Employés Fondée en
ACME Inc 1000 1947
XYZ Corp 2000 1973

À présent, chaque cellule possède deux en-têtes. La méthode la plus simple et la plus propre pour s'assurer que les navigateurs non-visuels peuvent comprendre le sens de ce tableau est d'ajouter l'attribut scope à toutes les cellules d'en-tête :


<table summary="Le nombre d'employés et l'année de création de quelques entreprises imaginaires.">
<caption>Tableau 1 : données de l'entreprise</caption>
<tr>

<td></td>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>

<tr>
<th scope="row">ACME Inc</th>
<td>1000</td>
<td>1947</td>

</tr>
<tr>
<th scope="row">XYZ Corp</th>
<td>2000</td>
<td>1973</td>

</tr>
</table>

L'attribut scope indique si la cellule d'en-tête fournit des informations d'en-tête pour une colonne ou pour une ligne :

Ajouter un attribut scope avec la valeur col aux en-têtes de la première ligne indique que ces derniers servent d'en-têtes aux cellules qui se trouvent en dessous. De même, assigner aux en-têtes de chaque début de ligne l'attribut scope avec la valeur row les transforment en en-têtes pour toutes les cellules se trouvant à leur droite.

L'attribut scope accepte en outre deux valeurs supplémentaires :

Un groupe de colonnes est défini par l'élément <colgroup>. Les groupes de lignes sont quant à eux définis par les éléments <thead>, <tfoot> et <tbody>. Je reviendrai sur ces derniers dans un instant.

Comment faire si vous voulez garder l'en-tête "Entreprise", et définir en même temps les noms d'entreprises en tant qu'en-têtes de ligne ? Les cellules contenant les noms d'entreprises fourniraient alors à la fois les informations d'en-tête et de données. Dans ce cas, <td> devrait être utilisé avec l'attribut scope :


<table summary="Le nombre d'employés et l'année de création de quelques entreprises imaginaires.">
<caption>Tableau 1 : données de l'entreprise</caption>

<tr>
<th scope="col">Entreprise</th>
<th scope="col">Employés</th>
<th scope="col">Fondée en</th>

</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>

</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>2000</td>
<td>1973</td>

</tr>
</table>

De cette façon, les navigateurs visuels n'afficheront pas le nom des entreprises en tant qu'en-tête par défaut. Il faut donc faire un peu de CSS pour corriger ce problème. Pour cet exemple, j'ai utilisé le style suivant :


td[scope] {
	font-weight:bold;
}

Notez que cette règle utilise un sélecteur d'attribut, chose qu'Internet Explorer ne comprend pas. Pour contourner le problème, on pourrait ajouter une classe à chaque cellule de données afin de lui attribuer un style d'en-tête.

Tableau 1 : données de l'entreprise
Entreprise Employés Fondée
ACME Inc 1000 1947
XYZ Corp 2000 1973

Une autre technique pour connecter les données d'un tableau aux en-têtes correspondants consiste à donner un id unique à chaque en-tête. Un attribut d'en-tête (header) est alors ajouté à chaque cellule de données. Cet attribut contient une liste d'id, séparés par des espaces, de chaque cellule d'en-tête s'appliquant à cette cellule de données. Cette technique est plus compliquée, et ne devrait être utilisée que lorsque des cellules de données ont besoin d'être reliées à plus de deux cellules d'en-têtes, et que l'attribut scope est insuffisant, comme par exemple dans un tableau très complexe ou très irrégulier.

Pour illustrer mon propos, j'ai changé le tableau afin d'afficher le nombre d'employés de chaque sexe pour chaque entreprise :


<table class="extbl" summary="Le nombre d'employés et l'année de création de quelques entreprises imaginaires.">
<caption>Tableau 1 : données de l'entreprise</caption>
<tr>
<td rowspan="2"></td>
<th id="employes" colspan="2">Employés</th>
<th id="fondee" rowspan="2">Fondée en</th>
</tr>
<tr>
<th id="hommes">Hommes</th>
<th id="femmes">Femmes</th>

</tr>
<tr>
<th id="acme">ACME Inc</th>
<td headers="acme employes hommes">700</td>
<td headers="acme employes femmes">300</td>
<td headers="acme fondee">1947</td>
</tr>
<tr>
<th id="xyz">XYZ Corp</th>
<td headers="xyz employes hommes">1200</td>

<td headers="xyz employes femmes">800</td>
<td headers="xyz fondee">1973</td>
</tr>
</table>
Tableau 1 : données de l'entreprise
Employés Fondée en
Hommes Femmes
ACME Inc 700 300 1947
XYZ Corp 1200 800 1973

Comme vous le voyez, cette méthode devient très vite compliquée, et c'est pour cela que je vous conseille l'attribut scope autant que possible.

Étendre les lignes et les colonnes sur plusieurs cellules

À l'époque où on utilisait les tableaux pour mettre en page un site Internet, les attributs rowspan et colspan étaient très souvent employés pour étendre les cellules d'un tableau sur plusieurs lignes ou plusieurs colonnes dans le but de rassembler correctement une interface coupée en morceaux.

Ces attributs sont encore utilisés à l'heure actuelle, car il n'y a aucune façon de spécifier l'extension de cellules en CSS. Si on y réfléchit, c'est assez logique : l'extension de lignes et de colonnes fait partie de la structure d'un tableau, pas de sa présentation.

Colonnes et groupes de colonnes : <col> et <colgroup>

En HTML, les éléments <col> et <colgroup> servent à grouper des colonnes qui ont un rapport entre elles. Ceci permet (dans certains navigateurs) l'utilisation de CSS pour affecter un style aux colonnes de façon indépendante. Les groupes de colonnes peuvent aussi être utilisés par l'attribut scope pour spécifier qu'une cellule sert d'en-tête au reste du groupe de colonnes qui la contient.

C'est tout ce que je vous dirai concernant les colonnes et les groupes de colonnes. Pour plus d'informations, allez consulter les liens présents dans la section Ce que je ne vous ai pas dit.

Les groupes de lignes : <thead>, <tfoot> et <tbody>

Les lignes d'un tableau peuvent être regroupées dans un en-tête de tableau (<thead>), un pied de tableau (<tfoot>), et un ou plusieurs corps de tableau (<tbody>). Chaque groupe de lignes doit contenir une ou plusieurs lignes.

Si un tableau possède un en-tête, celui-ci doit apparaître avant le corps et le pied de tableau. Un pied de tableau doit apparaître uniquement avant le(s) corps du tableau. Si aucun en-tête ou pied n'est utilisé, l'élément <tbody> est inutile (mais pas interdit, vous pouvez donc l'utiliser si bon vous semble). La structure d'un tableau contenant des groupes de lignes ressemble à ceci :


<table>
<thead>
<tr></tr>
	... quelques lignes pour l'en-tête de tableau

</thead>
<tfoot>
<tr></tr>
	... quelques lignes pour le pied de tableau
</tfoot>

<tbody>
<tr></tr>
... quelques lignes pour le premier corps du tableau
</tbody>
<tbody>

<tr></tr>
... quelques lignes pour le deuxième corps du tableau
</tbody>
... quelques corps de tableaux supplémentaires si nécessaire
</table>

Le groupement de lignes peut être utile pour plusieurs raisons :

Uniquement pour les tableaux contenant des données !

Tout ce qui a été décrit dans cet article est relatif à l'utilisation de tableaux HTML pour structurer et présenter des données. Si vous utilisez encore les tableaux à des fins de présentation, aucune des techniques citées précédemment ne devrait être appliquée. Pas d'attribut summary, pas d'en-tête, pas d'élément <caption>, rien. Seule une bête mise en page en tableaux, uniquement constituée des éléments <table>, <tr> et <td>. Dans le cas contraire, vous risqueriez d'augmenter encore la confusion de vos visiteurs !

Les bénéfices

Il peut sembler très éprouvant de créer des tableaux de données accessibles en HTML. Pour les tableaux complexes, c'est effectivement le cas. Parfois, il semble même impossible de les réaliser à la main. Pourtant, pour des tableaux simples, l'utilisation de cellules d'en-têtes avec un attribut scope est simple et rapide.

Il est évident que les utilisateurs de lecteurs d'écran ou d'autres technologies d'assistance bénéficient grandement des tableaux utilisant au mieux les fonctions d'accessibilité. Comprendre le sens d'un tableau long et complexe simplement en l'écoutant peut toujours s'avérer ardu, donc quoi qu'il arrive, essayez de le simplifier au maximum.

Il est moins évident de s'apercevoir que les designers et les utilisateurs de navigateurs visuels en bénéficient aussi : un tableau accessible possède de nombreuses balises structurelles auxquelles on peut appliquer des styles, et un bon design peut rendre le tableau plus facile à comprendre pour tout le monde.

Ce que je ne vous ai pas dit

Il y a beaucoup d'autres choses à dire sur les tableaux de données. Par exemple, je ne vous ai pas parlé du tout de l'attribut axis (jusqu'à maintenant), et je n'ai pas exploré en profondeur les possibilités des éléments <colgroups> et <col>. Je ne suis pas non plus rentré dans les détails de la mise en page et du design de tableau. Enfin je n'ai pas donné d'exemple concret de tableau vraiment complexe.

Pour ceux d'entre vous qui chercheraient plus d'informations à ce sujet, voici quelques liens vers des articles d'approfondissement :

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

Fiche technique

À propos de l'auteur

Roger Johansson vit en Suède, ou il travaille dans le web comme développeur/designer/rédacteur occasionnel depuis 1994.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

Accessibilité

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site