Le langage Html

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>

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


|