Réaliser sa page Web
   Leçon 10 : La création de tableaux

Les tableaux

Pour réaliser un tableau, ca se complique un peu. Voyons les différentes instructions de base.
<TABLE> et </TABLE> : Instruction de début et fin de table.
<CAPTION> et </CAPTION> : Instruction de début et fin du titre du tableau (à n'utiliser que si nécessaire).
<TR> et </TR> : Définit le début et la fin d'une ligne de cellules.
<TD> et </TD> : Définit le début et la fin d'une cellule (le texte est centré verticalement dans la cellule).
<TH> et </TH> : Définit l'en-tête d'une cellule (cette instruction est identique à <TD> et </TD> sauf que par défaut le texte est en gras et centré horizontalement dans la cellule).


Exemple d'un tableau de 3 lignes de 2 cellules

<TABLE>
<CAPTION> Titre du Tableau </CAPTION>
<TR><TD> première cellule </TD><TD> deuxième cellule </TD></TR>
<TR><TD> première cellule </TD><TD> deuxième cellule </TD></TR>
<TR><TD> première cellule </TD><TD> deuxième cellule </TD></TR>
</TABLE>


Voici le résultat :

Titre du Tableau
première cellule deuxième cellule
première cellule deuxième cellule
première cellule deuxième cellule


Afin d'améliorer ce tableau, d'autres instructions existent :
Tout d'abord pour l'instruction <TABLE> voici les différents arguments possibles :

  • BORDER="valeur" (taille du cadre autour du tableau, si BORDER="0" pas de cadre).
  • CELLSPACING="valeur" (par défaut cette valeur est de 2. C'est l'espace entre le bord d'une cellule et le bord de la suivante).
  • CELLPADDING="valeur" (par défaut cette valeur est de 1. C'est l'espace entre le bord d'une cellule et son contenu).
  • WIDTH="valeur ou pourcentage"
  • HEIGHT="valeur ou pourcentage"

Dans les balises de rangées ou de cellules <TR> <TD> on pourra ajouter:

  • ALIGN="left ou right" pour définir la justification du contenu de la cellule ou de la rangée entière.
A noter, il existe de nombreuses options supplémentaires pour l'instruction <TABLE> sur Internet Explorer.


Deux exemples de tableau un peu plus complexe

Le premier tableau :
<TABLE BORDER="6" CELLSPACING="5" CELLPADDING="8" WIDTH="80%">
<CAPTION> Titre du tableau </CAPTION>
<TR><TD> première cellule </TD><TD> deuxième cellule </TD></TR>
<TR><TH> première cellule </TH><TH> deuxième cellule </TH></TR>
<TR><TD ALIGN="CENTER"> première cellule </TD><TD ALIGN="RIGHT"> deuxième cellule </TD></TR>
</TABLE>

Voici le résultat :



Titre du tableau
première cellule deuxième cellule
première cellule deuxième cellule
première cellule deuxième cellule

Le deuxième tableau :

<CENTER>
<TABLE BORDER="2" CELLSPACING="20">
<TR>
<TH><A HREF="pic.gif"><IMG BORDER="0" SRC="pic.gif" ALT="Voir l'image"></A></TH>
<TH><A HREF="http://www.babel.net"><IMG BORDER="0" SRC="pic.gif" ALT="Serveur Babel"></TH>
</TR>
<TR>
<TH> ligne 1 même cellule <BR> ligne 2 même cellule <BR> ligne 3 même cellule </TH>
<TH><A HREF="http://www.babel.net">Lien vers le serveur BABEL</A> </TH>
</TR>
</TABLE>
</CENTER>

Voir l'image Serveur Babel
ligne 1 même cellule
ligne 2 même cellule
ligne 3 même cellule
Lien vers le serveur BABEL

Copier-coller ce texte

Allons un peu plus loin

ROWSPAN et COLSPAN s'utilisent en attribut entre <TD> et </TD> ou <TH> et </TH>. Ils permettent de dire que la cellule en question compte soit pour plusieurs cellules verticales ou plusieurs cellules horizontales.

Exemple :

première cellule deuxième cellule
première cellule deuxième cellule troisième cellule
première cellule deuxième cellule troisième cellule
première cellule deuxième cellule

Copier-coller ce texte

Copier-coller ce texte


Les tableaux sont de plus en plus utilisés, il faut savoir qu'il est possible d'imbriquer des tableaux les uns dans les autres, l'intégralité du nouveau tableau se trouvera entre les balises <TD> et </TD> ou <TH> et </TH>.

   On résume :
  • Les tableaux peuvent s'imbriquer les uns dans les autres.
  • Netscape et Internet Explorer ne gèrent pas les informations de la même manière dans les tableaux (Netscape perds les informations sur les polices de caractère, il faut lui déclarer l'information au début de chaque cellule).