Correction exercices les tableaux en HTML : Série 01
Correction exercices les tableaux en HTML : Série 01
-
Objectifs
- Etre capable de fusionner les cellules d’un tableau html en utilisant les propriétés “colspan” et “rowspan”.
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’activité
-
Solution
-
Exercice: 2
-
Énoncé
-
Solution
-
Exercice: 3
-
Énoncé
-
Solution
-
Exercice: 4
-
Énoncé
-
Solution
<!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 Série 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ées</td></tr>
<tr><td>Cellule simple</td></tr>
</tbody>
</table>
</center>
</body>
</html>-
Vous pouvez visualiser l’énoncé de l’exercice
<!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>-
Vous pouvez visualiser l’énoncé de l’exercice
<!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></tr>
</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.12</font></td></tr>
</tbody>
</table>
</center>
</body>
</html>-
Vous pouvez visualiser l’énoncé de l’exercice
<!DOCTYPE html>
<html>
<head>
<title>Alignments des cellules</title>
<style>
td { height: 100px; }
</style>
</head>
<body>
<table border="1" cellpadding="8" width="60%">
<caption><h3>Alignments des cellules</h3</caption>
<thead bgcolor="silver">
<tr>
<th></th>
<th>Left</th>
<th>Centered</th>
<th>Right</th>
</tr>
</thead>
<tbody>
<tr>
<th bgcolor="silver">Top</th>
<td style="text-align: left; vertical-align: top;color:red;"><img src="star.png" alt="">style="text-align: left; vertical-align: top;"</td>
<td style="text-align: center; vertical-align: top;color:blue;"><img src="star.png" alt="" >style="text-align: center; vertical-align: top;"</td>
<td style="text-align: right; vertical-align: top;color:green;"><img src="star.png" alt="" >style="text-align: right; vertical-align: top;"</td>
</tr>
<tr>
<th bgcolor="silver">Centered</th>
<td style="text-align: left; vertical-align: middle;color:yellow;"><img src="star.png" alt="" >style="text-align: left; vertical-align: middle;"</td>
<td style="text-align: center; vertical-align: middle;color:brown;"><img src="star.png" alt="" >style="text-align: center; vertical-align: middle;"</td>
<td style="text-align: right; vertical-align: middle;color:olive;"><img src="star.png" alt="" >style="text-align: right; vertical-align: middle;color:black;"</td>
</tr>
<tr>
<th bgcolor="silver">Bottom</th>
<td style="text-align: left; vertical-align: bottom;color:purple;"><img src="star.png" alt="" >style="text-align: left; vertical-align: bottom;"</td>
<td style="text-align: center; vertical-align: bottom;color:fushsia;"><img src="star.png" alt="" >style="text-align: center; vertical-align: bottom;"</td>
<td style="text-align: right; vertical-align: bottom;color:aqua;"><img src="star.png" alt="" >style="text-align: right; vertical-align: bottom;"</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" bgcolor="silver"> Utilisation des styles CSS</th>
</tr>
</tfoot>
</table>
</body>
</html>
