8 Tableaux

La création de tableaux est une possibilité offerte depuis HTML 3.2. Cette fonctionnalité est souvent détournée de son but premier par les auteurs car elle leur permet d'avoir une maîtrise beaucoup plus grande sur l'aspect final de leur document à travers la possibilité d'aligner et de contrôler la disposition des différents constituants de la page. Cette attitude va à l'encontre de la philosophie SGML et il faut toujours préférer les solutions utilisant les feuilles de style pour contrôler la mise en page.

8.1 Structure des tableaux

Un tableau HTML est composé de cellules organisées en rangées et colonnes. L'élément TABLE définit le tableau. A l'intérieur de cet élément, une succession d'éléments TR (Table Row) définit les rangées, elles-mêmes composées d'éléments TD et TH définissant les cellules proprement dites. TD (Table Data) définit une cellule simple alors que TH (Table Heading) définit une cellule de titre pour la ligne et/ou la colonne où elle apparaît. Un tableau simple a la structure suivante : 

...
<TABLE>
    <CAPTION>Titre du Tableau</CAPTION>
    <TR>
      <TH>Titre Colonne 1
      <TH>Titre Colonne 2
      <TH>Titre Colonne 3
    </TR>
    <TR>
      <TD>Objet 1
      <TD>Objet 2
      <TD>Objet 3
    </TR>
</TABLE>
...

Un tel tableau est représenté de la façon suivante :
Titre du Tableau
Titre Colonne 1 Titre Colonne 2 Titre Colonne 3
Objet 1 Objet 2 Objet 3

Tableau 16 : Tableaux (TABLE, CAPTION)
<TABLE> Un tableau.
  SUMMARY Résumé du contenu du tableau
WIDTH La largeur du tableau. Deux types de valeurs sont possibles: mesure absolue en pixels (ex : WIDTH="200") ou proportionnelle en pourcentage (ex : WIDTH="50%").
COLS Le nombre de colonnes du tableau. Il est préférable d'utiliser les éléments COLGROUP et COL pour indiquer cette information (voir § 8.2)
BORDER Largeur en pixels de la bordure à dessiner autour du tableau. Par défaut un tableau n'a pas de bordure.
FRAME Spécifie quelles portions du cadre entourant le tableau seront visibles : void (aucun cadre), above (le haut), below (le bas), hsides (le haut et le bas), vsides (le côtés droit et gauche), lhs (le côté gauche), rhs, (le côté droit), box ou border (les quatre côtés).
RULES Spécifie quelles droites de séparation intérieures il faut tracer : none (aucune), groups (entre les groupes de rangées et de colonnes), rows (entre les rangées), cols (entre les colonnes), all (entre rangées et colonnes).
CELLSPACING L'espace laissé entre les différentes cases.
CELLPADDING L'espace laissé entre le bord de chaque case et le contenu.
Contient Dans cet ordre : CAPTION (optionnel) puis COL et COLGROUP (optionnel) puis THEAD (optionnel) puis TFOOT (optionnel) puis TBODY (implicite)
<CAPTION> Un titre de tableau.
  ALIGN (DECONS.) Position du titre. Valeurs possibles: TOP et BOTTOM pour placer le titre en haut ou en bas du tableau.

8.2 Groupements de colonnes et rangées

Les éléments COL et COLGROUP permettent de grouper des colonnes de façon à ajouter une information sur la structure du tableau et pouvoir modifier des attributs de présentation sur un groupe de colonnes. Leur utilisation au début de la définition de la table donne également suffisamment d'information au visualiseur pour lui permettre d'afficher le tableau de façon incrémentale au fur et à mesure qu'il reçoit les rangées depuis le serveur. Sans cette information, le visualiseur est obligé d'attendre la réception de l'intégralité du tableau pour pouvoir le mettre en page. Par exemple : 

<TABLE>
  <COLGROUP>
    <COL width="30">
    <COL width="0*">
    <COL width="1*">
  <COLGROUP align="center">
    <COL width="2*">
    <COL width="1*" align="char" char=":">
  <TR>
  ...
</TABLE>

