HTML : Les tableaux

La balise `<TABLE>` permet d’insérer un tableau. Ces derniers permettent une meilleure mise en forme des informations dans vos pages.

Les principales balises de tableaux

La balise <TABLE> permet d’insérer un tableau. Les tableaux permettent une meilleure présentation des informations, et apparaît comme la méthode la plus utilisée pour la conception de page Web. La création des tableaux est basée autour de ces balises :

1. La balise <TABLE> </TABLE> indique au navigateur la création d’un tableau.
2. La balise <TR> </TR> définit une ligne.
3. La balise <TD> </TD> définit une cellule.
4. La balise <TH> </TH> définit l’en-tête de chaque colonne.
la balise <CAPTION> affiche le titre du tableau.

Exemple de tableau HTML :

Code HTML correspondant :

<TABLE BORDER=1>
<CAPTION>
Titre du tableau
</CAPTION>
<TR>
<TH>Colonne 1</TH>
<TH>Colonne 2</TH>
</TR>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
</TABLE>

• Les attributs de la balise TABLE :

- WIDTH : largeur du tableau, en pixels ou en pourcentage.
- HEIGHT : hauteur du tableau, en pixels ou en pourcentage.
- BORDER : taille en pixels de la bordure du tableau.
- CELLPADDING : espace en pixels entre la bordure et le contenu de la cellule du tableau.
- CELLSPACING : espace en pixels entre les cellules du tableau.
- BGCOLOR : couleur d’une cellule.
- BORDERCOLOR : couleur de la bordure du tableau.
- BORDERCOLORLIGHT : couleur aux points culminants de la bordure du tableau.
- BORDERCOLORDARK : couleur de l’ombre de la bordure du tableau.
- BACKGROUND : image d’arrière plan du tableau.

La mises en pages avec les tableaux

• Pour aligner les éléments d’un tableau

L’alignement des données s’obtient avec les attributs ALIGN pour l’alignement horizontal et VALIGN pour l’alignement vertical :

1. ALIGN=LEFT-RIGHT-CENTER : Les données sont alignées à gauche, à droite ou au centre de la cellule.

2. VALIGN=MIDDLE : Les données sont centrées verticalement à l’intérieur de la cellule.

3. VALIGN=TOP-BOTTOM : Les données sont en haut ou en bas de la cellule.

4. VALIGN=BASELINE : Toutes les données des cellules sont alignées sur une ligne commune.

<TABLE BORDER=1>
<TR>
<TH ALIGN=RIGHT>Element aligné à droite</TH>
<TH ALIGN=CENTER>Elément centrée</TH>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Elément aligné à gauche et en haut</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>Elément centré et en bas</TD>
</TR>
<TR VALIGN=BASELINE>
<TD>Elément basé sur la ligne</TD>
<TD></TD>
</TR>
</TABLE>

• Fusionner les lignes et colonnes

- COLSPAN est utilisé pour fusionner 2 cellules sur une ligne.
- ROWSPAN est utilisé pour fusionner 2 cellules sur une colonne.

Exemple :

<TABLE BORDER=1>
<TR>
<TD>Cellule 1</TD>
<TD COLSPAN=2>2 cellules fusionnées</TD>
</TR>
<TR>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
<TD ROWSPAN=2>2 cellules fusionnées</TD>
</TR>
<TR>
<TD>Cellule 4</TD>
<TD>Cellule 5</TD>
</TR>
</TABLE>

• Intégrer des propriétés

Vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule. L’espacement des cellules et la taille de la bordure peuvent être aussi paramétrés.

Exemple :

Code HTML :

<TABLE BORDER="2" BORDERCOLOR="#0000FF" WIDTH=200 HEIGHT=30>
<TR>
<TD BGCOLOR="#FF0000">Cellule 1</TD>
<TD BGCOLOR="#00CC33">Cellule 2 </TD>
</TR>
</TABLE>

Les tableaux imbriqués

La cellule d’un tableau peut contenir toutes sortes d’objets mais elle peut également contenir : un autre tableau. C’est ce que l’on appelle les tableaux imbriqués. Cela permet de créer des mises en pages encore plus attrayantes. Voici un exemple :

La bordure verte de contour s’obtient grâce aux tableaux imbriqués. Vous créez un 1er tableau avec une couleur de fond et vous lui ajoutez la propriété : cellpadding="1"

Ensuite, vous insérez un 2ème tableau à l’intérieur avec d’autres couleurs et un nombre de cellules que vous souhaitez.

Code HTML :

<table width="200" border="0" cellspacing="0" cellpadding="1" bgcolor="#D0DCF4">
<tr>
<td bgcolor="#00FF00">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FFCC33" align="center">
<td bgcolor="#0099FF"><font color="#FFFFFF">Titre</font></td>
</tr>
<tr bgcolor="#666699">
<td bgcolor="#999999"> </td>
</tr>
<tr bgcolor="#666699">
<td bgcolor="#999999">Cellule 1</td>
</tr>
<tr bgcolor="#666699">
<td bgcolor="#999999">Cellule 2</td>
</tr>
<tr bgcolor="#666699">
<td bgcolor="#999999"> </td>
</tr>
</table>
</td>
</tr>
</table>