Les tableaux

Principes de base

Les tableaux sont d'une importance capitale dans les pages Web.

Il y a deux types de tableaux:

1. Les visibles, de temps à autre, qui présentent des données de façon structurée
2. Les invisibles, innombrables, qui permettent de strucuturer correctement la présentation des pages Web (organisation des textes, des images, des boutons,...)

Quel que soit son type, un tableau se présente toujours de la même manière:

• La déclaration de début de tableau <TABLE> assortie de différentes commandes (voir ci-dessous)
• Une ligne de titres (facultative, une ou plusieurs au choix)
• Un certain nombre de lignes de cellules présentant le contenu du tableau
• La déclaration de fin de tableau </TABLE>

Syntaxe minimale

Le principe de construction d'un tableau est simple si on s'en fait une bonne image mentale. Le fait de dessiner concrètement les tableaux complexes et de surcharger le dessin des balises nécessaires à leur encodage est une façon de faire simple qui facilitera grandement leur encodage. Une mise en page scrupuleuse permettra aussi d'adapter facilement leur strucuture en cas de modifications diverses (ajout ou retrait d'une ligne de cellules,...).

Voici la syntaxe minimale d'un tableau et le résultat obtenu en fonction des balises.

L'effet de toutes les balises n'est pas signalé afin de ne pas surcharger le dessin, mais, en fonction des contenus, vous comprendrez facilement leur ordonnancement.

Vous remarquerez donc les comportements des balises:

1. La balise <TABLE> commence le tableau
2. La balise <TR> commence la première ligne et restera en fonction jusqu'à ce qu'il soit signalé explicitement que la ligne est finie (le tableau comptera donc le nombre de colonnes correspondant au nombre de cellules déclarées entre la balise de début de ligne et la balise de fin de cette ligne. Il faudra naturellement veiller à ce que ce nombre soit identique toutes les lignes du tableau pour que celui-ci soit correct).
3. La balise <TH> commence une cellule de titre (le texte sera automatiquement mis en gras et centré).
4. La balise </TH> termine une cellule de titre.
5. lorsque la ligne de titre est terminée, la balise </TR> termine la ligne, une nouvelle ligne peut commencer ou la fin du tableau peut être déclarée.
6. Une nouvelle ligne peut commencer avec à nouveau la balise <TR>.
7. Les cellules qui suivent sont des cellules normales car ouvertes avec la balise <TD> et fermées avec la balise </TD>.
8. Finalement, le tableau est fermé avec la balise </TR> qui termine la dernière ligne et la balise </TABLE> qui termine le tableau.

Insérer une image

Il est très simple d'insérer une image dans une cellule, il suffit d'y placer la balise adéquate.

Le tableau est dynamique: par défaut, il s'adapte à la taille de la cellule la plus grande. Il y a donc des chances pour que l'image utilise toute la cellule. Si ce n'était pas le cas, veiller à la disposer comme désiré dans la cellule grâce aux commandes de positionnement en largeur et en hauteur (voir ci-dessous).

Voici un exemple de tableau invisible faisant intervenir l'affichage d'une image. Vous en touverez le code source en dessous.

Centrer un tableau

Très simple, vous ajoutez ALIGN=CENTER dans la balise <TABLE>

Les positions LEFT et RIGHT peuvent également être utilisées, dans ce cas le texte va habiller le tableau (même principe que pour les images).

Les bordures

Appliquer une bordure

Très simple, vous ajoutez "BORDER=..." dans la balise <TABLE>. Les ... représentent une valeur allant de 0 (pas de bordure) à beaucoup (très grosse bordure).

Astuce: même quand vous créez un tableau invisible, affichez d'abord les bordures pour vérifier qu'il n'y a pas d'erreur dans la conception du tableau.

Vous pouvez modifier la couleur de la bordure par la commande "BORDERCOLOR=..." où les ... représentent soit le nom d'une couleur, soit son code sur 6 hexadécimaux ("#666666" pour du gris par exemple).

Avec BORDER, toutes les cellules sont fermées.

Il est possible, en lieu et place de BORDER, d'utiliser "FRAME=..." où les ... peuvent représenter:

• ABOVE ne va afficher que les bords supérieurs des cellules
• BELOW ne va afficher que les bords inférieurs des cellules
• HSIDES va afficher les bords inférieurs et supérieurs des cellules
• LHS ne va afficher que les bords gauches des cellules
• RHS ne va afficher que les bords droits des cellules
• VSIDES va afficher les bords gauches et droits des cellules

Je suppose que s'ils ont mis cela au point, c'est que ça peut servir un jour.

Elargir les bordures

Il est possible d'augmenter l'espace entre les traits représentant les bordures afin que celles-ci soient plus larges (et non plus épaisses comme c'est le cas quand on augmente la valeur de BORDER).

On utilisera pour cela la commande "CELLSPACING=..." où les ... représentent une valeur logiquement plus grande que 1.

Elargir l'espace dans les cellules

Quand le tableau se dimensionne de lui-même, le texte de certaines cellules colle vraiment au bord, ce qui difficile à lire et pas très joli.

Pour éviter cela , il y a moyen d'augmenter l'espace entre les contenus des cellules et leurs bords grâce à la commande "CELLPADDING=..." où les ... représentent une valeur logiquement plus grande que 1.

Etendre des cellules

Il est parfois nécessaire de regrouper les cellules du dessus ou de la gauche d'un tableau. En voici un exemple:

Et en voici le code source:

<TABLE BORDER=1 CELLPADDING=5 ALIGN=CENTER>
   <TR>
      <TH COLSPAN=2>Dates</TH>
      <TH ROWSPAN=2>Article</TH>
   </TR>
   <TR>
      <TH>Commande</TH>
      <TH>Réception</TH>
   </TR>
   <TR>
      <TD>5 mai 2003</TD>
      <TD>8 mai 2003</TD>
      <TD>Valises</TD>
   </TR>
   <TR>
      <TD>2 mai 2003</TD>
      <TD>7 mai 2003</TD>
      <TD>Parapluies</TD>
   </TR>
   <TR>
      <TD>5 mai 2003</TD>
      <TD>9 mai 2003</TD>
      <TD>Muguet</TD>
   </TR>
</TABLE>

Pour fusionner deux (ou plus) cellules dans une ligne (fusion de colonnes), on utilisera la commande "COLSPAN=2"

Pour fusionner deux (ou plus) cellules dans une colonne (fusion de lignes), on utilisera la commande "ROWSPAN=2"

Dimensionner un tableau

La totalité du tableau

Il existe plusieurs manières de dimensionner un tableau au niveau de la page:

1. Le dimensionnement relatif (en %) par rapport à la largeur de la page (uniquement en largeur, c'est logique).
2. Le dimensionnement absolu (en pixels) (en largeur et en hauteur)

Le dimesionnement relatif

Pour cela, ajouter dans la balise <TABLE> la commande "WIDTH="75%"" (si on veut que le tableau prenne d'office 75% de la largeur de la page).

Le dimesionnement absolu

Pour cela, ajouter dans la balise <TABLE> les commandes

• "WIDTH=500" (si on veut que le tableau ait d'office 500 pixels de large).
• "WIDTH=300" (si on veut que le tableau ait d'office 300 pixels de haut).

Les colonnes, lignes, cellules

Il est possible de dimensionner de façon absolue:

• la largeur d'une colonne en ajoutant dans la balise "<TH>" ou, à défaut, dans la balise "<TD>" la commande "WIDTH=..."
• la hauteur d'une ligne en ajoutant dans la balise "<TH>" ou, à défaut, dans la balise "<TD>" la commande "HEIGHT=..."
• simultanément la largeur et la hauteur d'une ligne en ajoutant dans la balise "<TH>" ou, à défaut, dans la balise "<TD>" les deux commandes conjointes ci-dessus.

Ajouter de la couleur

Il est possible d'appliquer une couleur de fond:

• à tout le tableau en ajoutant dans la balise <TABLE> la commande "BGCOLOR=RED" par exemple.
• à toute une ligne en ajoutant dans la balise <TR> la commande "BGCOLOR=BLUE" par exemple.
• à une cellule en ajoutant dans la balise <TH> ou <TD> la commande "BGCOLOR=GREEN" par exemple.

Ajouter un arrière-plan

Il est possible d'ajouter une image de fond à un tableau en ajoutant dans la balise <TABLE> la commande "BACKGROUND="fleur.jpg"" par exemple.

Aligner les données

Horizontalement

Les données des cellules de titres sont automatiquement alignées au centre et les données des cellules normales sont automatiquement alignées à gauche.

Il est toutefois possible de changer cet alignement horizontal, et ceci pour une cellule particulière ou tout une ligne grâce aux commandes suivantes:

• Pour toute une ligne: ajouter à la balise <TR> la commande ALIGN=RIGHT par exemple, ou CENTER ou LEFT.
• Pour une cellule: ajouter à la balise <TD> la commande ALIGN=RIGHT pour des nombres par exemple, ou CENTER.

Verticalement

Un tableau peut posséder des cellules remplies à des niveaux divers (très remplies ou peu remplies). L'alignement vertical des contenus peut à ce moment se révéler important.

Une fois de plus, cet alignement peut être commandé pour une cellule isolément ou pour toute une ligne. On procédera comme suit:

A la balise adéquate (ligne ou colonne) ajouter la commande VALIGN=TOP pour le haut par exemple, ou BOTTOM ou MIDDLE.

Ajouter un petit titre

Il est possible d'ajouter un petit titre aux tableau en faisant suivre la balise <TABLE> par la balise <CAPTION>Mon titre</CAPTION>.

Gérer les passages à la ligne

Les passages à la ligne vont se faire "au petit bonheur la chance" dans les cellules.

Danx certains cas (dates, noms de personnes, de localités,...) on peut empêcher (pour autant que les mentions soient courtes) le passage à la ligne.

Ceci se fait pour une cellule à la fois en modifiant la balise de la façon suivante: <TD NOWRAP>.

◊ ◊ ◊

© Rupert Meurice de Dormale 2003