Cours HTML : les tableaux

Les tableaux

HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille et de l'espacement des cellules. Chaque cellule peut contenir du texte, des listes, des images, des liens hypertextes, des éléments de formulaire...

Structure d'un tableau

Un tableau est décrit par différents éléments :

L'élément TABLE correspond au tableau lui-même
L'élément TR est utilisé pour définir chacune des lignes du tableau
L'élément TD est utilisé pour chaque cellule

L'élément `TABLE`

Un tableau est donc débuté par une balise <TABLE> et se termine sur une balise </TABLE>. Entre les deux, on définira les lignes et les cellules.

Les principaux attributs applicables à l'élément TABLE sont :

border: pour spécifier l'épaisseur de la bordure extérieure
cellpading: pour spécifier l'espace entre bordures et contenu des cellules
cellspacing: pour spécifier l'épaisseur des bordures entre cellules

A	B
C	D

Exemple

<TABLE border=6 cellspacing=12 cellpadding=20>
...
...
</TABLE>

width: permet de déterminer quelle proportion de la largeur de la fenêtre doit être occupée

<TABLE border=4 cellspacing=4 cellpadding=4 width=80%>
...
</TABLE>

A	B
C	D

Remarque : si on ne précise pas la taille des bordures, il n'y en a pas

A	B
C	D

<TABLE>
...
...
</TABLE>

Les lignes

Chaque ligne est définie par l'élément TR. Reprenons notre exemple :

A	B
C	D

<TABLE border>
<TR> ... A ... B ... </TR>
<TR> ... C ... D ... </TR>
</TABLE>

Les cellules

Chaque cellule est ensuite construite à l'aide de l'élément TD.

A	B
C	D

<TABLE border>
<TR> <TD>A</TD>  <TD>B</TD> </TR>
<TR> <TD>C</TD>  <TD>D</TD> </TR>
</TABLE>

L'élément TD peut être utilisé avec les attributs suivants :

colspan: Indique que la cellule courante s'étend sur plusieurs colonnes.
rowspan: Indique que la cellule courante s'étend sur plusieurs lignes.
nowrap: Empêche les sauts de lignes à l'intérieur de la cellule courante.

A	B	C	D	E
F	G	H
F	I	J	K
L	M	N	K

<TABLE border>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TD>E</TD> </TR>
<TR> <TD rowspan=2>F</TD> <TD>G</TD> <TD colspan=3>H</TD> </TR>
<TR> <TD>I</TD> <TD>J</TD> <TD colspan=2 rowspan=2>K</TD> </TR>
<TR> <TD>L</TD> <TD>M</TD> <TD>N</TD> </TR>
</TABLE>

Alignement dans les cellules

Les attributs align et valign permettent de régler l'alignement à l'intérieur des cellules. Ils s'appliquent aux éléments TR et TD. Dans le cas de TR la valeur spécifiée s'applique à toutes les cellules de la ligne. Dans le cas de TD elle s'applique seulement à la cellule en cours.

Si une indication différente est donnée pour la ligne et pour une cellule, c'est celle donnée pour la cellule qui l'emporte.

align pour l'alignement horizontal: Il peut prendre les valeurs : right (alignement à droite), center (centré) ou left (alignement à gauche).
valign pour l'alignement vertical: Il peut prendre les valeurs : top (en haut), middle (centré verticalement) ou bottom (en bas).

<TABLE border width=100%>
<TR> <TD>A<br>ABCDE<br>A</TD>  <TD>ABCDE</TD>
    <TD>ABCDE</TD> <TD>ABCDE</TD> </TR>

<TR valign=top> <TD>A<BR>ABCDE<br>A</TD> <TD>ABCDE</TD>
    <TD align=center>ABCDE</TD> <TD>ABCDE</TD> </TR>

<TR valign=bottom> <TD>A<BR>ABCDE<br>A</TD> <TD>ABCDE</TD> 
    <TD>ABCDE</TD> <TD valign=top>ABCDE</TD> </TR>

<TR align=right> <TD>A<BR>ABCDE<br>A</TD> <TD align=top>ABCDE</TD> 
    <TD>ABCDE</TD> <TD valign=bottom>ABCDE</TD> </TR>
</TABLE>

A ABCDE A	ABCDE	ABCDE	ABCDE
A ABCDE A	ABCDE	ABCDE	ABCDE
A ABCDE A	ABCDE	ABCDE	ABCDE
A ABCDE A	ABCDE	ABCDE	ABCDE

Compléments

Entêtes

L'élément TH permet de définir des cellules d'entête. Les navigateurs visuels par exemple utilisent cette information pour mettre ces cellules en gras.

Légendes

L'élément CAPTION permet de placer une légende au-dessus ou au-dessous d'un tableau (selon que l'attribut align a la valeur top ou bottom).

Légende
A	B
C	D

<TABLE border>
<CAPTION align=bottom>Légende</CAPTION>
<TR> <TH>A</TH>  <TH>B</TH> </TR>
<TR> <TD>C</TD>  <TD>D</TD> </TR>
</TABLE>

Exemple de tableau intégrant divers éléments

Le fichier tablo.htm

Divers attributs de la balise <TABLE>

L'attribut COLS permet de définir le nombre de colonnes du tableau. Cela permet au navigateur de l'afficher au fur et à mesure de sa réception Sinon, il faut atttendre que tout le tableau soit reçu avant de pouvoir l'afficher.
<TABLE cols=4>

L'attribut FLOAT permet d'habiller un tableau avec du texte.
<TABLE float=left> <TABLE float=left>

L'attribut RULES permet de définir le type d'affichage des traits de séparation horizontaux et verticaux.

rules=none: Pas de traits de séparation
rules=basic: Traits entre l'en-tête, le corps et la fin du tableau
rules=rows: Traits horizontaux entre chaques lignes
rules=cols: Traits verticaux entre chaque colonne, plus traits horizontaux entre titre, coprs et fin du tableau
rules=all: Quadrillage complet