Structurer le tableau

Jusqu'à présent, on a considéré un tableau comme une série de lignes, chacune constituées de cellules. Les deux seuls éléments structurels d'un tableau étaient donc les lignes et les cellules. Parmi les cellules, on distingue également les cellules de données (TD) des cellules d'entête (TH). On va maintenant s'intéresser à deux autres manières qui permettent de structurer l'information contenue dans le tableau. Il s'agit d'établir des regroupements de lignes et de colonnes.

Groupe de lignes

On peut organiser les lignes du tableau en groupes. On peut ainsi définir un groupe d'entête, un groupe de bas de tableau et plusieurs groupe de corps de tableau. Pour ce faire, on utilise les éléments THEAD, TFOOT et TBODY pour représenter ces groupes. Les balises fermantes sont optionnelles pour ces trois éléments.

Chacun des trois éléments THEAD, TFOOT et TBODY représente donc un groupe de lignes et il faut absolument retrouver au moins un élément TR dans chaque groupe. Il y a encore une autre contrainte, le groupe TFOOT, si vous en définissez un, doit être défini avant le premier TBODY même s'il apparait en dessous, et ce afin que le navigateur puisse déjà afficher l'entête et le pied de tableau même si tout le contenu n'a pas encore été chargé. Voici donc le code qui a permis de réaliser l'exemple de la figure 4.14 :

Si le tableau ne contient qu'un corps, on peut ne pas spécifier l'élément TBODY, c'est en effet ce qu'on a fait dans tous les exemples des sections précédentes. Les balises ouvrantes pour THEAD et TFOOT ne sont requises que lorsque les deux éléments sont présents en même temps. Ainsi, si on reprend un des tableaux de la section précédente, on aurait pu écrire :

On n'est donc pas obligé de préciser l'élément THEAD pour l'entête du tableau étant donné que ce tableau ne comporte pas de pied. Par contre, puisqu'on a une entête, on doit préciser où commence le corps avec TBODY. Enfin, chacune des sections doit bien entendu contenir le même nombre de colonnes pour que le tableau soit consistant.

Groupe de colonnes

On peut également définir des groupes de colonnes, pour par exemple appliquer un style à toutes les cellules d'une même colonne. On voudrait par exemple vouloir obtenir le tableau présenté sur la figure suivante :

Pour définir des colonnes, il faut utiliser les éléments COLGROUP et COL. Le premier élément permet de définir un groupe de colonnes. Une fois un tel groupe défini, on utiliser l'élément COL pour rassembler les colonnes et appliquer le style qu'on désire.

On commence donc par déclarer un nouveau groupe de colonnes avec l'élément COLGROUP. Ensuite, on déclare les colonnes avec l'élément COL. Pour le premier élément COL, on a spécifié une valeur de 2 à l'attribut span. Cet attribut permet de définir sur combien de colonnes s'étend l'élément.

Ensuite, on ajoute encore un élément COL et on défini l'attribut bgcolor pour donner une couleur de fond. Ce sera donc la troisième colonne qui sera affectée étant donné que le premier élément COL s'étend sur deux colonnes : les colonnes 1 et 2. Toutes les cellules de la troisième colonne auront donc un fond vert.

La balise fermante pour l'élément COLGROUP est optionnelle, mais est interdite pour l'élément COL qui est donc un élément orphelin. Ces éléments ne sont pas très bien supportés par les navigateurs courants. Pour la couleur de fond, seul Internet Explorer va l'interpréter. Par contre, l'attribut width est bien supporté.