Tableaux

Insertion de tableaux

Les tableaux

Comme les listes, les tableaux sont un moyen de présenter du texte qui offre différentes alternatives de présentation, en permettent notamment de créer une structure visuelle s'étendant non seulement sur plusieurs lignes, mais aussi sur plusieurs colonnes.

De plus, l'intégration dans les tableaux d'images et de couleurs différentes ne pose aucun problème, ce qui fait de leur emploi la principale manière de mettre en page toutes sortes d'éléments à l'intérieur d'une seule et même structure.

À l'heure actuelle, la plupart des instructions de tableaux sont correctement interprétées par la plupart des navigateurs mais quelques-unes d'entre elles s'écartent de la norme, soit parce qu'elles ne s'appliquent qu'à certains navigateurs, soit parce qu'elles appartiennent au HTML 4.0, qui n'est pas interprété par tous les navigateurs.

Définition de tableaux

<TABLE> ... </TABLE>: Délimite la structure de base du tableau, qui permet de créer une structure visuelle s'étendant sur plusieurs lignes et colonnes.

<TABLE BORDER> ... </TABLE>: Affiche les bordures du tableau.

<TR> ... </TR>: Définit une ligne du tableau (Table Row).

<TH> ... </TH>: Définit une cellule d'en-tête (Table Header), les caractères s'y affichent en gras et centrés.

<TD> ... </TD>: Définit une cellule de donnée (Table Data).

Exemple :


   <TABLE BORDER>

     <TR>

       <TH>Titre1</TH>

       <TH>Titre2</TH>

       <TH>Titre3</TH>

     </TR>

Titre1	Titre2	Titre3
Cellule de données	Cellule de données	Cellule de données


     <TR>

       <TD>Cellule de données</TD>

       <TD>Cellule de données</TD>

       <TD>Cellule de données</TD>

     </TR>

   </TABLE>

À l'intérieur d'un tableau, la mise en forme des caractères, ainsi que le formatage du texte, sont indépendants d'une cellule à l'autre : il faut redéfinir les caractéristiques du texte pour chacune d'entre elles.

Attributs de tableaux

Bordures et quadrillage

<TABLE BORDER="?">: Bordures de tableau, affiche le quadrillage et crée une bordure de l'épaisseur du chiffre indiqué (0 correspondant à l'absence de bordure).

Exemple :

Tableau sans bordure Tableau avec bordure


	<TABLE BORDER="0">

	  <TR>

	    <TD>1</TD>

	    <TD>3</TD>

	  </TR>

	  <TR>

	    <TD>2</TD>

	    <TD>4</TD>

	  </TR>

	</TABLE>

1	3
2	4


	<TABLE BORDER="12">

	  <TR>

	    <TD>1</TD>

	    <TD>3</TD>

	  </TR>

	  <TR>

	    <TD>2</TD>

	    <TD>4</TD>

	  </TR>

	</TABLE>

1	3
2	4

<TABLE CELLSPACING="?">: Épaisseur du quadrillage, modifie l'épaisseur du trait entre les cellules.

<TABLE CELLPADDING="?">: Épaisseur du tampon, modifie l'espace entre les traits et le texte.

Exemple :


	<TABLE BORDER CELLPADDING="15" CELLSPACING="6">

	  <TR>

	    <TD>1</TD>

	    <TD>3</TD>

	  </TR>

	  <TR>

	    <TD>2</TD>

	    <TD>4</TD>

	  </TR>

	</TABLE>

1	3
2	4

Dimensions de tableau

Les dimensions d'un tableau et de ses cellules résultent automatiquement de leur contenu et de la taille de la fenêtre, à moins de leur imposer une hauteur ou une largeur spécifique.

Ces dimensions se définissent en pixel (valeur absolue) ou en pourcentage par rapport à la page ou au tableau.

Largeur et hauteur du tableau

<TABLE WIDTH="?/%">: Largeur du tableau dans la page.

<TABLE HEIGHT="?/%">: Hauteur du tableau dans la page.

Largeur et hauteur des cellules

<TH WIDTH="?/%">: Largeur des cellules d'en-tête dans le tableau.

<TD WIDTH="?/%">: Largeur des cellules de données dans le tableau.