Ceci définit une table comportant 5 colonnes réparties en deux groupes. Les cellules du deuxième groupe sont centrées. La 5ème colonne surcharge cet attribut par un alignement des cellules sur le caractère `:'. La première colonne occupe une largeur fixes de 30 pixels. La deuxième colonne est dimensionnée selon le minimum nécessaire à la plus large de ses cellules. L'espace restant est réparti entre les 3 colonnes restantes à raison de 1/4, 2/4, 1/4.

Les éléments THEAD, TFOOT et TBODY regroupent des rangées du tableau en groupes de d'en-tête, de pied et de corps du tableau. Cette information ajoute à la description structurelle du tableau. Elle peut être utilisée pour fixer les attributs de mise en page sur un groupe de rangées. Dans le cas d'un tableau occupant plusieurs pages, les groupes d'en-tête et de pied peuvent être repris sur chacune des pages. 

<TABLE>
  <THEAD>
    <TR> ...En-tête...
  </THEAD>
  <TFOOT>
    <TR> ...Pied de tableau...
  </TFOOT>
  <TBODY>
    <TR> ...Première rangée du premier bloc...
    <TR> ...Deuxième rangée du premier bloc...
  </TBODY>
  <TBODY>
    <TR> ...Première rangée du deuxièmebloc...
    <TR> ...Deuxième rangée du deuxième bloc...
    <TR> ...Troisième rangée du deuxième bloc...
  </TBODY>
</TABLE>

Tableau 17 : Groupements de cellules (COL, COLGROUP, THEAD, TFOOT, TBODY)
<COLGROUP> Un groupe de colonnes.
  SPAN Nombre de colonnes du groupe
WIDTH La largeur du tableau. Trois types de valeurs sont possibles: mesure absolue en pixels (ex : width="200"), proportionnelle en pourcentage (ex : width="50%") ou relative à l'espace restant (ex .width="3*" correspond à 3 nièmes de l'espace restant où n est la somme de toutes les spécifications relatives)
ALIGN Alignement horizontal des cellules des colonnes du groupe : left (marge gauche), center (centré), right (marge droite), justify (justifié), char (par rapport à un caractère donné).
VALIGN Alignement vertical des cellules des colonnes du groupe :top (haut), middle (centrage vertical), bottom (bas), base (alignement de la ligne de base de la première ligne de texte de toutes les cellules comportant cette valeur d'attribut).
CHAR Caractère sur lequel aligner si align="char".
Contient COL
<COL> Une déclaration de colonne (cet élément ne crée pas de colonne, il sert juste de déclaration pour des colonnes qui doivent être crées au moyen de TD et/ou TH). Accepte les mêmes attributs que COLGROUP.
<THEAD> <TFOOT> <TBODY> Un groupe de rangées (resp. d'en-tête, de pied et de corps du tableau)
  ALIGN Alignement horizontal des cellules des rangées du groupe (voir le même attribut de l'élément COLGROUP).
VALIGN Alignement vertical des cellules des rangées du groupe (voir le même attribut de l'élément COLGROUP).
CHAR Caractère sur lequel aligner si align="char".

Note. L'élément TFOOT, s'il est présent, doit intervenir avant le premier élément TBODY de manière à ce que le visualiseur dispose de l'information d'en-tête et de pied de tableau avant la réception du corps.

8.3 Tableaux complexes

Un certain nombre d'attributs permettent de contrôler plus avant l'aspect du tableau. En particulier, les attributs rowspan et colspan des éléments TH et TD permettent de créer des tableaux plus complexes en spécifiant des cases qui s'étendent sur plusieurs rangées ou colonnes. 

...
<TABLE>
    <TR>
      <TH ROWSPAN="2">Végétaux
        <TD>Fruits
    </TR>
    <TR>
      <TD>Fleurs </TD>
    </TR>
</TABLE>
...

est représenté de la façon suivante :
Végétaux Fruits
Fleurs

On note que `Végétaux', bien qu'occupant deux lignes ne doit apparaître, dans le code HTML, que dans la définition de la première ligne. Des exemples de définition de tableaux complexes sont donnés en Annexe B-4.

Plusieurs points importants :

Tableau 18 : Tableaux : Rangées et colonnes (TR, TD, TH)
<TR> Une rangée dans un tableau.
  WIDTH La largeur du tableau. (voir le même attribut de l'élément COLGROUP, Tableau 17)
ALIGN Alignement horizontal des cellules des colonnes du groupe  (voir le même attribut de l'élément COLGROUP, Tableau 17)
VALIGN Alignement vertical des cellules des colonnes du groupe  (voir le même attribut de l'élément COLGROUP, Tableau 17)
CHAR Caractère sur lequel aligner si align="char".
Contient TD et TH
<TD> <TH> Une case dans un tableau (resp. normale ou de titre).
  COLSPAN Nombre de colonnes sur lequel s'étend cette case.
ROWSPAN Nombre de rangées sur lequel s'étend cette case.
ALIGN Alignement horizontal de la cellule  (voir le même attribut de l'élément COLGROUP, Tableau 17)
VALIGN Alignement vertical de la cellule  (voir le même attribut de l'élément COLGROUP, Tableau 17)
CHAR Caractère sur lequel aligner si align="char".
SCOPE Indique les cellules concernées par le titre dans le cas d'un élément TH. Les valeurs possibles sont : row (les cellule du reste de la rangée), col (les cellules du reste de la colonne), rowgroup (les cellules du même groupe de rangées), colgroup (les cellules du même groupe de colonnes).
NOWRAP (DECONS.) Ne pas couper les lignes automatiquement à l'intérieur de cette case.
WIDTH (DECONS.) La largeur de la case. Absolue en nombre de pixels (ex: WIDTH="200") ou en pourcentage de la largeur totale du tableau (ex: WIDTH="50%").
BGCOLOR (DECONS.) Une couleur de fond à utiliser dans cette case du tableau. Cette couleur est héritée par un éventuel tableau imbriqué dans cette case.
Contient Tout élément autorisé dans l'élément BODY y compris TABLE

Copyright ©1996,1998 EPFL/DI-LSP.