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

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
I J K
L M N
<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