TP 3

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 "exercice1.html"
dans le répertoire TP3.
3- Dans "exercice1.html", 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
Exercice 2 :
 Dans un répertoire dédié aux exercices, créer une page HTML nommée "tableau.html" 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
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
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
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
<!doctype html>
<html>
<thead>
<meta charset="utrf-8">
</thead>
<body>
<center>
<h3>Exercices 02</h3>

<caption>Planning des tâches par équipe</caption>
<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>
colspan='3'>Tâche2</td></tr>

colspan='3'>Tâche4</td><td>Tâche5</td> <td rowspan='2'>semaine 2</td></tr>


</tbody>
</table>
</center>
</body>
</html>
6
<!doctype html>
<html>
<thead>
<meta charset="utrf-8">
</thead>
<body>
<center>
<h3>Exercices 03</h3>

<caption>Calcul de la moyenne</caption>
<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
Solution
<html>
<li><a href="contact.html">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="accueil.html">Accueil</a></l
bgcolor="#EE6600">
i>
<li><a
href="presentation.html">Présentation</a></l
8
<font color="#FFFFFF"><font face="verdana" size="1">

Webmaser © 2015
</font>
</td>
</tr>
</table>
</body>
</html>

TP 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP 3

Transféré par

Droits d'auteur :

Formats disponibles

TP 3 Mme ISSAOUI Hadhami

TP3 LES TABLEAUX EN HTML

1- Créer un sous-répertoire nommé TP3 sous votre dossier personnel.

On souhaite créer une page Web qui ressemble à ceci:

Je vous donne des indices :

 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

<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">

<tr><td bgcolor="silver">Equipe1</td><td colspan='1'>Tâche3</td><td

<tr><td bgcolor="silver">Equipe1</td><td colspan='2'>Tâche1</td><td

<tr><td bgcolor="silver">Equipe1</td><td colspan='3'>Tâche7</td><td

<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">

<font color="#FFFFFF"><font face="verdana" size="1">

Vous aimerez peut-être aussi