Vous lisez : 8 Tableaux
Partie Précédente : 7 Formulaires de Saisie
Partie Suivante : 9 Feuilles de Style
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 :
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 :
- des cases de tableau peuvent être vides
- la définition ne doit pas provoquer de chevauchement de cases
- des tableaux peuvent être imbriqués
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.