26 Nov2015
Fusionner les cellules d'un tableau html
Objectif :
Fusionner les cellules d'un tableau html en utilisant les propriétés "colspan" et "rowspan".
Questions:
Créer les tableaux suivants en utilisant les propriétés de fusion "colspan" et "rowspan" :
1)
Tableau 1
2)
Tableau 2
Question 1 :
<!doctype html>
<html>
<head>
<title>Les tableaux</title>
<!-- ce code css pour centrer le texte dans les cellules du tableau.
-->
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<table border style="width: 50%">
<tr>
<td colspan="4">1</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>3</td>
<td>4</td>
<td rowspan="3">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>
Question 2 :
<html>
<head>
<title>Les tableaux</title>
<meta charset="utf-8">
</head>
<body>
<table border="1" cellspacing="0" style="text-align:center;" width="500px">
<caption>Planning des taches par équipe</caption>
<thead>
<tr>
<th rowspan="2">Equipes</th>
<th colspan="10"> Janvier </th>
<th rowspan="2"></th>
</tr>
<tr>
<th colspan="2">Lundi</th>
<th colspan="2">Mardi</th>
<th colspan="2">Mercredi</th>
<th colspan="2">Jeudi</th>
<th colspan="2">Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Equipe1</td>
<td colspan="6">Tach1</td>
<td colspan="4">Tache2</td>
<td rowspan="2">Semaine 1</td>
</tr>
<tr>
<td>Equipe2</td>
<td colspan="5">Tache1</td>
<td colspan="5">Tache2</td>
</tr>
<tr>
<td>Equipe1</td>
<td colspan="2">Tach3</td>
<td colspan="6">Tache4</td>
<td colspan="2">Tache5</td>
<td rowspan="2">Semaine 2</td>
</tr>
<tr>
<td>Equipe2</td>
<td colspan="4">Tache3</td>
<td colspan="6">Tache4</td>
</tr>
<tr>
<td>Equipe1</td>
<td colspan="5">Tache5</td>
<td colspan="5">Tache6</td>
<td rowspan="2">Semaine 3</td>
</tr>
<tr>
<td>Equipe2</td>
<td colspan="2">Tache5</td>
<td colspan="8">Tache6</td>
</tr>
<tr>
<td>Equipe1</td>
<td colspan="6">Tache7</td>
<td colspan="4">Tache8</td>
<td rowspan="2">Semaine 4</td>
</tr>
<tr>
<td>Equipe2</td>
<td colspan="5">Tache7</td>
<td colspan="5">Tache8</td>
</tr>
</tbody>
</table>
</body>
</html>
