html007

Les cours HTML

1. Structure d'un document HTML
2. Le traitement du texte
3. Listes d'élément
4. Les liens hypertextes
5. Les images
6. Attributs de présentation
7. Les tableaux
8. Les frames
9. Concept avancé

---

Nous abordons ici la partie la plus délicate mais aussi la plus intéressante du point de vue de la présentation. Les tableaux permettent des possibilités d'alignement que les autres éléments du Html n'autorisent pas.

Balises de base
 

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

Le marqueur <TABLE> initialise le tableau. Il possède tout un tas de paramètres qui peuvent donner ses caractéristiques. Par exemple, ici BORDER donne l'épaisseur du bord des cellules et du tableau.
La marqueur <TR>, lui, débute une ligne d'un tableau, le marqueur <TD> quant à lui débute une cellule. Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

Les cellules

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.

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>

cellule1

cel. 2

3

Ou : <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

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>

cellule1	cel. 2	3
cellule1	cel. 2	3

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 : c’est de la fusion.

<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

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>

cellule 1	cel 2	3
	cel 2	3

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 :

cellule 1
cellule 1	cel 2	3

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>

Tarif au ../../..
Article 1	Ref 002	30fr

Il est également 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="#000088">

Tarif au ../../..
Article 1	Ref 002	30fr

Attributs des balises <TABLE> <TR> et <TD>

Les paramètres du marqueur TABLE sont les suivants:

• BGCOLOR="Couleur"
indique la couleur de fond du tableau
• ALIGN= LEFT | RIGHT, HSPACE
et VSPACE ont la même signification que pour le marqueur IMG
• CELLPADDING="Pixels"
détermine la marge d'une cellule. Cette marge est la même de tous les cotés de chaque cellule.
• CELLSPACING="Pixels"
détermine la largeur en pixels entre chacune des cellule (à l'extérieur de la cellule).
• WIDTH
et HEIGHT sont censés donner la taille du tableau, soit en pixels, soit en pourcentage de la page.

Les paramètres du marqueur TR sont les suivants:

• BGCOLOR="Couleur"
indique la couleur de fond de la ligne
• ALIGN= LEFT | RIGHT | CENTER
indiquent l'alignement horizontal à l'interieur de chacune des cellules de la ligne (comme DIV
• VALIGN= BOTTOM|MIDDLE|TOP
indiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré

Les principaux paramètres du marqueur TD sont les suivants:

• BGCOLOR="Couleur"
indique la couleur de fond de la cellule
• ALIGN= LEFT | RIGHT | CENTER
indiquent l'alignement horizontal à l'interieur de la cellule(comme DIV
• VALIGN= BOTTOM|MIDDLE|TOP
indiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré
• COLSPAN=x
permet à une cellule d'occuper plusieurs colonnes consécutives. (voir exemple plus loin)
• ROWSPAN=x
permet à une cellule d'occuper plusieurs lignes consecutives (voir exemple plus loin)

A noter la présence d'un marqueur supplémentaire <CAPTION ALIGN=BOTTOM|TOP> qui permet de mettre un Titre au tableau. Son paramètre indique si le Titre doit être avant (TOP) ou après (BOTTOM) le tableau.