Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Regroupement de lignes avec les balises : thead, tbody et tfoot

Regroupement de lignes avec les balises : thead, tbody et tfoot

Eh oui ! Le W3C a aussi songé à développer une syntaxe particulière qui sera adaptée aux longs tableaux, pour rendre leur lecture plus aisée et leur impression plus réussie.

Introduction aux balises : thead, tfoot et tbody

Lorsque vous entendez créer un long tableau, vous feriez mieux de le scinder en trois grandes parties :

tableaux Faites très attention, car ces trois balises doivent être introduites dans l'ordre suivant :

  1. <thead> ;
  2. <tfoot> ;
  3. <tbody>.

Même si cela va à l'encontre de l'esprit humain. L'élément 'tfoot' doit apparaître avant l'élément tbody. Cela va permettre aux agents utilisateurs de restituer le pied avant de recevoir toutes les rangées de données qui sont généralement nombreuses. Ce qui est de nature à améliorer l'affichage préliminaire des tableaux.

Les éléments thead et tfoot ne peuvent être placés qu'une fois dans un tableau, contrairement à l'élément tbody qui peut être spécifié une ou plusieurs fois. Si les éléments thead (en-tête) et tfoot (pied) font défaut, l'utilisation de l'élément tbody ne se justifie plus, même si cela est valable en termes de standards W3C.

Généralement l'en-tête 'thead' est dupliqué dans le pied du tableau, pour permettre aux lecteurs la possibilité de consulter l'en-tête du tableau sans avoir à défiler la page vers le haut. En fin du compte, ceci est motivé par des raisons d'accessibilité. Mais rien ne vous empêche à passer un en-tête et un footer différents, dans certaines situations comme la suivante :

Exemple d'un tableau divisé en en-tête, corps et pied

tableaux avec les balises XHTML : thead, tfoot et tbody

Le code XHTML

<table>
 <thead><!--début de l'en-tête du tableau -->
  <tr>
   <th>Entreprises</th>
   <th>CA en €</th>
  </tr>
 </thead>
 <tfoot><!--début du pied du tableau -->
  <tr>
   <th>Total</th>
   <th>75</th>
  </tr>
 </tfoot>
 <tbody><!--début du corps du tableau -->
  <tr>
   <td>Microsoft</td>
   <td>30</td>
  </tr>
  <tr>
   <td>Nokia</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Sony</td>
   <td>25</td>
  </tr>
 </tbody>
</table>
Notez que vous pouvez implémenter vos cases dans l'en-tête et le flotter soit avec la balise 'td' ou 'th', mais pas dans le corps du tableau pour des raisons de respect de la sémantique. Car le corps n'est pas sensé comporter des en-têtes. Encore une chose très importante : j'ai mis n'importe quoi dans l'exemple ci-dessus, et je parie que vous l'avez deviné vous-mêmes tableaux

Règles d'imbrication propres aux balises thead, tfoot et tbody

Les éléments thead, tfoot et tbody ne peuvent être imbriqués que dans la balise 'table', et doivent contenir au moins un élément 'tr' :

<!ELEMENT thead    (tr)+>
<!ELEMENT tfoot    (tr)+>
<!ELEMENT tbody    (tr)+>

Un tableau peut comporter optionnellement un seul élément thead ou tfoot. Par contre il peut comprendre un ou plusieurs éléments tbody.

Intérêt et utilité des balises thead, tfoot et tbody

Selon le W3C un long tableau peut être divisé en des sections : une pour l'en-tête de la table, une pour le pied de la table, et une ou plusieurs sections pour le corps de la table. Les agents utilisateurs peuvent profiter de cette structuration pour faire défiler le corps du tableau, l'en-tête et le pied de la table étant figés. Une idée très brillante de la part du W3C, mais pas supportée par tous les navigateurs de la génération actuelle.

En cas d'impression d'un long tableau qui occupe plusieurs pages. Un navigateur peut dupliquer l'en-tête et le footer du tableau sur chaque page imprimée, abstraction faite de ce qui apparaît sur l'écran.

La structuration des tableaux permet de réaliser des habillages plus intéressants et plus cohérents, en combinant des styles CSS aux différentes sections du tableau. En plus grâce au phénomène d'héritage CSS, vous pouvez créer une syntaxe CSS plus raccourcie et plus lisible. En fait les styles définis aux éléments tbody, tfoot et thead seront transmis automatiquement aux enfants : 'tr' et 'td'.

Les balises thead, tfoot et tbody peuvent aussi améliorer l'accessibilité de la page, en permettant aux navigateurs non graphiques tels que les lecteurs d'écran et les navigateurs texte-seul de restituer les tableaux d'une manière plus facile à lire ou à entendre. Car les navigateurs n'auront pas de problèmes à appréhender facilement la structure du tableau et les relations logiques qui existent entre ses sections.

Dans le chapitre suivant, on va apprendre à fusionner des cellules de tableaux avec les attributs colspan et rowspan.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau