|
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 à 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, 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>
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">
|
NewsLetter