Sur cette page :

1. Les tableaux
   1. L’élément <table>
   2. La ligne <tr>
   3. La cellule <td>
   4. En-tête de tableau <thead>, Corps <tbody>, et pied de tableau <tfoot>
   5. Fusion de cellules colspan et rowspan
   6. Titre de tableau <caption>
   7. Accessibilité des tableaux

9.1# L’élément <table>

Un tableau est constitué d’un ensemble de balises regroupées dans un élément <table></table>. Celui-ci ne possède normalement que très peu d’attributs.

Un élément <table> n’est ni un bloc, ni un élément en-ligne, il possède en fait sa propre catégorie table puisqu’il possède son propre mécanisme de mise en forme.

9.2# La ligne <tr>

Les cellules d’un tableau sont insérées dans une ligne (row en anglais), représenté par l’élément <tr></tr>.

Tout comme son parent, un élément <tr> possède sa propre catégorie table-row.

9.3# La cellule <td>

Une cellule est insérée avec l’élément <td></td>. Il est possible de mettre tout type de contenu désiré dans une cellule, un paragraphe ou un second tableau par exemple.

La catégorie d’une cellule est table-cell.

Vous connaissez maintenant les trois éléments de base permettant de constituer un tableau :

<table>
  <tr>
    <td>Ligne 1, Cellule 1</td>
    <td>Ligne 1, Cellule 2</td>
  </tr>
  <tr>
    <td>Ligne 2, Cellule 1</td>
    <td>Ligne 2, Cellule 2</td>
  </tr>
</table>

Qui donne à l’écran :

Attention cependant, ici, la mise en forme a été modifiée à l’aide des feuilles de style. Soyez vigilant, tous les navigateurs n’affichent pas les tableaux de la même manière par défaut.

9.4# En-tête de tableau <thead>, Corps <tbody>, et pied de tableau <tfoot>

Un tableau contient généralement une ligne d’en-tête, et donc, un corps. Parfois, le tableau contient aussi une ligne qui constitue le pied.

Pour indiquer quelle(s) ligne(s) constitue(nt) l’en-tête, il faut les inclure dans un élément <thead></thead>. Vous l’aurez deviné, le corps du tableau est placé dans un élément <tbody></tbody>, et le pied est placé dans un élément <tfoot></tfoot>.

Les cellules d’en-tête ne seront alors plus <td> mais <th>. Vous pouvez également utiliser <th> pour l’entête d’une ligne.

Voici un exemple de tableau utilisant ces balises :

<table>
  <thead>
  <tr>
    <th>Produit</th>
    <th>Prix</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Produit 1</td>
    <td>10 €</td>
  </tr>
  <tr>
    <td>Produit 2</td>
    <td>20 €</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Total</td>
    <td>30 €</td>
  </tr>
  </tfoot>
</table>

Ce qui donne :

9.5# Fusion de cellules colspan et rowspan

Dans certains cas, certaines cellules peuvent être fusionnées, en ligne ou en largeur. Pour indiquer qu’une cellule occupera la place de la suivante, il faudra utiliser l’attribut colspan="2". De même, pour qu’une cellule occupe la place des deux cellules du dessous, on utilisera rowspan="3".

<table>
  <thead>
  <tr>
    <th>(1, 1)</th>
    <th>(1, 2)</th>
    <th>(1, 3)</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">(2 et 3, 1)</td>
    <td>(2, 2)</td>
    <td>(2, 3)</td>
  </tr>
  <tr>
    <td>(3, 2)</td>
    <td>(3, 3)</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="3">(3, 1/2/3)</td>
  </tr>
  </tfoot>
</table>

9.6# Titre de tableau <caption>

Il est également possible de donner un titre à votre tableau, qui sera placé au dessus à l’aide de l’élément <caption></caption>, placé juste après la balise d’ouverture de <table>.

<table>
  <caption>Un petit tableau</caption>
  <tbody>
  <tr>
    <td>Cellule n°1</td>
    <td>Cellule n°2</td>
    <td>Cellule n°3</td>
  </tr>
  </tbody>
</table>

Et le résultat :

9.7# Accessibilité des tableaux

Les tableaux ne sont pas bien difficile à implémenter en HTML, mais ils ont deux lourds inconvénients : le code est verbeux (il faut écrire beaucoup), et un tableau n’est pas facilement accessible (pour un non voyant, pour un moteur de recherche, etc). Il existe des solutions pour le deuxième problème, mais qui rendront le code encore plus verbeux. Ceci dit, à mon sens, il est plus important d’être vigilant à l’accessibilité d’une page que son poid, qui peut être optimisé autrement.

Vous marquerez un premier point en indiquant un résumé des informations qu’offre le tableau dans la balise <table>.

<table summary="résumé du tableau pour les non voyants">

En indiquant un identifiant unique (à laide de l’attribut id) pour chacune des cellules d’en-tête, vous pourrez indiquer dans chaque cellule une référence à celles-ci à l’aide de l’attribut headers. On peut indiquer plusieurs identifiants pour chaque cellule, en les séparant par des espaces.

Pour aller au bout de la démarche, vous pouvez ajouter l’attribut abbr pour proposer une valeur plus courte pour chaque cellule d’en-tête. Ainsi, la lecture du tableau sera plus agréable pour un utilisateur utilisant un lecteur vocal.

<table>
  <caption>Tableau comparant deux formats d'écran d'ordinateurs portables</caption>
  <thead>
  <tr>
    <td> </td>
    <th id="ecran_154" abbr="écran 15 pouces 4">écran d'ordinateur portable 16/9, 15,4 pouces</th>
    <th id="ecran_17" abbr="écran 17 pouces">écran d'ordinateur portable 16/9, 17 pouces</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th id="usage" abbr="usage">Usage de ce format d'écran</th>
    <td headers="ecran_154 usage">
      Pour un peu tout, permet de garder un ordinateur portable relativement mobile
    </td>
    <td headers="ecran_17 usage">
      Idéal pour regarder des films
    </td>
  </tr>
  <tr>
    <th id="inconvenients" abbr="inconvenients">Inconvenients de ces écrans</th>
    <td id="ecran_154 inconvenients">
      Parfois un peu petit quand la résolution est limitée à 1280*800px
    </td>
    <td id="ecran_17 inconvenients">
      Consomme plus de batterie, donc nécessite une bonne baterie, en plus, l'orinateur sera plus lourd
    </td>
  </tr>
  </tbody>
</table>

En observant ce tableau, les modifications apportées n’ont pas d’influence à l’écran. Mais pour un lecteur d’écran (tel qu’un synthétiseur vocal) ou un robot de référencement, ces informations peuvent être précieuses pour comprendre le sens des données présentées.