Le langage Html
Les cellules de tableaux

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.

Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :
      • du texte
      • des images
      • des liens
      • des arrière-plans
      • et même des tableaux (eh oui!)

Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.
Largeur d'une cellule <TD width=?> en pixels
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes
<TD colspan=?>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?

<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

Impeccable! Prenons le même tableau mais avec 2 lignes.

<CENTER><TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE></CENTER>

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales.

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

Maintenant, il est temps de mettre de l'ordre dans les cellules.

Ligne de tableau <TR align=left/center/right>
<TR valign=top/middle/bottom>		 horizontalement
verticalement
Cellule de tableau <TD align=left/center/right>
<TD valign=top/middle/bottom>		 horizontalement
verticalement

A titre d'exemple, reprenons le tableau suivant :

avec quelques aménagements, il devient...

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center>Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR>
</TABLE></CENTER>

Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">

notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#0000FF">