Les Tableaux en HTML

L'affichage de tableaux dans des documents codés en HTML peut sembler complexe, mais ils se révèlent très utiles dans de nombreux cas.
Les tableaux sont constitués de cellules, situées dans des colonnes (éléments verticaux) et des rangées (éléments horizontaux). Les cellules peuvent contenir tous les éléments Html déjà passés en revue (texte, images, liens, arrière-plans,tableaux).

Les balises de tableaux

<TABLE>...<TABLE>
permet d'ouvrir un tableau
<TR>...<TR> (table Row)
permet de définir une rangée du tableau.
<TD>...<TD> (table Data)
permet d'insérer des éléments qui seront affichés dans le cellule.
<TH>...<TH> (Table Header)
affiche un titre de colonne ou de rangée qui apparait centré en gras sans une cellule donnée.
<CAPTION>...<CAPTION>
insére un titre global au tableau.

Options du tableau

BORDER : option de la balise <TABLE>. Epaisseur du cadre extérieur en pixels. Avec la valeur 0, le cadre est invisible.
CELLSPACING : option de la balise <TABLE>. Epaisseur en pixels autours de chaque cellule.
CELLSPADDING : option de la balise <TABLE>. Epaisseur en pixels entre l'élément de la cellule et le cadre.
WIDTH : option de la balise <TABLE>. Largeur occupée par le tableau en pixels ou en pourcentages.
WIDTH : option de la balise <TD>. Largeur occupée par une colonne en pixels ou en pourcentages.
ALIGN : option de la balise <CAPTION>. pour la valeur TOP, affiche le titre au-dessus ; BOTTOM, affiche en-dessous.
ALIGN : option des balises <TD>,<TR>,<TH>. pour les valeurs LEFT, RIGHT et CENTER, affiche les éléments de la cellule à gauche, à droite ou au centre.
VALIGN : option des balises <TD>,<TR>,<TH>. Aligne le contenu de la cellule en haut, en bas ou au milieu pour les valeurs TOP, BOTTOM et MIDDLE.
NOWRAP : option des balises <TD>, <TH>. Empêche le retour à la ligne dans la cellule.
COLSPAN : option de la balise <TD>, <TH>. prend pour valeur un chiffre qui est le nombre de colonnes qu'occupera une seule et unique cellule.
ROWSPAN : option de la balise <TD>, <TH>. prend pour valeur un chiffre qui est le nombre de lignes qu'occupera une seule et unique cellule.

faisons un exemple pour être + clair
prenons le code suivant :

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=1>
<CAPTION ALIGN=TOP>titre du tableau</CAPTION>
<TR ALIGN=LEFT VALIGN=TOP>
<TH COLSPAN=3 ROWSPAN=1 NOWRAP>Elements A</TH>
<TH>Elements B</TH>
</TR>

<TR>
<TD>Element A1</TD>
<TD WIDTH="33%">Element A2</TD>
<TD>Element A3</TD>
<TD>Element B1</TD>
</TR>
</TABLE>

cela donne :

titre du tableau
Elements A Elements B

Element A1 Element A2 Element A3 Element B1

les tableaux, c'est tout simple ! Pour qu'il soit encore plus clair, on peut rajouter de la couleur en utilisant l'option BGCOLOR. par exemple : <TD BGCOLOR="#C0C0C0"> met en gris le fond de la cellule.

La suite : Le HTML avancé.

Pour plus de renseignements, contacter starshoot