Les cellules 

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>

 

cellule1

cel. 2

3

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>

 

cellule1

cel. 2

3

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>

 

cellule1	cel. 2	3
cellule1	cel. 2	3

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>

 

cellule 1
cellule 1	cel 2	3

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>

 

cellule 1	cel 2	3
	cel 2	3

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 :

 

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>

 

Tarif au ../../..
Article 1	Ref 002	30fr

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">