TP 3 Mme ISSAOUI Hadhami
TP3 LES TABLEAUX EN HTML
Objectifs :
- Utiliser les balises caption, thead, tbody et tfoot pour mieux structurer un tableau en HTML.
- Etre capable de fusionner les cellules d’un tableau HTML en utilisant les propriétés
"colspan" et "rowspan".
Exercice 1 :
1- Créer un sous-répertoire nommé TP3 sous votre dossier personnel.
2- On se propose de créer une page web pour le texte suivant, sous le nom "[Link]"
dans le répertoire TP3.
3- Dans "[Link]", réaliser le tableau ci-dessous avec les contraintes suivantes :
Celui-ci doit être centré dans la page et occuper le 40% de la largeur de la fenêtre
du navigateur.
Largeur des bordures : 6 pixels (attribut CELLSPACING=) ; épaisseur de l’ombrage : 2
pixels (attribut Border=) ; détachement du texte par rapport aux bords : 4 pixels
(attribut CELLPADDING=)
La première ligne est l’entête du tableau avec une couleur d’arrière plan "Silver".
Réaliser l’alignement du texte suivant les données des cellules.
Placer une légende au bas du tableau.
1
TP 3 Mme ISSAOUI Hadhami
Exercice 2 :
Dans un répertoire dédié aux exercices, créer une page HTML nommée "[Link]" en
utilisant les nouveaux éléments cités dans le cours.
Créer le tableau suivant en utilisant les propriétés de fusion "colspan" et "rowspan".
2
TP 3 Mme ISSAOUI Hadhami
Exercice 3 :
Utiliser les éléments caption, thead, tbody et tfoot pour afficher les données dans un tableau
structuré de la façon suivante :
Celui-ci doit être centré dans la page et occuper le 60% de la largeur de la fenêtre du
navigateur.
Largeur des bordures : 8 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 ligne est l’entête du tableau avec une couleur d’arrière plan "Silver".
Réaliser l’alignement du texte suivant les données des cellules.
3
TP 3 Mme ISSAOUI Hadhami
Exercice 4 :
Enoncé
On souhaite créer une page Web qui ressemble à ceci:
Accueil Exercice
Présentation
Cet exercice permet de mettre en pratique les balises que
Activités nous avons vu jusqu'ici.
N'attendez pas à ce que le design soit épatant! En effet, il
Contact
reste encore du chemin à faire avant de réussir une page
Web parfait avec un design agréable.
Webmaser © 2015
Je vous donne des indices :
La police utilisée est "verdana", sauf pour les liens qui ont la police par défaut.
Le code de la couleur utilisée pour le titre est #003569.
L'image de la bannière mesure 100% de la page.
Le menu est structuré sous forme de liste.
Le code de la couleur d'arrière plan du menu est #EEEEEE
Le code de la couleur d'arrière plan du bas de page est #FF6600
4
TP 3 Mme ISSAOUI Hadhami
Correction Exercice 1 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Les tableaux</title>
</head>
<body>
<center>
<table border="2" width="40%" CELLSPACING="6" CELLPADDING="4">
<caption>Exercice 01 les tableaux en HTML</caption>
<thead bgcolor="silver">
<tr><th>titre01</th><th>titre02</th><th>titre03</th></tr>
</thead>
<tbody>
<tr><td>Cellule simple</td><td>Cellule simple</td><td>Cellule simple</td></tr>
<tr><td colspan="2">Deux colonnes assemblées</td><td>Cellule simple</td></tr>
<tr><td>Cellule simple</td><td>Cellule simple</td><td rowspan="2">Deux lignes assemblées</td></tr>
<tr><td>Cellule simple</td><td>Cellule simple</td></tr>
<tr><td>Cellule simple</td><td colspan="2" rowspan="2">Deux lignes assemblées et deux colonnes assembl
<tr><td>Cellule simple</td></tr>
</tbody>
</table>
</center>
</body>
</html>
5
TP 3 Mme ISSAOUI Hadhami
Correction Exercice 2 :
<!doctype html>
<html>
<thead>
<meta charset="utrf-8">
<title>Les tableaux</title>
</thead>
<body>
<center>
<h3>Exercices 02</h3>
<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">
<caption>Planning des tâches par équipe</caption>
<thead bgcolor="silver">
<tr><th rowspan='2'>Equipes</th><th colspan='5'>Janvier</th><th
rowspan='2'></th></tr>
<tr><th>Lundi</th><th>Mardi</th><th>Mrcredi</th><th>Jeudi</th><th>Vendreredi
</th></tr>
</thead>
<tbody>
<tr><td bgcolor="silver">Equipe1</td><td colspan='3'>Tâche1</td><td
colspan='2'>Tâche2</td><td rowspan='2'>semaine 1</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche1</td><td
colspan='3'>Tâche2</td></tr>
<tr><td bgcolor="silver">Equipe1</td><td colspan='1'>Tâche3</td><td
colspan='3'>Tâche4</td><td>Tâche5</td> <td rowspan='2'>semaine 2</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche3</td><td
colspan='3'>Tâche3</td></tr>
<tr><td bgcolor="silver">Equipe1</td><td colspan='2'>Tâche1</td><td
colspan='3'>Tâche2</td><td rowspan='2'>semaine 3</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='1'>Tâche1</td><td
colspan='4'>Tâche2</td></tr>
<tr><td bgcolor="silver">Equipe1</td><td colspan='3'>Tâche7</td><td
colspan='2'>Tâche8</td><td rowspan='2'>semaine 4</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche7</td><td
colspan='3'>Tâche8</td></tr>
</tbody>
</table>
</center>
</body>
</html>
6
TP 3 Mme ISSAOUI Hadhami
Correction Exercice 3 :
<!doctype html>
<html>
<thead>
<meta charset="utrf-8">
<title>Les tableaux</title>
</thead>
<body>
<center>
<h3>Exercices 03</h3>
<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">
<caption>Calcul de la moyenne</caption>
<thead bgcolor="silver">
<tr><th>Matière</th><th>Note par matière</th><th>Coefficient</th><th>Note*Coefficient</th></
</thead>
<tbody>
<tr><td bgcolor="silver">Matématiques</td><td>17</td><td>4</td><td>68</td></tr>
<tr><td bgcolor="silver">Physique</td><td>15</td><td>3</td><td>45</td></tr>
<tr><td bgcolor="silver">Informatique</td><td>16</td><td>2</td><td>32</td></tr>
<tr><td colspan='2' bgcolor="silver">Totaux</td><td>9</td><td>145</td></tr>
<tr bgcolor="silver"><td colspan='3'><font color='blue'>Moyenne</font></td><td><font color='blue'>16
</tbody>
</table>
</center>
</body>
</html>
7
TP 3 Mme ISSAOUI Hadhami
Correction Exercice 4 :
Solution
<html>
<li><a href="[Link]">Contact</a></li>
<head></ul>
<title>Mon code amélioré</title>
</td>
</head>
<td width="70%" valign="top">
<body><h2>
<table border="0"
<font width="100%"
face="verdana" color="#003569">
cellspacing="4" cellpadding="0">
Exercice
<tr>
</font>
</h2><td colspan="2">
<font face="verdana" size="2">
<img src="images/arr_bannp.png"
Cet
width="100%"> exercice permet de mettre en pratique les
balises que nous avons vu jusqu'ici.<br>
</td>
N'attendez pas à ce que le design soit épatant! En
effet, </tr>
il <tr>
reste encore du chemin à faire avant de réussir une
page Web parfait avec<tdunwidth="30%"
design <b>agréable</b>.
valign="top"
</font> bgcolor="#EEEEEE"
height="200">
</td>
</tr> <ul>
<tr> <li><a
<td colspan="2" align="center" height="40"
href="[Link]">Accueil</a></l
bgcolor="#EE6600">
i>
<li><a
href="[Link]">Présentation</a></l
8
TP 3 Mme ISSAOUI Hadhami
<font color="#FFFFFF"><font face="verdana" size="1">
Webmaser © 2015
</font>
</td>
</tr>
</table>
</body>
</html>
