Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

 

II. Les tableaux

Par Hugo ETIEVANT

  1. Dans quels cas utiliser les tableaux ?
  2. Les balises de base
  3. Que mettre dans un tableau
  4. Taille du tableau et des cellules
  5. Alignement du tableau et des cellules
  6. Bordures, espacements et marges
  7. Fusionner lignes et colonnes.
  8. Couleur et image de fond
  9. Encore plus...

Dans quels cas utiliser la balise <TABLE> ?

En premier lieu pour mettre en forme des tableaux de données mais aussi et surtout pour mettre en page son propre site web. En effet, on a tous eu besoin d'écrire du texte sur plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise <TABLE> permet de faire de la véritable mise en page et de construire des pages farfelues comme d'autres très sérieuses et rigoureuses. Toute charte graphique stricte comme fantaisiste a longtemps nécessité l'emploi des tableaux. Mais avec l'apparition des blocs DIV et des feuilles de styles, on peut désormais s'en passer.


Les balises de base

Le tableau se défini grace à la balise <TABLE> qui doit absoluement être refermée : </TABLE>. Les navigateurs internet chargent d'abord entièrement le tableau avant de l'afficher, c'est pourquoi il ne faut surtout pas oublier de refermer la balise <TABLE> car sinon votre tableau ne sera pas vu par les internautes. Il est également important de ne pas mettre en ligne des tableaux trops volumineux, préférez toujours plusieurs petits tableaux plutôt qu'un seul très gros et long à charger.

Comme dans un tableur, on parle de cellules constitutives d'un tableau. C'est-à-dire que l'intersection d'une colonne avec une ligne donne une cellule. Un tableau peut contenir une seule cellule, c'est-à-dire une seule colonne et une seule ligne ou bien autant de cellules que vous voudrez sachant que le nombre de colonnes peut être différents du nombre de lignes. On commencera dès maintenant à mettre une bordure aux tableaux pour les visualiser dans nos exemples grace à l'atribut BORDER.

Il faut commencer par ouvrir une balise <TR> pour commencer une ligne et la refermer </TR> pour terminer la ligne. Mais cela ne suffit toujous pas à la création d'un tableau car il faut également définir les colonnes. Et là, c'est un peu moins facile puisqu'il faut insérer entre les balises lignes autant de couple correspondant à la colonne qu'il y a de colonnes. Le couple <TD> et </TD> correspond à la colonne. A l'intérieur d'une ligne (couple <TR> </TR>), il faut placer autant de couples <TD> </TD> qu'il y a de colonnes dans le tableau. Attention ! il faut donc mettre un même nombre de colonnes dans chaque ligne.

Tableau minimal

Exemple de tableau à une seule cellule :

<TABLE BORDER>
<TR><TD>une seule cellule</TD></TR>
</TABLE>
une seule cellule

Lignes du tableau

Exemple de tableau à deux lignes et une colonne (deux cellules) :

<TABLE BORDER>
<TR><TD>première ligne</TD></TR>
<TR><TD>deuxième ligne</TD></TR>
</TABLE>
première ligne
deuxième ligne

Colonnes du tableau

Exemple de tableau à une ligne et deux colonnes (deux cellules) :

<TABLE BORDER>
<TR><TD>première colonne</TD><TD>deuxième colonne</TD></TR>
</TABLE>
première colonnedeuxième colonne

Exemple de tableau à trois lignes et deux colonnes (six cellules) :

<TABLE BORDER>
<TR><TD>ligne 1, colonne1</TD><TD>ligne1, colonne2</TD></TR>
<TR><TD>ligne 2, colonne1</TD><TD>ligne 2, colonne2</TD></TR>
<TR><TD>ligne 3, colonne1</TD><TD>ligne 3, colonne2</TD></TR>
</TABLE>
ligne 1, colonne1ligne 1, colonne2
ligne 2, colonne1ligne 2, colonne2
ligne 3, colonne1ligne 3, colonne2

Légende du tableau

L'envie peut vous prendre, pour un tableau de valeur, de lui donner une légende. Utilisez alors le couple : <CAPTION> </CAPTION> dont l'attribut ALIGN peut avoir comme valeur TOP : légende en haut du tableau (par defaut) ou BOTTOM : légende en bas du tableau. La légende d'un tableau est automatiquement centrée et en style par défaut.

Exemple de tableau avec une légende en haut :

<TABLE BORDER>
<CAPTION>légende en haut</CAPTION>
<TR><TD>première ligne</TD></TR>
<TR><TD>deuxième ligne</TD></TR>
</TABLE>
légende en haut
première ligne du tableau
deuxième ligne du tableau

