Chapitre 12 : Les cellules des tableaux

Chapitre 12 : Les cellules des 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 tableaux 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>

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>

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, comme le disait un gardien de prison de mes connaissances, il est temps de mettre de l'ordre dans les
cellules [Je n'ai pas pu résister...].
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 :

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="#000088">