L’utilisation d’un tableau est parfois indispensable pour présenter des informations, qui sont reliées entre elles. Ils sont visibles sur les sites internet et sont enregistrés dans la structure HTML. Veillez à employer les éléments HTML adéquats.

Ceci a une double utilité :

  1. Cette disposition est essentielle pour les visiteurs qui ont besoin d’une technologie d’assistance
  2. Les informations reprises dans le tableau, ainsi que la forme s’adaptent à tout type de support (ordinateur, tablette, smartphone)

Image du code HTML correct pour les tableaux

Comment vous y prendre ?

Les tableaux se composent de lignes (horizontales) et de colonnes (verticales). Une de leurs caractéristiques est que les données qui s’y trouvent sont reliées entre elles aussi bien horizontalement que verticalement. Ces liens apparaissent souvent clairement à ceux qui peuvent voir le tableau et ce, grâce à sa structure en lignes et en colonnes.

Les liens doivent aussi être présents quand le tableau est présenté d’une autre manière au visiteur. Pour y parvenir, utilisez les éléments HTML adéquats quand vous créez votre tableau.

  • de l’élément <table> pour tout le tableau ;
  • de l’élément <th> pour les en-têtes de lignes et de colonnes ;
  • de l’élément <tr> pour les lignes ;
  • de l’élément <td> pour les champs individuels.

Parfois, l’éditeur contient un bouton pour créer un tableau.

Exemples

L’exemple suivant montre un tableau simple avec un planning de la semaine. Les jours de la semaine se trouvent dans la première ligne du tableau. Comme ce sont des en-têtes de colonnes, ils sont repris dans des éléments <th>.

Les lignes en dessous indiquent des moments de la journée. Vu que ce sont des en-têtes de lignes, ils sont aussi dans des éléments <th>.

Les autres champs (éléments <td>) contiennent les rendez-vous. S’il n’y a pas de rendez-vous à un jour et une heure précis, l’élément <td> est vide.

  Lundi Mardi Mercredi Jeudi Vendredi
8:00 - 9:00 Réunion        
9:00 - 10:00     Rendez-vous médecin   Départ pour Londres

Les utilisateurs d’un lecteur d’écran doivent lire le tableau ligne par ligne. Ils peuvent se déplacer dans le tableau avec le clavier. Chaque fois qu’ils sont dans un champ, l’information qui s’y trouve leur est lue. Comme l’on a utilisé les bons éléments HTML, le lecteur d’écran leur lit aussi le(s) bon(s) en-tête(s) en même temps. Le visiteur n’entend donc pas que le rendez-vous en question, mais il a aussi le jour et l’heure correspondants. Cela rend le tableau plus compréhensible et plus utile.

<table>
<tr>
<td> </td>
<th scope="col">Lundi</th>
<th scope="col">Mardi</th>
<th scope="col">Mercredi</th>
<th scope="col">Jeudi</th>
<th scope="col">Vendredi</th>
</tr>
<tr>
<th scope="row">8h00-9h00</th>
<td>Réunion</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">9h00-10h00</th>
<td> </td>
<td> </td>
<td>Rendez-vous médecin</td>
<td> </td>
<td>Départ pour Londres</td>
</tr>
</table>

Pour les redacteurs

Lorsqu’un rédacteur crée lui-même un tableau dans le code HTML, il est responsable de la structure logique et de l’utilisation correcte des différents éléments HTML.

Pour les développeurs

Le développeur est responsable de la possibilité de créer des tableaux HTML corrects avec le CMS.