Exemple de tableau avec une légende en bas:

<TABLE BORDER>
<CAPTION ALIGN="bottom">légende en bas</CAPTION>
<TR><TD>première ligne</TD></TR>
<TR><TD>deuxième ligne</TD></TR>
</TABLE>
légende en bas
première ligne du tableau
deuxième ligne du tableau

Légendes des colonnes

Il peut vous être nécessaire d'attribuer une légende à chacune de vos colonnes, procédez avec le couple <TH> </TH> que vous utliserez comme remplaçant de la colonne. Mais il vous faudra rajouter dans votre marquage une ligne virtuelle puisque ce couple simulant la colonne doit être placé dans une ligne. Ces légendes sont automatiquement centrées verticalement et horizontalement dans les cellules et en style gras.

Exemple de tableau deux colonnes légendées :

<TABLE BORDER>
<TR><TH>colonne 1</TH><TH>colonne 2</TH></TR>
<TR><TD>ligne1, colonne1</TD><TD>ligne1, colonne2</TD></TR>
<TR><TD>ligne2, colonne1</TD><TD>ligne2, colonne2</TD></TR>
</TABLE>
colonne 1colonne 2
ligne1, colonne1ligne1, colonne2
ligne2, colonne1ligne2, colonne2

Que mettre dans un tableau

Un tableau peut contenir du texte, des images, des vidéos, des formulaires, d'autres tableau... Presque toutes les balises HTML peuvent êtres inclusent dans une cellule : la mise en forme avec <FONT>, des images avec <IMG>, des formulaires avec <FORM>, etc.

Exemple de tableau contenant texte et image :

<TABLE BORDER>
<TR><TD>Le <B>CyberZoïde</B> Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>
Le CyberZoïde Qui Frétille

Taille du tableau et des cellules

Taille du tableau

Vous avez sans doute remarqué avec les exemples précédents que la taille des tableaux varie sans qu'il soit spécifier d'attribut correspondant. En fait, le navigateur calcul de manière automatique la taille du tableau selon la loi du meilleur est le minimum. La taille du tableau sera d'autant plus grande que celle des cellules le sont.

On peut tout de même forcer le navigateur à donner telle ou telle taille au tableau. Cette taille est exprimée au choix en pixel ou en pourcentage de l'espace libre dans la fenêtre. Vous pouvez donc spécifier de manière précise la largueur : WIDTH=x et la hauteur : HEIGHT=y de votre tableau en sachant pertinament que le navigateur calcule la taille des cellules en conséquence. Il vous est tout a fait possible de ne spécifier qu'une seule de ces dimensions ou même aucune. Ces deux attributs sont valables pour les balises <TABLE>, <TH>, et <TD>.

Exemple de tableau ayant une taille de 100x100 pixels :

<TABLE BORDER WIDTH=100 HEIGHT=100>
<TR><TD>Le CyberZoïde Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>
Le CyberZoïde Qui Frétille

Exemple de tableau ayant une taille de 300x100 pixels :

<TABLE BORDER WIDTH=300 HEIGHT=100>
<TR><TD>Le CyberZoïde Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>
Le CyberZoïde Qui Frétille

Exemple de tableau ayant une taille relative de 30% en largueur :

<TABLE BORDER WIDTH=30%>
<TR><TD>Le CyberZoïde Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>
Le CyberZoïde Qui Frétille

Taille des cellules

De la même manière que l'on peut fixer la taille d'un tableau, on peut en faire autant de chaque lignes et colones, sachant que si le tableau lui-même n'a pas de dimensions fixées, le navigateur calculera automatiquement sa taille en fonction des cellules. Si on spécifie la hauteur d'une cellule, toutes les autres cellules de la même ligne auront la même hauteur. Si on spécifie la largeur d'une cellule, toutes les autres cellules de la même colonne auront la même largueur.

Exemple :

<TABLE BORDER>
<TR><TD>Hello every body on this world !</TD>
<TD>Bonjour !</TD></TR>
<TR><TD WIDTH=60 HEIGHT=150>cellule de 60x150 pixels</TD>
<TD> </TD></TR>
</TABLE>
Hello every body on this world !Bonjour !
cellule de 60x150 pixels 

Alignement du tableau et des cellules

Alignement du tableau

On peut aligner le tableau horizontalement grace à l'attribut ALIGN qui peut avoir pour valeur : LEFT, MIDDLE et RIGHT qui ont pour effets respectifs d'aligner le tableau à gauche, au milieu ou à droite dans la page, ce premier étant l'alignement par défaut.

