Exercice HTML: Tableaux
Rédigé par GC Team, Publié le 08 Janvier 2012, Mise à jour le Jeudi, 15 Décembre 2022 20:27Participez au vote ☆☆☆☆☆★★★★★
Réaliser le tableau ci-dessous :
- celui-ci doit être centré dans la page et occuper le 80% de la largeur de la fenêtre du navigateur
- largeur des bordures: 10 pixels (attribut CELLSPACING=); épaisseur de l'ombrage: 3 pixels (attribut BORDER=); détachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=)
- la première colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur
- dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche
- réaliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule
- définir couleurs de fond
- placer une légende au bas du tableau
- les balises , , sont facultatives, mais il vaut mieux les mettre
Nnnnnn |
Aaaaaaaaaaaaa |
|
Bbbbbbbb |
Cccccccc |
|
Un |
Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla |
Xxxxx |
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. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |