Auteur: Jérôme Forget. Publié le 3 janvier 2007.
Les tableaux ont été largement surexploités dans les premières années du Web par des designers qui les utilisaient pour créer des mises en page statiques à l'aide d'une grille de colonnes et de lignes. En XHTML, l'utilisation d'une balise pour modifier la présentation d'un élément de contenu, comme ces tableaux qui servaient à maintenir en place une série d'images, est fortement déconseillée.
L'usage des tableaux n'est cependant pas aboli. Les tableaux demeurent nécessaires afin de présenter des données en tableaux, comme une grille de données statistiques ou un carnet de numéros de téléphone. Pour rendre les tableaux de données aussi accessibles que possible, il est important de connaître et d'utiliser les différents composants des tableaux, comme les titres de colonnes (<th>), les résumés (avec l'attribut summary) et les légendes (<caption>).
Le tableau commence d'abord par la balise <table>. Cette balise représente le bloc conteneur de tous les éléments du tableau.
La balise <tr> permet de définir une ligne du tableau. Cet élément se trouve aussi à être le bloc conteneur de deux autres éléments : <th> et <td>. La balise <th> permet de définir le titre d'une colonne du tableau. La balise <td> représente une cellule du tableau, celle qui contient les données elles-mêmes. Un tableau simple avec deux colonnes sera ainsi codé en XHTML :
<table>
<tr>
<th>Colonne 1</th><th>Colonne 2</th>
</tr>
<tr>
<td>Donnée 1</td><td>Donnée 2</td>
</tr>
</table>
Un résumé au tableau - un titre si vous voulez - sera ajouté en utilisant l'attribut summary de la balise <table>. Cet attribut pourra être rendu sur des navigateurs Web non-visuel, comme des synthétiseurs vocaux pour les malvoyants.
Pour inscrire une légende qui sera affiché au sommet du tableau, utilisez la balise <caption>.
Pour définir des sections à un tableau, il existe les balises <thead>, <tbody> et <tfoot>, qui permettent de définir respectivement les sections d'en-tête, de corps du tableau, et de pied du tableau.
L'exemple suivant utilise un résumé, une légende, ainsi que des titres horizontaux et verticaux. Expérimentez avec ce modèle pour rajouter des lignes ou des colonnes à ce tableau plus complexe.
<table class="example" summary="Ce tableau montre
l'augmentation de la population annuelle en Suède de
1999 à 2003.">
<caption>Augmentation de la population en Suède,
1999–2003</caption>
<tbody>
<tr>
<td> </td>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
</tr>
<tr>
<th>Population</th>
<td scope="row">8 861 426</td>
<td scope="row">8 882 792</td>
<td scope="row">8 909 128</td>
<td scope="row">8 940 788</td>
<td scope="row">8 975 670</td>
</tr>
<tr>
<th>Augmentation</th>
<td scope="row">7 104</td>
<td scope="row">21 366</td>
<td scope="row">26 368</td>
<td scope="row">31 884</td>
<td scope="row">34 882</td>
</tr>
</tbody>
</table>