Un tableau structuré

Nous avons appris à construire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de réaliser des tableaux plus… complexes.

Nous allons découvrir deux techniques particulières :

• Pour les gros tableaux, il est possible de les diviser en trois parties :

• En-tête ;
• Corps du tableau ;
• Pied de tableau.

• Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.

Diviser un gros tableau

Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de définir les trois « zones » du tableau :

• l'en-tête (en haut) : il se définit avec les balises <thead></thead> ;
• le corps (au centre) : il se définit avec les balises <tbody></tbody> ;
• le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.

Que mettre dans le pied de tableau ? Généralement, si c'est un long tableau, vous y recopiez les cellules d'en-tête. Cela permet de voir, même en bas du tableau, à quoi se rapporte chacune des colonnes. Schématiquement, un tableau en trois parties se découpe donc comme illustré à la figure suivante.

Un tableau découpé en plusieurs parties

C'est un peu déroutant mais il est conseillé d'écrire les balises dans l'ordre suivant :

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

Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (<tbody>). Le navigateur se chargera d'afficher chaque élément au bon endroit, ne vous inquiétez pas.

Voici donc le code à écrire pour construire le tableau en trois parties :

Il n'est pas obligatoire d'utiliser ces trois balises (<thead>, <tbody>, <tfoot>) dans tous les tableaux. En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement. 
Pour les « petits » tableaux, vous pouvez garder sans problème l'organisation plus simple que nous avons vue au début. Pensez quand même aux robots qui ont besoin de savoir....

3, 2, 1… Fusioooon !

Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles.
Un exemple de fusion ? Regardez le tableau à la figure suivante, qui dresse une liste de films et indique à qui ils s'adressent.

Un tableau contenant des titres de films et leur public

Pour le dernier film, vous voyez que les cellules ont été fusionnées : elles ne font plus qu'une. C'est exactement l'effet qu'on cherche à obtenir.

Pour effectuer une fusion, on rajoute un attribut à la balise <td>. Il faut savoir qu'il existe deux types de fusion :

• La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'effectue horizontalement.

On utilisera l'attribut colspan.

• La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.

On utilisera l'attribut rowspan.

Comme vous le savez, vous devez donner une valeur à l'attribut (que ce soit colspan ou rowspan). Il faut indiquer le nombre de cellules à fusionner entre elles. Dans notre exemple, nous avons fusionné deux cellules : celle de la colonne « Pour enfants ? » et celle de « Pour adolescents ? ». On devra donc écrire :

… qui signifie : « Cette cellule est la fusion de deux cellules ». Il est possible de fusionner plus de cellules à la fois (trois, quatre, cinq… autant que vous voulez).

Voilà le code HTML qui me permet de réaliser la fusion correspondant au tableau précédent :

Une remarque importante : vous voyez que la ligne 19 ne contient que deux cellules au lieu de trois (il n'y a que deux balises <td>). C'est tout à fait normal car j'ai fusionné les deux dernières cellules entre elles. Le <td colspan="2"> indique que cette cellule prend la place de deux cellules à la fois.

Et pour la fusion verticale avec rowspan, on fait comment ?

Cela se complique un petit peu. Pour notre exemple, nous allons « inverser » l'ordre de notre tableau : au lieu de mettre les titres de films à gauche, on va les placer en haut.
C'est une autre façon de voir le tableau : au lieu de le construire en hauteur, on peut le construire en longueur.

Dans ce cas, le colspan n'est plus adapté, c'est un rowspan qu'il faut utiliser :

Résultat : les cellules sont fusionnées verticalement (figure suivante) !

Les cellules ont été fusionnées verticalement

Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété vertical-align que nous avons découverte dans le chapitre sur la mise en page.

En résumé

• Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr>.
• Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).
• Le titre du tableau se définit avec <caption>.
• On peut ajouter une bordure aux cellules du tableau avec border. Pour fusionner les bordures, on utilise la propriété CSS border-collapse.
• Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot>(bas du tableau). L'utilisation de ces balises n'est pas obligatoire.
• On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

Créé avec HelpNDoc Personal Edition: Outils facile d'utilisation pour créer des aides HTML et des sites web