Exercices HTML

www.rahmouni.ma

Tableaux
Thme
Ralisation de tableaux HTML. Utiliss sans bordure (bordure invisible), les tableaux sont aussi souvent utiliss pour :

mettre en page des lments (texte, images, champs d'un formulaire...) faire du multicolonne crer une "image multipart" (mosaque) avec des zones changeant d'aspect lorsque la souris passe dessus (voir exercice sur "Rollovers") placer une trame colore derrire du texte etc...

Remarque : les tableaux HTML sont correctement supports partir des versions de navigateurs Netscape 2 3 et IExplorer 2 3

Balises

Dbut tableau :

<TABLE BGCOLOR="couleur fond"

ALIGN="LEFT|RIGHT|CENTER" WIDTH="pixels ou %" CELLSPACING="larg.bords" BORDER="larg.ombrage" CELLPADDING="dtach.texte">

Dbut ligne :

<TR BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" WIDTH="pixels

ou

%">

Cellule titre :

<TH BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"

ou %" ROWSPAN="nb.lignes" COLSPAN="nb.col."> contenu cellule </TH> Cellule normale : <TD BGCOLOR="couleur" ALIGN="LEFT|RIGHT|CENTER"
WIDTH="pixels VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" WIDTH="pixels COLSPAN="nb.col.">

ou %" ROWSPAN="nb.lignes" contenu cellule </TD>

Fin de la ligne : </TR> Fin du tableau : </TABLE> On peut aussi dfinir une lgende associe au tableau : <CAPTION ALIGN="TOP|BOTTOM"> texte lgende </CAPTION>

Exercices HTML

www.rahmouni.ma

On peut vent. dfinir (depuis N6 et IE4) des lignes d'entte (rptes au haut de chaque page imprimes) :
<THEAD ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE">

une ou plusieurs lignes

<TR>...</TR> </THEAD> des lignes de corps du tableau :

<TBODY ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE">

une ou plusieurs lignes

<TR>...</TR> </TBODY> et des lignes de pied du tableau :

<TFOOT ALIGN="LEFT|CENTER|RIGHT|JUSTIFY|CHAR" CHAR="car" CHAROFF="longueur" VALIGN="TOP|MIDDLE|BOTTOM|BASELINE">

une ou plusieurs lignes

<TR>...</TR>

</TFOOT>

Exercices HTML

www.rahmouni.ma

Bordures fines
Quel que soit le navigateur utilis, on peut crer des tableaux avec des bordures fines en utilisant les attributsBORDER="1" (ombrage bordure) et CELLSPACING="0" (largeur bordure).
Par exemple le code suivant :
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" ALIGN="CENTER"> <TR> <TD>Bonjour</TD><TD>tout le monde !</TD> </TR> </TABLE>

donne : Bonjour tout le monde !

Couleur des bordures

Pour IE 3.0 et Mozilla 1.0 (mais hlas pas pour Netscape < 6), l'attribut BGCOLOR=... affecte non seulement la couleur de fond des cellules mais aussi la couleur des bordures. On peut ainsi par exemple dfinir un tableau ayant une bordure fine (de 1 pixel) rouge par le code suivant :
Par exemple le code suivant :
<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="1" BGCOLOR="red" ALIGN="CENTER"> <TR BGCOLOR="white"> <TD>Bonjour</TD><TD>tout le monde !</TD> </TR> </TABLE>

donne : Bonjour tout le monde !

Cependant pour faire les choses tout--fait proprement, ce qui n'est possible qu'avec des navigateurs supportant compltement les feuilles de style, il faudrait plutt utiliser les proprits CSS border-color: couleur; border-style: solid; border-collapse: collapse; associes aux rgles TABLE, TR, TH ou TD (voir ci-dessous).

Usage de proprits CSS

Le tableau ci-dessous s'affichera avec une bordure relief habituelle de 1 pixel dans les navigateurs Web ne supportant pas les
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2 STYLE="border-

Exercices HTML

www.rahmouni.ma

collapse: collapse; feuilles de style CSS, et avec une bordure rouge border: de 1px dans les navigateurs supportant CSS. 1px solid #ff0000;"> Les proprits utilises (border-collapse, border, <TR BGCOLOR="white"><TD> etc...) peuvent tre appliques aux Blabla blabla rgles TABLE, TR, TH ou TD. blabla... </TD></TR> Blabla blabla blabla bla blabla blabla blabla bla blabla blabla </TABLE>

Comme le montre l'exemple ci-dessous, des effets d'encadrement, de couleur, etc... peuvent tre obtenus dans de simples paragraphes (donc sans recourir aux tableaux) l'aide de proprits de feuilles de style CSS. Cela ne fonctionne bien videmment qu'avec les navigateurs de dernire gnration (i.e. supportant compltement CSS). Blabla blabla blabla bla blabla blabla bla blabla blabla blabla bla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla bla blabla blabla blabla bla blabla. blabla blabla blabla blabla

<P STYLE=" margin-left: 30px; width: 75%; color: blue; text-align: justify; background-color: #f5f5ff; border-style: solid; border-color: #00aaaa; border-left-color: #000088; border-width: 1px; border-left-width: 10px; padding: 2px; padding-left: 35px; "> Blabla blabla blabla... </P> <TABLE ALIGN=center BORDER=1 CELLSPACING=0> <TR onMouseOver="this.bgCol or='yellow'" onMouseOut="this.bgColo r='white'"> <TD>un</TD> <TD>deux</TD> </TR> <TR> <TD onMouseOver="this.bgCol or='lime'" onMouseOut="this.bgColo r='white'"> trois</TD> <TD onMouseOver="this.bgCol or='aqua'" onMouseOut="this.bgColo

Et l'exemple ci-dessous montre comment changer dynamiquement lacouleur d'arrireplan de lignes ou de cellules d'un tableau lorsque le curseur les survole. un deux trois quatre Une autre technique, base sur les feuilles de styles CSS, permettrait de faire la mme chose, pour toutes les lignes d'un tableau, simplement avec :
<STYLE TYPE="text/css"> <!-tr:hover { background-color: lightblue; } --> </STYLE>

Exercices HTML

www.rahmouni.ma

r='white'"> quatre</TD> </TR> </TABLE>

Exercices HTML

www.rahmouni.ma

Donne de l'exercice
Raliser le tableau ci-dessous :

celui-ci doit tre centr dans la page et occuper le 80% de la largeur de la fentre du navigateur largeur des bordures: 10 pixels (attribut CELLSPACING=); paisseur de l'ombrage: 3 pixels (attribut BORDER=); dtachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=) la premire colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur dans les 2 premires lignes d'en-tte et dans la premire colonne, le texte doit tre en gras et soulign ; dans les autres cellules, il doit tre en style normal et justifi gauche raliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule dfinir couleurs de fond placer une lgende au bas du tableau les balises </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les mettre
Aaaaaaaaaaaaa Nnnnnn Bbbbbbbb Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla Xxxxx Cccccccc

Un

Deux Yyyyy

Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Tableau 1 : abc def ghi jkl mno pqr stu vwx yz.

Exercices HTML

www.rahmouni.ma

Corrig de l'exercice
<CENTER><TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5"> <CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION> <TR BGCOLOR="RED" > <TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH> <TH COLSPAN="2">Aaaaaaaaaaaaa</TH> </TR> <TR BGCOLOR="GRAY"> <TH WIDTH="40%">Bbbbbbbb</TH> <TH WIDTH="40%">Cccccccc</TH> </TR> <TR> <TH BGCOLOR="GRAY">Un</TH> <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</TD> <TD VALIGN="TOP">Xxxxx</TD> </TR> <TR> <TH BGCOLOR="GRAY">Deux</TH> <TD VALIGN="BOTTOM">Yyyyy</TD> <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</TD> </TR> </TABLE></CENTER>