Exemples :

<TABLE BORDER ALIGN="left">
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde
<TABLE BORDER ALIGN="middle">
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde
<TABLE BORDER ALIGN="right">
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde

Alignement des cellules

En plus d'aligner le tableau au sein de la page, il nous est offert de pouvoir aligner les données à l'intérieur des cellules grace aux attributs ALIGN pour l'alignement horizontal et VALIGN pour la verticale. Ce premier peut avoir pour valeurs : LEFT (aligné à gauche, par defaut), CENTER (centré horizontalement) et RIGHT (aligné à droite). Le deuxième peut se voir affecter les valeurs suivantes : TOP (aligné en haut), MIDDLE (centré verticalement, par defaut), BOTTOM (aligné en bas) et BASELINE (basé sur la ligne) .

Exemples :

<TABLE BORDER>
<TR><TD>alignement par défaut</TD>
<TD VALIGN="
top">aligné en haut</TD></TR>
<TR><TD ALIGN="left">aligné à gauche</TD>
<TD VALIGN="
middle">centré verticalement</TD></TR>
<TR><TD ALIGN="center">centré horizontalement</TD>
<TD VALIGN="
bottom">aligné en bas</TD></TR>
<TR><TD ALIGN="right">aligné à droite</TD>
<TD VALIGN="
baseline">basé sur la ligne</TD></TR>
</TABLE>
alignement par défautaligné en haut
aligné à gauche
(par défaut)
centré verticalement
(par défaut)
centré
horizontalement
aligné en bas
aligné à droitebasé sur la ligne

Bordures, espacements et marges

Bordures du tableau

