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>
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 |
|
|
|
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).
|
|