Les cellules des tableaux

Les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :

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=?>

EXEMPLES :

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

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

2. Résultat dans la fenetre du navigateur :

 

3. Ajoutons la balise de largeur de la cellule:

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

4. Résultat dans la fenetre du navigateur :

5. Prenons le même tableau mais avec 2 lignes.

<CENTER><TABLE width=45% border=1>
<TR>
<TD width=23%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=24%>3</TD>
</TR>
<TR>
<TD width=23%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=24%>3</TD>
</TR>
</TABLE></CENTER>

6. Résultat dans la fenetre du navigateur :

7. 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=45% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR>
<TD width=23%>cellule 1</TD>
<TD width=23%>cel 2</TD>
<TD width=24%>3</TD>
</TR>
</TABLE></CENTER>

8. Résultat dans la fenetre du navigateur :

9. 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=45% border=1>
<TR>
<TD width=23% rowspan=2>cellule 1</TD>
<TD width=23%>cel 2</TD>
<TD width=24%>3</TD>
</TR>
<TR>
<TD width=23%>cel 2</TD>
<TD width=24%>3</TD>
</TR>
</TABLE></CENTER>

10. Résultat dans la fenetre du navigateur :

11. 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

12. A titre d'exemple, reprenons le tableau précèdent :

13. avec quelques aménagements, il devient...

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

14. Résultat dans la fenetre du navigateur :

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

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

<CENTER><TABLE width=45% border=1>
<TR>
<TD colspan=3 align=center bgcolor="#0000FF">Tarif au ../../..</TD>
</TR>
<TR>
<TD width=23% >Article 1</TD><TD width=23%>Ref 002 </TD>
<TD width=24% align=right>30fr</TD>
</TR>
</TABLE></CENTER>

16. Résultat dans la fenetre du navigateur :