Dès le début de cette page, nous n'avons utiliser que des exemples ou les tableaux avaient une bodure définie par l'attribut BORDER auquel on ne donna aucune valeur (par défaut, c'est la valeur 1 qui lui est donné). Il est tout à fait envisageable de ne pas mettre de bordure à un tableau en ne spécifiant pas l'attribut BORDER ou en lui donnant la valeur zero. On peut aussi préférer une bordure plus grosse d'une épaisseur exprimée en pixels selon la syntaxe : BORDER=d. A noter que la bordure interne aux cellules n'est pas modifiable.

Exemples :

<TABLE>
<TR><TD>ligne 1, colonne1</TD><TD>ligne1, colonne2</TD></TR>
<TR><TD>ligne 2, colonne1</TD><TD>ligne 2, colonne2</TD></TR>
<TR><TD>ligne 3, colonne1</TD><TD>ligne 3, colonne2</TD></TR>
</TABLE>
ligne 1, colonne1ligne 1, colonne2
ligne 2, colonne1ligne 2, colonne2
ligne 3, colonne1ligne 3, colonne2
<TABLE BORDER>
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde
<TABLE BORDER=1>
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde
<TABLE BORDER=3>
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde
<TABLE BORDER=20>
<TR><TD>CyberZoïde</TD></TR>
</TABLE>
CyberZoïde

La couleur de bordure est automatiquement conditionnée par les paramètres Windows mais on peut la modifier à notre guise grace à l'attribut BORDERCOLOR (couleur générale dont le caractère ombrée en découlera).

Exemples :

<TABLE BORDER=5 BORDERCOLOR="red">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER=10 BORDERCOLOR="#FFFF00">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille

Espacement entre cellules

Par souci de clarté, on peur vouloir espacer les cellules grace à l'attribut CELLSPACING=n dont la valeur n définit l'espacement en pixels entre chaque cellules d'un tableau. Par defaut, n=2.

Exemples :

<TABLE BORDER CELLSPACING=0>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER CELLSPACING=1>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER CELLSPACING=2>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER CELLSPACING=5>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER=2 CELLSPACING=20>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille

Marges internes aux cellules

On peut également spécifier des marges à l'intérieur des cellules afin d'espacer les données du bord des cellules grace à l'attribut CELLPADDING=q dont la valeur q est exprimé en pixels. Par defaut, q=1.

Exemples :

<TABLE BORDER CELLPADDING=0>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER CELLPADDING=1>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER CELLPADDING=5>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER=2 CELLPADDING=20>
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille

Fusionner lignes et colonnes.

Un atout très intéressant : pouvoir fusionner des cellules au niveau d'une ligne ou d'une colonne ou même les deux grace aux attributs respectifs COLSPAN=x et ROWSPAN=y où x et y représentent le nombre de cellules à fusionner sur l'axe des lignes ou des colonnes. Ces attributs sont valables pour les balises <TD> et <TH>. Attention ! surtout ne pas oublier de ne pas écrire le couple <TD> </TD> correspondant à une cellule que l'on aura fusionnée avec une autre écrite précédement.

Exemples :

<TABLE BORDER>
<TR><TD ROWSPAN=2>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui Frétille</TD></TR>
</TABLE>
LeCyberZoïde
Qui Frétille
<TABLE BORDER>
<TR><TD COLSPAN=2>Le CyberZoïde</TD></TR>
<TR><TD>Qui</TD>Frétille</TD></TR>
</TABLE>
Le CyberZoïde
QuiFrétille
<TABLE BORDER>
<TR><TD COLSPAN=3>o</TD><TD>o</TD></TR>
<TR><TD ROWSPAN=3>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD>o</TD><TD COLSPAN=2 ROWSPAN=2>o</TD></TR>
<TR><TD>o</TD></TR>
</TABLE>
oo
oooo
oo
o

Couleur et image de fond

Couleur de fond de tableau et de cellule

Il est également permis de mettre une couleur de fond à un tableau ou à une cellule grace à l'attribut BGCOLOR dont la valeur est soit le code hexadécimal correspondant, soit l'identifiant anglophone.

Exemples :

<TABLE BORDER BGCOLOR="#C0C0C0">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER BGCOLOR="red">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER=0 BGCOLOR="red">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR="red">
<TR><TD>Le</TD><TD>CyberZoïde</TD></TR>
<TR><TD>Qui</TD><TD>Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille
<TABLE BORDER>
<TR><TD BGCOLOR="yellow">Le</TD><TD BGCOLOR="white">CyberZoïde</TD></TR>
<TR><TD BGCOLOR="green">Qui</TD><TD BGCOLOR="pink">Frétille</TD></TR>
</TABLE>
LeCyberZoïde
QuiFrétille

Image de fond de tableau et de cellule

Il est également permis de mettre une image de fond à un tableau (totalité des cellules) ou à une seule cellule (ou plusieurs) grace à l'attribut BACKGROUND dont la valeur est l'URL du fichier image.

Exemples :

<TABLE BORDER CELLPADDING=10 BACKGROUND="image.gif">
<TR><TD><FONT COLOR="white"><B>Le CyberZoïde</TD></TR>
<TR><TD><FONT COLOR="white"><B>Qui Frétille</TD></TR>
</TABLE>
Le CyberZoïde
Qui Frétille
<TABLE BORDER CELLPADDING=10 BGCOLOR="black">
<TR><TD BACKGROUND="image.gif"><FONT COLOR="white"><B>Le CyberZoïde</TD></TR>
<TR><TD><FONT COLOR="white"><B>Qui Frétille</TD></TR>
</TABLE>
Le CyberZoïde
Qui Frétille

Encore plus...

Si vous mettez du texte ou des balises entre deux balises </TD> <TD> ou </TR> <TR>, alors ils seront interprétés mais hors du tableau (avant le tableau).

Chaque style appliqué au texte d'une cellule ne se répercute pas au reste du tableau. C'est-à-dire que les attributs des balises <FONT>, <P>, etc. utilisées dans une cellule ne sont plus valables pour les autres cellules. Il vous faudra alors insérer ces balises de mises en forme dans chacune des cellules du tableau si votre charte graphique le nécessite.

Si une ou plusieurs de vos cellules ne contiennent aucune donnée, insérez-y tout de même un espace sinon la cellule apparaitra sans bordure.

Exemples :

<TABLE BORDER>
<TR><TD>Le CyberZoïde</TD><TD>Qui</TD></TR>
<TR><TD>Frétille</TD><TD></TD></TR>
</TABLE>
Le CyberZoïdeQui
Frétille
<TABLE BORDER>
<TR><TD>Le CyberZoïde</TD><TD>Qui</TD></TR>
<TR><TD>Frétille</TD><TD> </TD></TR>
</TABLE>
Le CyberZoïdeQui
Frétille 

Maintenant vous savez tout. En combinant tout ce que vous avez vu ci-haut, vous pouvez faire une mise page du tonnerre.

Exemple :

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=5 WIDTH=70% ALIGN="center">
<TR><TD BGCOLOR="#FFFFB0"><I>La bordure d'un tableau</I></TD><TD BGCOLOR="#FFFFB0" ALIGN="right"><CODE>TABLE</CODE></TD></TR>
<TR><TD COLSPAN=2>faites comme ça...</TD></TR>
</TABLE>

La bordure d'un tableauTABLE
faites comme ça...
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -