Introduction au HTML - 11

Les tableaux

Les effets de style et de mise en page sont relativement limités. Heureusement, il existe les tableaux.
A l'origine, créés pour représenter es séries de données, ils représentent l'unique moyen d'élaborer une mise en page de plus en plus sophistiquée.

La balise principale est : <TABLE>...</TABLE>. Elle définit les limites du tableau. Et peut contenir les options suivantes :

Option Valeur Fonction
BORDER= valeur numérique épaisseur du cadre
CELLSPACING= distance entre les cellules
CELLPADDING= distance entre le texte et les bords de la cellule.
BGCOLOR= #RRGGBB
(code couleur en hexadécimal RGB)

ou

name
(nom de la couleur en anglais)

 Couleur du fond
WIDTH= valeur numérique en pixel ou pourcentage par rapport aux dimensions de la fenêtre du navigateur. largeur du tableau
HEIGHT= hauteur du tableau
(certains navigateurs ne reconnaissent pas cette option)

A l'intérieur du tableau, il y a les lignes, définies par <TR>...</TR>). A l'intérieur des lignes, il ya les cellules : (<TD>...</TD>).

<TR> et <TD> peuvent contenir les options suivantes :

Option Valeur Fonction
ALIGN= LEFT alignement horizontal à gauche
CENTER alignement horizontal à centre
RIGHT alignement horizontal à droite
VALIGN= TOP alignement vertical en haut
MIDDLE alignement vertical au milieu
BOTTOM alignement vertical en bas
BGCOLOR= #RRGGBB
(code couleur en hexadécimal RGB)

ou

name
(nom de la couleur en anglais)

 Couleur du fond
WIDTH= valeur numérique en pixel ou pourcentage par rapport aux dimensions de la fenêtre du navigateur. largeur d'une cellule
(Uniquement TD)
HEIGHT= hauteur
(certains navigateurs ne reconnaissent pas cette option)

Nous pouvons reprendre et améliorer notre fichier "index.html"

<HTML>
<HEAD>
<TITLE>IUP - N&icirc;mes</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<TABLE BORDER=2 CELLPADDING=2 CELLSPACING=2 WIDTH=100% HEIGHT=100%>
<TR>
<TD>
<FONT SIZE="3" COLOR="blue">UPV</FONT>
</TD>
<TD>
<FONT SIZE="5" COLOR="#000000">Institut Universitaire Professionnalis&eacute; de N&icirc;mes</FONT>
</TD>
</TR>
<TR>
<TD>
Centre Universitaire Vauban<BR>Rue du Docteur Georges Salan 30021<BR>N&icirc;mes Cedex 1 </TD>
<TD>
<FONT SIZE="4" COLOR="#FF0000" FACE="Arial, Helvetica">M&eacute;tiers des Arts et de la Culture</FONT> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Pour obtenir ce résultat :

revenir suite...