Les
tableaux
Un tableau est débuté par la balise <TABLE> et se termine par </TABLE>.
Les principaux attributs de Table sont :
WIDTH : Spécifie la largeur du tableau en pixels ou en pourcentage.
HEIGHT : Spécifie la hauteur du tableau en pixels ou en pourcentage.
BORDER : Pour spécifier l’épaisseur de la bordure extérieure. Si l’attribut Border est omis, le tableau ne comportera aucune bordure.
CELLPADING : pour spécifier en pixels l’espace entre les bordures et le contenu des cellules.
CELLSPACING : Pour spécifier l’épaisseur des bordures entre les cellules.
BGCOLOR : Spécifie la couleur de fond du tableau.
Bordercolor : Spécifie la couleur de la bordure.
Rules : Permet de déterminer le type d’affichage des traits de séparations verticales et horizontales. Rules peut prendre les valeurs suivantes :
None (pas de traits de séparation,) Basic (Traits de séparation ente l’entête, le corps et la fin du tableau,) Rows (Traits horizontaux entre chaque ligne,) Cols (traits verticaux entre chaque colonnes et traits horizontaux entre chaque titre,) All (quadrillage complet.)
Voici un exemple d’emplois des attributs :
<TABLE
BORDER:6 CELLSPACING=12 CELLPADING=20 WIDTH=80%>
</TABLE>
Entre les balises <TABLE> et </TABLE>, viennent
les balises de la structure et du contenu du tableau.
Pour chaque ligne du tableau, vous devez utiliser les balises <TR> et </TR>.
Entre ces 2 balises, viennent les balises <TD> et </TD> qui permettent d’écrire les colonnes.
La syntaxe générale :
<TABLE>
<TR> <-- Ceci est le début de la première ligne --!>
<TD>Ceci est le contenu de la première colonne de la première ligne</TD>
<TD>Ceci est le contenu de la deuxième colonne de la première ligne</TD>
Etc… Il y a autant de <TD> qu’il y a de colonnes dans la ligne
</TR> <-- Fin de la première ligne --!>
<tr><-- Début de la deuxième ligne --!>
<TD>Contenu de la première colonne de la deuxième ligne</TD>
<TD>Contenu de la deuxième colonne de la deuxième ligne</TD>
</TR><-- Fin de la deuxième ligne --!>
Et on continue ainsi de suite jusqu’à la dernière ligne…
Mais n’oublions pas de fermer le tableau par la balise :
</TABLE>
Les balises Caption et TH :
Juste avant de débuter l’écriture de la première ligne du tableau, vous pouvez définir une légende pour le tableau par l’intermédiaire de la balise <CAPTION> :
<TABLE>
<CAPTION>Voici une légende</CAPTION>
Ici on peut commencer la première ligne par l’écriture de la balise <TR>.
</TABLE>
<TH> permet de définir un titre pour le tableau.
Cet élément utilise l’attribut COLSPAN de façon à définir le nombre de colonnes que doit occuper, dans sa largeur, le titre du tableau.
Si par exemple vous avez un tableau de 2 colonnes, eh bien la valeur de COLSPAN doit être de 2, de façon que le titre occupe toute la largeur du tableau.
Dans la syntaxe que je vous présente ci-dessous, nous allons donner le titre suivant : « Mon premier tableau ».
<TABLE>
<CAPTION>Voici une légende</CAPTION>
<TR>
<TH COLSPAN= »2 »>ici on écrit le titre du tableau</TH>
</TR>
Ici on peut commencer la première ligne du contenu du tableau par l’écriture de la balise <TR>.
</TABLE>
dans l’exemple qui suit, le tableau aura une légende, il aura un titre, et il contiendra le contenu approprié :
<HTML>
<HEAD>
<TITLE>Page
d'accueil</TITLE>
</HEAD>
<BODY>
<TABLE Border="1">
<CAPTION>Ceci est mon premier tableau</CAPTION>
<TR>
<TH Align= »center » COLSPAN="2">Les planètes du système solaire</TH>
</TR>
<TR>
<TD Align= »Center »>planètes</TD>
<TD Align= »center »>Surfaces</TD>
</TR>
<TR>
<TD>Mercure</TD>
<TD>100% de roches</TD>
</TR>
<TR>
<TD>Vénus</TD>
<TD>100% de roches</TD>
</TR>
<TR>
<TD>La Terre</TD>
<TD>71% d'océans + 29% de continents</TD>
</TR>
<TR>
<TD>Mars</TD>
<TD>100% de roches</TD>
</TR>
<TR>
<TD>Jupiter</TD>
<TD>100% d'océans d'hydrogène liquide</TD>
</TR>
<TR>
<TD>Saturne</TD>
<TD>100% d'océans d'hydrogène liquide</TD>
</TR>
<TR>
<td>Uranus</TD>
<TD>100% de glace</TD>
</TR>
<TR>
<td>Neptune</TD>
<TD>100% de glace</TD>
</TR>
<TR>
<td>Pluton</TD>
<TD>100% de glace</TD>
</TR>
</TABLE>
<P></P>
<P>Fin de la page...</P>
</BODY>
</HTML>
Les principaux attributs de TR et TD :
Align : Spécifie l’alignement horizontal pour les cellules. Align peut recevoir les valeurs suivantes :
Left pour gauche, Center pour centrer et Right pour droite.
Valign : Permet l’alignement verticale pour les cellules, il peut recevoir les valeurs suivantes :
Top pour haut, Middle pour centre, et Bottom pour bas.
Colspan : Permet de fusionner des colonnes.
Rowspan : Permet de fusionner des lignes.
Philippe BOULANGER