TP4 html Tableaux - Université Paris 8

TP4 html Tableaux
Vous allez créer une page, appelée Tableaux.html, qui fera apparaître plusieurs tableaux
(exercices). Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie.
Pour cela, enregistrez votre fichier et réactualiser la page dans le navigateur.
EXERCICE 1
•
Vous réaliserez un tableau, centré, similaire au tableau ci-dessous :
Cellule 1
Cellule 2
Cellule 3
Cellule 4
Cellule fusionnée sur 4 colonnes
Cellule 6
Cellule 7
Cellule 8
Cellule 9
•
Une ligne séparatrice de 200 pixels de large
•
Vous réaliserez un tableau, centré, similaire au tableau ci-dessous :
Cellule 1
(jaune)
Cellule 3
(gris clair)
Cellule 2
(bleu pale)
Cellule 4
(gris)
Fusion de 2
lignes
(blanc/noir)
EXERCICE 2
1. Crée un tableau à 3 colonnes et 2 rangées;
a. La bordure sera de 3;
b. L'espace dans chaque cellule sera de 3; (CELLPADDING)
c. L'espace entre les cellules sera de 2; (CELLSPACING)
d. La largeur du tableau sera de 80 %;
e. Le tableau portera ce titre: Tableau no 1;
f. L'arrière-plan du tableau sera de couleur jaune.
2. Dans la cellule 1, écris ces mots: Rangée 1, cellule1.
3. Dans la cellule 2, écris ces mots avec la police Comics Sans MS1: Rangée 1, cellule 2.
4. Dans la cellule 3, insère l'image arbre.gif
5. Dans la cellule 4, écris ces mots sur un arrière-plan gris: Rangée 2, cellule 4.
6. Fusionne les cellules 5 et 6 et écris ces mots en gras et centrés: Rangée 2, cellules 5 et 6.
7. Sauvegarde le fichier et visualise-le.
1
<FONT FACE="Comic Sans MS">
1
EXERCICE 3
Réaliser le tableau ci-dessous :
•
celui-ci doit être centré dans la page et occuper le 60% de la largeur, 60% de longueur
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(20%) de largeur, 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 ; 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 </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les
mettre
2
1) Changer les paramètres des attributs du tableau y compris cellules et rangée :
•
•
•
•
•
•
•
BGCOLOR
CELLSPACING
BORDER
WIDTH
COLSPAN
ROWSPAN
ALIGN
2) Indiquer l’utilité de chaque attribut et son influence sur la structure de tableau.
3) Insérer des images dans les cellules de tableau (à télécharger sur le net)
4) Eliminer l’espace entre les cellules afin d’obtenir un tableau avec des traits.
5) Rendre transparent le tableau.
3