institue superieur d’etude technologique de gafsa
Compte rendu
Tp3
Elaa elhaj
14/10/2025
CONNAITRE comment utiliser un tableau en html
1. Exercice 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iset gafsa</title>
</head>
<body>
<table border="2">
<tr>
<th>Logo</th>
<th>Institut</th>
<th>Email</th>
</tr>
<tr>
<td>
<a href="[Link] <img src="[Link]" alt="ISET Gafsa" width="150"
lentgh="200"></a>
</td>
<td>Institut Supérieur des Études Technologiques de Gafsa</td>
<td><a href="[Link]
</tr>
<tr>
<td>
<a href="[Link] <img src="iset_sfax.png" alt="ISET Sfax" width="150"
lentgh="200"></a>
</td>
<td>Institut Supérieur des Études Technologiques de Sfax</td>
<td><a href="[Link]
</tr>
<tr>
<td>
<a href="[Link] <img src="iset_tozeur.png" alt="ISET Tozeur" width="150"
lentgh="200"></a>
</td>
<td>Institut Supérieur des Études Technologiques de Tozeur</td>
<td><a href="[Link]
</tr>
<tr>
<td>
<a href="[Link]/fr/"><img src="iset_kasserine.png" alt="ISET Kasserine" width="150"
lentgh="200"></a>
</td>
<td>Institut Supérieur des Études Technologiques de Kasserine</td>
<td><a href="[Link]
</tr>
</table>
</body>
</html>
Resultat :
2
2. Exercice2
3. <!DOCTYPE html>
4. <html lang="en">
5. <head>
6. <meta charset="UTF-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
8. <title>Document</title>
9. <style>
10. th, .t {
11. background-color: gray;
12. }
13.
14. td, th {
15. border: 1px solid black;
16. padding: 5px;
17. }
18. </style>
19. </head>
20. <body>
21. <table>
22. <caption>Planning des taches par équipe</caption>
23. <tr>
24. <th rowspan="2">Equipes</th>
25. <th colspan="5">Janvier</th>
26. <th rowspan="2"></th>
27. </tr>
28. <tr>
29. <th>Lundi</th>
30. <th>Mardi</th>
31. <th colspan="2">Mercredi</th>
3
32. <th>Jeudi</th>
33. </tr>
34.
35. <tr>
36. <td class="t">Equipe1</td>
37. <td colspan="3">tache1</td>
38. <td colspan="2">tache2</td>
39. <td rowspan="2">Semaine1</td>
40. </tr>
41. <tr>
42. <td class="t">Equipe2</td>
43. <td colspan="2">tache1</td>
44. <td colspan="3">tache2</td>
45. </tr>
46.
47. <tr>
48. <td class="t">Equipe1</td>
49. <td>tache3</td>
50. <td colspan="3">tache4</td>
51. <td>tache5</td>
52. <td rowspan="2">Semaine2</td>
53. </tr>
54. <tr>
55. <td class="t">Equipe2</td>
56. <td colspan="2">tache3</td>
57. <td colspan="3">tache4</td>
58. </tr>
59.
60. <tr>
61. <td class="t">Equipe1</td>
62. <td colspan="2">tache5</td>
63. <td colspan="2">tache6</td>
64. <td></td>
65. <td rowspan="2">Semaine3</td>
66. </tr>
67. <tr>
68. <td class="t">Equipe2</td>
69. <td>tache3</td>
70. <td colspan="4">tache4</td>
71. </tr>
72. </table>
73. </body>
74. </html>
Resultat :
4
[Link] 3 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="3">
<caption>Calcul de la moyenne</caption>
<tr>
<th>Matière</th>
<th>Note par matière</th>
<th>Coefficient</th>
<th>Note*Coefficient</th>
</tr>
<tr>
<td>Mathématiques</td>
<td>17</td>
<td>4</td>
<td>68</td>
</tr>
<tr>
<td>Physique</td>
<td>15</td>
<td>3</td>
<td>45</td>
</tr>
<tr>
<td>Informatique</td>
<td>16</td>
5
<td>2</td>
<td>32</td>
</tr>
<tr>
<td><strong>Totaux</strong></td>
<td></td>
<td>9</td>
<td>145</td>
</tr>
<tr>
<td colspan="3"><strong>Moyenne</strong></td>
<td class="moyenne">16.12</td>
</tr>
</table>
</body>
</html>
Resultat :
EXERCICE 4 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,h2{
font-family: Verdana;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<table style="width: 50%; height: 50%; margin-top: 10%;">
<thead>
<td colspan="2">
6
<img src="[Link]" width="100%" alt="">
</td>
</thead>
<tr>
<td style="background-color: #EEEEEE; width: 20%;">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#"> Activités</a></li>
<li><a href="#">Contact</a></li>
</ul>
</td>
<td><h2 style="color: #003569; text-align: justify;">Exercice</h2>
<p> Cet exercice permet de mettre en pratique les balises que
nous avons vu jusqu'ici.
N'attendez pas à ce que le design soit épatant! En effet, il
reste encore du chemin à faire avant de réussir une page
Web parfait avec un design <strong>agréable.</strong></p></td>
</tr>
<tr>
<tfoot>
<td colspan="2" style="background-color: #FF6600; text-align: center;height: 50px;">Webmaser ©
2015</td>
</tfoot>
</tr>
</table></center>
</body>
</html>
Resultat :