Chapitre 11

Les tableaux.

1. Présentation des tableaux
2. Création des tableaux
3. Aligner les éléments du tableau
4. Fusionner les lignes et colonnes
5. Arrière plan, mise en page, espacement
6. Les attributs RULES ET FRAME (HTML 4.0)

Présentation des tableaux.

La balise <TABLE> permet d'insérer un tableau, c'est l'une des balises les plus utilisées, (elle est devenue officielle avec la version 3.2 du HTML), en effet les tableaux permettent une meilleure présentation des informations, nombreux sont les sites qui utilisent les tableaux pour obtenir une présentation de type "journal".


Création des tableaux.

La création des tableaux se passe autour de 4 balises :

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

A noter que la balise <CAPTION> qui affiche le titre du tableau possède 2 attributs :

• TOP : Titre placé au dessus du tableau (par défaut).
• BOTTOM : Titre placé en dessous du tableau.

Toutes ces balises doivent bien entendu êtres fermées pour indiquer la fin du tableau, d'une colonne, et d'une cellule.

Attention si vous voulez définir une police de caractère pour le tableau, vous êtes obligé d'en définir pour chaque cellule même si elle est identique, exemple ci dessous.

<TD><FONT FACE="Verdana, arial" SIZE=1>Cellule 1</FONT></TD>

Exemple d'un tableau avec son code source.

<TABLE BORDER=1>
<CAPTION>
Légende du tableau.
</CAPTION>
<TR>
<TH>Colonne 1</TH>
<TH>Colonne 2</TH>
</TR>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TABLE>

Aligner les éléments du tableau.

L'alignement des données s'obtient, en jonglant avec les attributs ALIGN pour l'alignement horizontal et VALIGN pour l'alignement vertical. Ces attributs ont plusieurs valeurs :

1. ALIGN=LEFT : (défaut) Les données sont alignées à gauche de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
2. ALIGN=RIGHT : Les données sont alignées à droite de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
3. ALIGN=CENTER : Les données sont centrées à l'intérieur de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
4. VALIGN=MIDDLE : (défaut) Les données sont centrées verticalement à l'intérieur de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
5. VALIGN=TOP : Les données sont en haut de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
6. VALIGN=BOTTOM : Les données sont en bas de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
7. VALIGN=BASELINE : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour TH ou TR).

Exemple d'un tableau où les cellules sont alignées différemment.

<TABLE BORDER=1>
<CAPTION>
Légende du tableau.
</CAPTION>
<TR>
<TH ALIGN=RIGHT>Colonne 1alignée à droite</TH>
<TH ALIGN=CENTER>Colonne 2 centrée</TH>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Cellule 1 Alignée à gauche
<BR>
et en haut</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>Cellule 2
<BR>
centrée et en bas</TD>
</TR>
<TR VALIGN=BASELINE>
<TD>Cellule 3 basée sur la ligne</TD>
<TD>Cellule 4 basée
<BR>
sur la ligne</TD>
</TR>
</TABLE>

Fusionner les lignes et colonnes.

Les lignes et colonnes peuvent êtres fusionnées afin d'obtenir des cellules plus ou moins grandes pour accueillir des données. Ce fusionnement est réalisé avec l'attribut ROWSPAN et COLSPAN.

• Pour fusionner 2 cellules adjacentes sur une ligne COLSPAN est requis (pour TH ou TD).
• Pour fusionner 2 cellules adjacentes sur une colonne ROWSPAN est requis (pour TH ou TD).

Exemple d'un tableau avec des fusions.

<TABLE BORDER=1>
<TR>
<TD>Cellule 1</TD>
<TD COLSPAN=2>2 cellules fusionnées (sur la même ligne)</TD>
</TR>
<TR>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
<TD ROWSPAN=2>2 cellules fusionnées (sur la même colonne)</TD>
</TR>
<TR>
<TD>Cellule 4</TD>
<TD>Cellule 5</TD>
</TR>
</TABLE>



Arrière plan, mise en page, espacement.

En principe la hauteur et la largeur d'une cellule s'adaptent automatiquement aux données (texte ou image). Néanmoins vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule, l'espacement des cellules ainsi que la taille de la bordure peuvent être aussi paramètrés.

