|
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 ou <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%>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>
</TABLE></CENTER>
Maintenant mettons de l'ordre dans les cellules.
| Ligne de tableau |
<TR align=left/center/right> |
horizontalement |
| <TR valign=top/middle/bottom> |
verticalement |
| Cellule de tableau |
<TD align=left/center/right> |
horizontalement |
| <TD valign=top/middle/bottom> |
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">
|
|
|
