Les tableaux
1. Les balises de création d’un tableau
En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.
Les balises de base sont donc :
Définition du tableau
| [Table]
| <TABLE></TABLE>
| Début et fin de tableau
|
Définition d'une ligne
| [Table Row]
| <TR></TR>
| Début et fin de ligne
|
Définition d'une cellule
| [Table Data]
| <TD></TD>
| Début et fin de cellule
|
Exemple : Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
2. Les propriétés de la balise <table>
Définir une bordure :
Bordure de cadre [Border], comme par exemple : <TABLE border=?></TABLE>
Concrètement on écrit :
<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Définir la largeur et la hauteur :
Pour spécifier les dimensions d’un tableau, on peut utiliser les deux attributs HEIGHT (« hauteur ») et WIDTH (« largeur ») de la balise <TABLE>. On peut renseigner la hauteur et la largeur suivant deux unités. Si on donne une valeur entière, c’est de pixels qu’il s’agit, mais si on fait suivre la valeur d’un signe %, il s’agit alors d’un pourcentage par rapport au conteneur (comme ça : <TABLE width=?> <TABLE width=%>).
Exemple :
Un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes.
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>
Définir l’espacement :
Pour l'espace entre les cellules ou l'épaisseur des lignes du quadrillage on utilise : <TABLE cellspacing=?>
Pour l'enrobage des cellules ou l'espace entre le bord et le contenu on utilise : <TABLE cellpadding=?>
Exemple 1 :
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Exemple 2 :
<TABLE border=2 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Définir la couleur de fond :
Pour définir la couleur de fond d’un tableau on utilise : <TABLE bgcolor =?>
Exemple :
<table border=”1” cellpadding=”2” cellspacing=”0” bgcolor="#E6FFE6" >
3 Les propriétés des cellules d’un tableau
Les cellules d’un tableau peuvent contenir tous les éléments Html comme :
• du texte
• des images
• des liens
• et même des tableaux
Définir la largeur et la hauteur d’une cellule:
Largeur d'une cellule se définit par :
<TD width=?> en pixels
<TD width=%> en pourcentage
Hauteur d'une cellule se définit par :
<TD height=?> en pixels
<TD height=%> en pourcentage
Il est à noter que l’attribut WIDTH de <TR> n’a aucun effet puisque toutes les lignes d’un tableau ont la même largeur : celle du tableau à quelques pixels près, suivant le navigateur
Exemple : Un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales.
<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>
Les opérations de fusion:
La fusion de lignes se fait par : <TD rowspan=?>
La fusion de colonnes se fait par : <TD colspan=?>
Exemple 1 : Un tableau de 2 lignes, avec une première ligne qui 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>
Exemple 2 : Un tableau de 2 lignes, avec une première colonne qui 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>
Alignement dans une cellule:
Ligne de tableau :
Pour aligner une ligne de tableau horizontalement : <TR align=left/center/right>
Pour aligner une ligne de tableau verticalement : <TR valign=top/middle/bottom>
Cellule de tableau :
Pour aligner une cellule de tableau horizontalement : <TD align=left/center/right>
Pour aligner une cellule de tableau horizontalement : <TD valign=top/middle/bottom>
Exemple :
<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>
Définir la couleur de fond :
Pour définir la couleur de fond d’une ligne : <TR bgcolor =?>
Pour définir la couleur de fond d’une colonne : <TR bgcolor =?>
Exemple :
<TD colspan=3 align=center bgcolor="red">