Cours HTML : les tableaux

Nous abordons ici la partie la plus délicate mais aussi la plus intéressante du point de vue de la présentation. Les tableaux permettent des possibilités d'alignement que les autres éléments du Html n'autorisent pas.

Balises de base

Définition du tableau	[Table]	<TABLE></TABLE>	Début et fin de tableau
Définition d'une ligne	[Table Row]	<TR></TR>	Début et fin de ligne
Définition d'une cellule	[Table Data]	<TD></TD>	Début et fin de cellule

Le marqueur <TABLE> initialise le tableau. Il possède tout un tas de paramètres qui peuvent donner ses caractéristiques. Par exemple, ici BORDER donne l'épaisseur du bord des cellules et du tableau.
La marqueur <TR>, lui, débute une ligne d'un tableau, le marqueur <TD> quant à lui débute une cellule. Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

Les cellules

Avant toutes choses, les cellules peuvent contenir tous les éléments HTML déjà passés en revue, soit :

du texte
des images
des liens
des arrière-plans
et même des tableaux (eh oui!)

Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.

Largeur d'une cellule	<TD width=x> en pixels
	<TD width=%> en pourcentage
Fusion de lignes	<TD rowspan=x>
Fusion de colonnes	<TD colspan=x>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec, sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER>
<TABLE width=60% border=1> <TR> <TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD> </TR> </TABLE>
</CENTER>

cellule1

cel. 2

Ou : <CENTER>
<TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule1

cel. 2

Le même tableau mais avec 2 lignes : <CENTER>
<TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule1	cel. 2	3
cellule1	cel. 2	3

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales : c’est de la fusion.

<CENTER>
<TABLE width=60% border=1> <TR> <TD colspan=3>cellule 1</TD> </TR>
<TR> <TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule 1
cellule 1	cel 2	3

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER>
<TABLE width=60% border=1> <TR> <TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
<TR> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule 1	cel 2	3
cellule 1	cel 2	3

Ligne de tableau	<TR align=left/center/right> <TR valign=top/middle/bottom>	horizontalement verticalement
Cellule de tableau	<TD align=left/center/right> <TD valign=top/middle/bottom>	horizontalement verticalement

A Titre d'exemple, reprenons le tableau suivant :

cellule 1
cellule 1	cel 2	3

Avec quelques aménagements, il devient : <CENTER>
<TABLE width=60% border=1> <TR> <TD colspan=3 align=center>Tarif au ../../..</TD> </TR>
<TR> <TD width=33% >Article 1</TD>
<TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD> </TR> </TABLE>
</CENTER>

Tarif au ../../..
Article 1	Ref 002	30fr

Il est également possible de changer la couleur de la cellule. Couleur de la cellule <TD BGCOLOR="#$$$$$$"> Notre dernier exemple pourrait devenir : <TD colspan=3 align=center bgcolor="#000088">

Tarif au ../../..
Article 1	Ref 002	30fr

Attributs des balises <TABLE> <TR> et <TD>

Les paramètres du marqueur TABLE sont les suivants:

BGCOLOR="Couleur"indique la couleur de fond du tableau
ALIGN= LEFT | RIGHT, HSPACE et VSPACE ont la même signification que pour le marqueur IMG
CELLPADDING="Pixels" détermine la marge d'une cellule. Cette marge est la même de tous les cotés de chaque cellule.
CELLSPACING="Pixels" détermine la largeur en pixels entre chacune des cellule (à l'extérieur de la cellule).
WIDTH et HEIGHT sont censés donner la taille du tableau, soit en pixels, soit en pourcentage de la page.

Les paramètres du marqueur TR sont les suivants:

BGCOLOR="Couleur" indique la couleur de fond de la ligne
ALIGN= LEFT | RIGHT | CENTER indiquent l'alignement horizontal à l'interieur de chacune des cellules de la ligne (comme DIV
VALIGN= BOTTOM|MIDDLE|TOP indiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré

Les principaux paramètres du marqueur TD sont les suivants:

BGCOLOR="Couleur" indique la couleur de fond de la cellule
ALIGN= LEFT | RIGHT | CENTERindiquent l'alignement horizontal à l'interieur de la cellule(comme DIV
VALIGN= BOTTOM|MIDDLE|TOPindiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré
COLSPAN=x permet à une cellule d'occuper plusieurs colonnes consécutives. (voir exemple plus loin)
ROWSPAN=x permet à une cellule d'occuper plusieurs lignes consecutives (voir exemple plus loin)

A noter la présence d'un marqueur supplémentaire <CAPTION ALIGN=BOTTOM|TOP> qui permet de mettre un Titre au tableau. Son paramètre indique si le Titre doit être avant (TOP) ou après (BOTTOM) le tableau.

Cours HTML N°7 : les tableaux