Qu'est-ce qu'un tableau de données?

Un tableau de données permet de regrouper sous formes de lignes et de colonnes des informations tabulaires. On peut penser à une liste verticale possédant des informations complémentaires sur différents sujets. Exemple, la température de différentes villes (lignes ou listes de villes) pour plusieurs jours (colonnes). Le tableau permet de lire plus efficacement de l'informations. Dans un rapport technique, les tableaux doivent être accompagnés d'un texte explicatif. En d'autres mots, on devrait être capable de lire un document avec ou sans tableau et comprendre la nature du texte. Le tableau apporte de l'information complémentaire et plus précise.

Il faut éviter dans la mesure du possible d'utiliser les tableaux pour définir une apparence au texte. Règle générale, si vous n'utiliser aucune balise <th> ou <caption>, alors il est fort propable que vous ne devez pas utiliser un tableau.

Les tableaux en XHTML sont composés de nombreuses balises:

• <table> : définit un tableau dans le document
• <caption> : légende/titre du tableau
• <tbody> : regroupement de lignes des données
• <thead> : regroupement de lignes de l'entête du tableau
• <tfoot> : regroupement de lignes du pied du tableau
• <col> : définit une colonne
• <colgroup> : définit un regroupement de colonne
• <tr> : rangée ou ligne
• <th> : cellule d'entête
• <td> : cellule de données

<table>

La balise <table> </table> démarque la début et la fin de données organisées sous forme de tableau. Pour des raisons d'accessibilité, on peut mettre un sommaire ou une courte description de l'information dans le tableau dans l'attribut summary de la balise table.

<table summary="Température pour les grandes villes du Québec pour les 3 prochains jours">
 <caption>Météo de cette semaine</caption>
 <thead>
  <tr>
   <th scope="col">Ville</th>
   <th scope="col">Lundi</th>
   <th scope="col">Mardi</th>
   <th scope="col">Mercredi</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Montréal</th>
   <td>10 °C</td>
   <td>12 °C</td>
   <td>14 °C</td>
  </tr>
  <tr>
   <th scope="row">Québec</th>
   <td>8 °C</td>
   <td>10 °C</td>
   <td>11 °C</td>
  </tr>
  <tr>
   <th scope="row">Longueuil</th>
   <td colspan="3">Non disponible</td>
  </tr>
  <tr>
   <th scope="row">Laval</th>
   <td>7 °C</td>
   <td rowspan="2">10 °C</td<
   <td rowspan="2">12 °C</td<
  </tr>
  <tr>
   <th scope="row">Hull</th>
   <td>6 °C</td>
  </tr>
 </tbody>
</table>

Ce qui pourrait avoir un affichage comme ceci:

Présentation

Une balise <table> s'affiche comme un bloc car il y a un retour de ligne après. Cependant, la taille de la table, par défaut, est définie par la largeur et hauteur du contenu. La propriété d'affichage d'un tableau est display:table;. Il existe 6 attributs de présentations pour la balise table en XHTML 1.0 Strict. Chacun peut être remplacé par des propriétés ou des règles CSS. L'attribut width par width: largeur;, l'attribut border par border: largeur style couleur; ou border-width, border-style, border-color, l'attribut cellspacing par border-spacing: largeur;, l'attribut cellpadding par la règle td { padding: largeur;} et les attributs frame et rules par un ensemble de bordures.

<caption>

La balise <caption> permet de spécifier un titre, une explication courte ou une légende à notre tableau. On la place à l'intérieur de la balise table.

<tbody>

La balise <tbody> permet de regrouper un groupe de ligne (balise tr) qui contiennent des données semblables. On peut définir plusieurs sections tbody dans un document. La balise tbody doit se trouver à la suite des balises thead et tfoot.

<table>
 <thead><tr></tr></thead>
 <tfoot><tr></tr></tfoot>
 <tbody class="regroupement1"><tr></tr><tr></tr></tbody>
 <tbody class="regroupement2"><tr></tr><tr></tr></tbody>
 <tbody class="regroupement3"><tr></tr></tbody>
</table>

<thead>

La balise <thead> permet de regrouper un groupe de lignes qui représente l'entête d'un tableau. Un navigateur (comme Firefox) pourrait par exemple imprimer cette entête sur toutes les pages d'un long tableau. On doit absolument placer cette balise avant les sections tbody. De plus, il n'y a qu'une seule section thead possible dans un tableau.

<tfoot>

La balise <tfoot> permet de regrouper un groupe de lignes qui représente le pied de page (la fin) d'un tableau. Un navigateur (comme Firefox) pourrait par exemple imprimer cet fin de tableau sur toutes les pages d'un long tableau. On doit absolument placer cette balise avant les sections tbody. De plus, il n'y a qu'une seule section tfoot possible dans un tableau.

<col>

La balise <col> permet de regrouper et de modifier la présentation d'un groupe de colonne. On la place au début du tableau. Voici un exemple qui se rapporte au premier tableau défini pour la balise <table>.

<table>
 <col id="titreVille"/>
 <colgroup id="titreJour">
  <col id="lundi"/>
  <col id="mardi"/>
  <col id="mercredi"/>
 </colgroup>
</table>

On peut aussi définir des propriétés d'affichage pour plusieurs colonnes en utilisant l'attribut span="2" sur les balises col et colgroup.

<colgroup>

La balise <colgroup> permet un regroupement logique de balises <col>. Voir l'exemple de la balise <col>.

<tr>

La balise <tr> définie une rangée horizontale d'un tableau. On peut placer une balise <tr> à l'intérieur des balises table, thead, tbody et tfoot. À l'intérieur des balises <tr> on retrouve les balises <th> et <td> qui contiennent les données affichées.

<th>

Cellule contenant un texte qui représente une entête vertical (scope="row") ou horizontal (scope="col"). Une cellule <th> peut être fusionnée comme une balise <td>.

Présentation par défaut

Les navigateurs affichent le contenu de cette balise en gras et centré habituellement.

<td>

Cellule contenant une donnée. Cette cellule peut être fusionnée sur plusieurs rangées (rowspan="nombreRangée") ou sur plusieurs colonnes (colspan="nombreColonne").

On peut spécifier le nombre 0 dans les rowspan et colspan. Dans ce cas, la cellule sera fusionnée automatiquement avec l'espace restante dans le tableau (phénomène du auto-spanning). Ce comportement ne fonctionne pas dans tous les navigateurs.

Présentation par défaut

Les navigateurs affichent le contenu de cette balise à gauche et centré verticalement habituellement. Même les blocs sont centrés horizontalement et verticalement avec les propriétés text-align:center et vertical-align:middle;. Ce comportement est spécifique aux cellules de tableau.