Autant il est déconseillé de structurer une page HTML à l’aide de tableaux imbriqués, autant il est conseillé d’utiliser un tableau pour présenter des données sous forme tabulaire. Par contre, dans ce dernier cas, il convient de formater le tableau afin de le rendre plus accessible.

Un tableau donc un titre

Tout d’abord, un tableau doit avoir un titre pour plus de clarté. Pour cela, on utilise la balise <caption>. Voici un exemple :

<table>
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<td>
…

Cette balise doit être placée juste après la balise <table>.

Un petit résumé ferait pas de mal

Une autre balise sert à préciser le contenu et le but des données présentées dans le tableau. Cette balise est <summary> et il s’agit d’un attribut à la balise <table>. Voici un exemple d’utilisation :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<td>
…

C’est plus clair avec des entêtes

Mais un tableau se doit également de posséder des entêtes de colonnes. C’est la balise <th> qui sert à désigner les entêtes. On l’utilise comme suit :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th>client1</th>
<th>client2</th>
<th>client3</th>
…

Encore plus accessible

Pour que les personnes surfant avec un lecteur d’écran (handicapés visuels) s’y retrouvent plus facilement, il faut associer les entêtes du tableau aux données de ce dernier. Ainsi, les lecteurs d’écran « liront » le tableau d’une manière plus logique plutôt que de lire chaque rangée bêtement de gauche à droite.

Il faut tout d’abord ajouter des « id » aux entêtes du tableau. Rien de plus facile :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th id="client1">client1</th>
<th id="client2">client2</th>
<th id="client3">client3</th>
…

Il suffit maintenant d’ajouter l’attribut correspondant dans chaque cellule du tableau. Très simple :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th id="client1">client1</th>
<th id="client2">client2</th>
<th id="client3">client3</th>
</tr>
<tr>
<td headers="client1">300 euros</td>
<td headers="client1">200 euros</td>
<td headers="client1">100 euros</td>

…

Groupons, groupons

Enfin, trois autres balises peuvent être utiles pour plus d’accessibilité et de convenance. Elles permettent également d’apporter davantage de sens à la structure du tableau. Ces trois balises sont : <thead>, <tbody>, <tfoot>. On peut donc séparer le contenu du tableau en trois parties logiques : les entêtes, le corps du tableau et le pied du tableau. Pour le développeur CSS, cela veut dire qu’il dispose de trois zones distinctes de formatage sans avoir à rajouter d’attributs « id » ou « class ». Voici un exemple :


<table>
<thead>
<tr>
... c'est ici que l'on met les entêtes du tableau
</tr>
</thead>
<tfoot>
<tr>
... c'est ici que l'on met le pied du tableau
</tr>
</tfoot>
<tbody>
<tr>
... c'est ici que l'on met la partie principale du tableau avec ses cellules
</tr>
</tbody>
</table>

A noter que <thead> et <tfoot> doivent être placées avant <tbody>.