Chapitre 11 : Les cellules des tableaux

Nous avons encore du travail à faire en ce qui concerne l’étude des tables. Passons aux cellules avec des données supplémentaires en regardant les résultats du tableau.Les cellules incluent tous les éléments Html précédemment examinés.

• des images
• des liens
• des arrière-plans
• et des tableaux

Chaque table possède une esthétique distincte grâce aux couleurs attribuées à ses alvéoles. Les balises fonctionnent avec leurs propres directives spécifiques. En savoir plus en cliquant ci-dessous.

• Largeur d’une cellule <td width=?>/<td width=%>en pixels ou en pourcentage
• Fusion de lignes <td rwspan=?>
• Fusion de colonnes <td colspan=?>

En examinant des situations réelles est la meilleure façon de découvrir de nouvelles informations.

J’aimerais créer une table qui se trouve uniformément sur une ligne, avec trois colonnes égales et la largeur du tableaux est 60 % de la largeur du fenêtre

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

cellule1

cel. 2

3

Ajouter maintenant 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

On peut encore ajouter 2 lignes pour cette tableaux

<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

La première ligne doit couvrir toute la largeur de la ligne. Par conséquent, la première cellule doit s’étendre au-delà de sa zone assignée de 3. 

<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

Pour que mon travail reste cohérent, j’ai besoin que ma première colonne s’étende sur toute la hauteur de la colonne. Afin d’adapter plus de contenu, la cellule doit déborder sur deux cellules verticales supplémentaires.

<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

Mettant un peut d’ordre dans la cellules

• Ligne de tableau <tr align=left/right/center>/<tr valign=left/right/center> horizontalement ou verticalement
• Cellule de tableau <td align=left/right/center>/<td valign=left/right/center> horizontalement ou verticalement

Faisant un peut pratique

<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

Maintenant pour finaliser cette chapitre ,on vas mettre de la couleur de fond dans un cellule

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center bgcolor="#000088" style="color:#fff;">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