<TH HEIGHT="?/%">: Hauteur des cellules d'en-tête dans le tableau.

<TD HEIGHT="?/%">: Hauteur des cellules de données dans le tableau.

Exemple :


  <TABLE BORDER WIDTH="200">

   <TR>

     <TH WIDTH="30%" HEIGHT="25">Titre1</TD>

     <TH>Titre2</TD>

   </TR>

   <TR>

     <TD HEIGHT="75">Cellule</TD>

     <TD>Cellule</TD>

   </TR>

  </TABLE>

Titre1	Titre2
Cellule	Cellule

Le dimensionnement d'une cellule définit la taille de l'ensemble de la colonne (WIDTH) ou de la ligne (HEIGHT), il n'est pas nécessaire de le spécifier pour chacune d'entre elles.

Réunion de cellules

<TH COLSPAN="?">: Réunion de cellules d'en-tête sur une même ligne.

<TD COLSPAN="?">: Réunion de cellules de données sur une même ligne.

<TH ROWSPAN="?">: Réunion de cellules d'en-tête dans une même colonne.

<TD ROWSSPAN="?">: Réunion de cellules de données dans une même colonne.

La description du tableau se fait ligne par ligne, colonne par colonne : si dans la première ligne sont déclarée trois cellules dont une s'étendant sur deux lignes, la description de la deuxième ligne ne comprend que deux cellules.

Exemple :


  <TABLE BORDER>

   <TR>

     <TH COLSPAN="2">Titre<BR>

     (étendu sur deux colonnes)

     </TH>

   </TR>

   <TR>

     <TD ROWSPAN="2">Cellule<BR>

     étendue<BR>sur<BR>deux<BR>lignes

     </TD>

     <TD>Cellule normale</TD>

   </TR>

   <TR>

     <TD>Cellule normale</TD>

   </TR>

  </TABLE>

Titre (étendu sur deux colonnes)
Cellule étendue sur deux lignes	Cellule normale
Cellule étendue sur deux lignes	Cellule normale

Exemple de tableau standard

Insertion de couleurs

L'indication de couleur est introduite entre guillemet, à l'aide d'un nom de couleur ou de sa valeur sous forme de chiffres hexadécimaux.

<TABLE BGCOLOR="?">: Couleur de fond (Background Color), permet d'attribuer une couleur au fond au tableau.

<TD BGCOLOR="?"> ou <TH BGCOLOR="?">: Couleur de fond (Background Color), permet d'attribuer une couleur au fond à une cellule.

Exemple :


	<TABLE BORDER BGCOLOR="#FFDAB9">

	  <TR>

	   <TH BGCOLOR="#8B0000">
	<FONT COLOR="#FFFFFF">Titre1</FONT></TD>

	   <TH BGCOLOR="#8B0000">
	<FONT COLOR="#FFFFFF">Titre2</FONT></TD>

	  </TR>


	    <TR>

	    <TD>Cellule de données</TD>

	    <TD>Cellule de données</TD>

	   </TR>

	 </TABLE>

Titre1	Titre2
Cellule de données	Cellule de données

Spécificité Internet Explorer :

<TABLE BORDERCOLOR="?">: Couleur des bordures, permet d'attribuer une couleur aux traits du tableau.

<TABLE BORDERCOLORLIGHT="?">: Effet d'ombrage , permet d'attribuer une couleur aux points culminants de la bordure du tableau.

<TABLE BORDERCOLORDARK="?">: Effet d'ombrage , permet d'attribuer une couleur à l'ombre de la bordure du tableau.

<TD BORDERCOLOR="?"> ou <TH BORDERCOLOR="?">: Couleur des bordures, permet d'attribuer une couleur aux traits d'une cellule.

<TD BORDERCOLORLIGHT="?"> ou <TH BORDERCOLORLIGHT="?">: Effet d'ombrage , permet d'attribuer une couleur aux points culminants des traits d'une cellule.

<TD BORDERCOLORDARK="?"> ou <TH BORDERCOLORDARK="?">: Effet d'ombrage , permet d'attribuer une couleur à l'ombre des traits d'une cellule.

Alignement

Alignement du texte dans les cellules

