Chapitre suivantIndex des CoursChapitre prcedentChapitre 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 :

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.

Légende du tableau.
Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 3 Cellule 4



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

Légende du tableau.
Colonne 1 alignée à droite Colonne 2 centrée
Cellule 1 alignée à gauche
et en haut
Cellule 2
centrée et en bas

Cellule 3 basée sur la ligne Cellule 4 basée
sur la ligne



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



Exemple d'un tableau avec des fusions.

Cellule 1 2 cellules fusionnées (sur la même ligne)
Cellule 2 Cellule 3 2 cellules fusionnées (sur la même colonne)
Cellule 4 Cellule 5



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

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.

Cellule 1 Cellule 2 Cellule 3
Cellule 4 Cellule 5 Cellule 6
Cellule 7 Cellule 8 Cellule 9



<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 :


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 :


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.

Ligne 1 Cellule 1 Cellule 2
Ligne 2 Cellule 3 Cellule 4



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

 

Chapitre prcedentIndex des CoursChapitre suivant

Révisé le :21-Jan-2009|©2009 www.technologuepro.com