Attributs de mise en page et d'espacement (valable pour <TABLE>, <TD> ou <TH>).

• WIDTH : Spécifie la largeur du tableau ou d'une cellule, en pixels ou pourcentage de la fenêtre du navigateur.
• HEIGHT : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou pourcentage de la fenêtre du navigateur.
• BORDER : Spécifie la taille en pixels (par défaut 1) de la bordure du tableau.
• CELLPADDING : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau.
• CELLSPACING : Spécifie l'espace en pixels entre les cellules du tableau.
• BGCOLOR : Spécifie la couleur d'une cellule.
• BORDERCOLOR : Spécifie la couleur de la bordure du tableau.
• BORDERCOLORLIGHT : Spécifie la couleur aux points culminants de la bordure du tableau (effet 3d).
• BORDERCOLORDARK : Spécifie la couleur de l'ombre de la bordure du tableau (effet 3d).
• BACKGROUND : Spécifie l'URL de l'image à afficher comme image d'arrière plan du tableau (I.Explorer seulement).

A noter que pour la balise <TD> l'attribut NOWRAP permet d'éviter les retours à la ligne (inutile si vous avez défini votre tableau en pixels)

Exemple d'un tableau avec certains de ces attributs.

<TABLE BORDER=2 BORDERCOLOR="BLUE" BORDERCOLORDARK="AQUA" WIDTH=300 HEIGHT=150>
<TR>
<TD BGCOLOR="PINK">Cellule 1</TD>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
</TR>
<TD>Cellule 4</TD>
<TD BGCOLOR="YELLOW">Cellule 5</TD>
<TD>Cellule 6</TD>
</TR>
<TR>
<TD>Cellule 7</TD>
<TD>Cellule 8</TD>
<TD BGCOLOR="MAROON">Cellule 9</TD>
<TR>
</TABLE>



Les attributs RULES ET FRAME (HTML 4.0).

Ces attributs sont valables uniquement pour la balise <TABLE> ils sont de plus reconnus par les navigateurs de dernière génération qui savent exploiter le HTML 4.0

L'attribut FRAME.

il fonctionne juste si BORDER est présent dans la balise <TABLE> il signale les côtés d'un cadre à afficher. Voici la liste des valeurs qu'il peut supporter :

• ABOVE : Affiche les bordures externes du haut du tableau seulement.
• BELOW : Affiche les bordures externes du bas du tableau seulement.
• BORDER : Affiche les bordures sur tous les côtés du tableau.
• BOX : Affiche une boîte autour du tableau.
• INSIDES : Affiche les bordures sur le dessus et le dessous du tableau seulement.
• HSIDES : Affiche les bordures externes du côté horizontal du tableau (haut et bas).
• LHS : Affiche les bordures externes du côté gauche du tableau seulement.
• RHS : Affiche les bordures externes du côté droit du tableau seulement.
• VOID : Permet de retirer toutes les bordures externes du tableau.
• VSIDES : Affiche les bordures externes des côtés droit et gauche du tableau.

L'attribut RULES.

il fonctionne juste si l'attribut BORDER est présent dans la balise <TABLE>. Il permet de spécifier des règles supplémentaires à l'intérieur du tableau. Les valeurs acceptées sont les suivantes :

• NONE : Pour retirer toutes les bordures internes du tableau.
• GROUPS : Affiche une bordure horizontale entre les sections
• ROWS : Affiche une bordure horizontale entre toutes les lignes du tableau.
• COLS : Affiche une bordure horizontale entre toutes les colonnes du tableau.
• ALL : Affiche des bordures dans le tableau.

A noter que ces deux attributs doivent aussi être utilisés avec les balises :

1. THEAD : Définissant l'en-tête du tableau.
2. TBODY : Définissant le corps du tableau.
3. TFOOT : Définissant le pied de page du tableau.

Exemple d'un tableau utilisant ces attributs.

<TABLE BORDER=2 WIDTH=200 FRAME=HSIDES RULES=COLS>
<THEAD>
<COLGROUP SPAN=3 ALIGN=LEFT VALIGN=TOP>
</THEAD>
<TBODY>
<TR>
<TD><B>Ligne 1</B></TD>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD><B>Ligne 2</B></TD>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TR>
</TBODY>
</TABLE>