7.1 Syntaxe de base
Un tableau est défini par les balises
<TABLE> et </TABLE>.
Un tableau est constitué de lignes, chacune
étant définie par les balises <TR> et
</TR>.
Une ligne est constituée de cellules, chacune
étant définie par les balises <TD> et
</TD>.
Il n'y a pas de notion de colonne. Une colonne est
définie de manière implicite par la superposition des cases
correspondantes dans chaque ligne.
Ainsi ce code :
<TABLE>
<TR>
<TD>aaa aaa<BR>aaa aaa aaa<BR>aaa aaa</TD>
<TD>bbb bbb bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<TD>ddd</TD>
<TD>eee eee</TD>
<TD>fff fff fff</TD>
</TR>
</TABLE>
produira ce résultat :
On peut remarquer que le résultat ci-dessus ne correspond pas
forcément à ce qu'on nomme communément tableau.
Il n'y a par exemple pas de bords...
Le tableau de base n'est qu'une série de cellules, arrangées selon une
grille (qui n'est pas visualisée) et dont les contenus sont alignés à
gauche dans les cellules.
7.2 Améliorations
Les balises <TABLE>, <TR> et
<TD> peuvent contenir des attributs qui en modifient
le comportement.
Ainsi on peut :
-
mettre un bord : avec
« BORDER="xxx" », utilisable dans
<TABLE>.
xxx désigne alors un entier représentant l'épaisseur du
bord.
- changer la couleur du fond : avec
« BGCOLOR="xxx" », utilisable dans
<TABLE>, <TR>,
<TD>.
xxx désigne alors une couleur.
Les éléments pour lesquels aucune couleur n'est définie sont
supposés transparents.
Pour obtenir la couleur qu'aura finalement une case, il faut la voir
comme un empilement de :
-
la page en bas,
- le tableau,
- la ligne,
- et la case en haut.
Le plus haut placé de ces éléments qui possède une couleur la
donnera à la cellule.
- changer l'alignement horizontal du texte dans une
case : avec « ALIGN="xxx" », utilisable dans
<TD>.
xxx est une des valeurs left, right et
center.
- changer l'alignement vertical des cases dans une
ligne : avec « VALIGN="xxx" », utilisable
dans <TR>.
xxx est une des valeurs top, bottom et
middle.
- changer l'alignement du tableau sur sa ligne : avec
« ALIGN="xxx" », utilisable dans
<TABLE>.
xxx est une des valeurs left, right et
center.
- imposer une largeur : avec
« WIDTH="xxx" », utilisable dans
<TABLE>, <TD>.
xxx est un pourcentage de la taille de l'écran si
l'attribut est appliqué à <TABLE>, tandis qu'il
s'agit d'un pourcentage de la largeur du tableau quand il est
appliqué à <TD>.
- faire déborder une cellule sur plusieurs colonnes :
avec « COLSPAN="xxx" », utilisable dans
<TD>.
xxx désigne alors un entier représentant le nombre de
colonnes occupées par la cellule
- faire déborder une cellule sur plusieurs lignes : avec
« ROWSSPAN="xxx" », utilisable dans
<TD>.
xxx désigne alors un entier représentant le nombre de
lignes occupées par la cellule
7.3 Un exemple
Ce tableau, qui est celui vu plus haut qu'on a modifié avec quelques
uns des attributs que nous venons de voir, s'obtient par :
<TABLE WIDTH="75%" BGCOLOR="yellow" BORDER="6" ALIGN="center">
<TR VALIGN="top">
<TD BGCOLOR="pink" ALIGN="right">aaa aaa<BR>aaa aaa aaa<BR>aaa aaa</TD>
<TD WIDTH="50%">bbb bbb bbb</TD>
<TD>ccc</TD>
</TR>
<TR BGCOLOR="lightgray">
<TD ALIGN="center">ddd</TD>
<TD BGCOLOR="pink">eee eee</TD>
<TD>fff fff fff</TD>
</TR>
</TABLE>
7.4 Une cellule particulière
On peut remplacer les balises <TD> et
</TD> par <TH> et
</TH>.
Ce qui change : le texte est automatiquement centré dans
la cellule (au lieu d'etre aligné à gauche) et mis en gras.
Ce qui ne change pas : tout le reste...