Alignement horizontal

<TD ALIGN="LEFT"> ou <TH ALIGN="LEFT">: Alignement du texte à gauche.

<TD ALIGN="CENTER"> ou <TH ALIGN="CENTER">: Alignement du texte au centre.

<TD ALIGN="RIGHT"> ou <TH ALIGN="RIGHT">: Alignement du texte à droite.

Alignement vertical

<TD VALIGN="TOP"> ou <TH VALIGN="TOP">: Alignement du texte en haut de la cellule (Vertical Alignment).

<TD VALIGN="MIDDLE"> ou <TH VALIGN="MIDDLE">: Alignement du texte au milieu de la cellule (Vertical Alignment).

<TD VALIGN="BOTTOM"> ou <TH VALIGN="BOTTOM">: Alignement du texte en bas de la cellule (Vertical Alignment).

Exemple :


  <TABLE WIDTH="200" HEIGHT="200">

   <TR>

     <TD ALIGN="LEFT" VALIGN="TOP">

     Mon texte<BR>en haut à gauche

     </TD>

   </TR>

   <TR>

     <TD ALIGN="CENTER" VALIGN="MIDDLE">

     Mon texte<BR>au centre

     </TD>
   </TR>

   <TR>

     <TD ALIGN="RIGHT" VALIGN="BOTTOM">

     Mon texte<BR>en bas à droite

     </TD>

   </TR>

  </TABLE>

Mon texte
en haut à gauche

Mon texte
au centre

Mon texte
en bas à droite

Alignement du tableau dans la page

<TABLE ALIGN="LEFT">: Alignement du tableau à gauche.

<TABLE ALIGN="CENTER">: Alignement du tableau au centre.

<TABLE ALIGN="RIGHT">: Alignement du tableau à droite.

Définir l'alignement du tableau à droite ou à gauche permet de placer du texte dans l'espace restant de la page.

La commande <BR CLEAR="ALL"> permet de reprendre l'alignement normal dans la page.

Exemple :


  Mon texte aligné<BR>
à gauche.


  <TABLE BORDER ALIGN="RIGHT">

   <TR>

     <TH>Mon tableau</TH>

   </TR>

   <TR>

     <TH>à droite</TH>

   </TR>

  </TABLE>

  <BR CLEAR="ALL">


  Mon texte aligné<BR>
à gauche.

Mon texte aligné
à gauche.

Mon tableau
à droite

Mon texte aligné
à gauche.

Spécificité Internet Explorer :

<TABLE VALIGN="TOP|BOTTOM">: Permet d'attribuer un alignement vertical pour l'ensemble du tableau.

Légende de tableau

<CAPTION>...</CAPTION>: Légende, permet de donner un titre au tableau (toujours placé entre les balises <TABLE></TABLE>).

Exemple :


   <TABLE>

    <CAPTION>Titre</CAPTION>

    <TR>

      <TH>En-tête 1</TH>

      <TH>En-tête 2</TH>

    </TR>

    <TR>

      <TD>Cellule 1</TD>

      <TD>Cellule 2</TD>

    </TR>

   </TABLE>

Titre
En-tête 1	En-tête 2
Cellule 1	Cellule 2

Attributs des légendes

<CAPTION ALIGN="BOTTOM|TOP">: Permet de placer la légende en haut ou en bas du tableau.

Spécificité Internet Explorer :

<CAPTION ALIGN="CENTER|LEFT|RIGHT">: Permet de placer la légende en haut à gauche, à droite ou au centre du tableau.

Insertion d'images

<TD><IMG SRC="image"></TD>: Insertion d'image, permet d'insérer une image dans une cellule de tableau.

Exemple :


  <TABLE BORDER="1" CELLPADDING="5">

    <TR>

      <TD>Happy.gif</TD>

      <TD><IMG SRC="happy.gif"></TD>

    </TR>

  </TABLE>

Happy.gif

Spécificité Internet Explorer :

<TABLE BACKGROUND="url">: Arrière plan, permet d'attribuer une image de fond au tableau.

Instructions spécifiques à Internet Explorer et au HTML 4.0

Exemple des spécificités d'Internet Explorer et du HTML 4.0