 |
 Fusion de cellules (colspan et rowspan) |
|
|
|
Connexion ratee
|
|
Par définition, un tableau est un groupe de cellules organisées en lignes et
en colonne. Chaque ligne comporte le même nombre de colonnes et chaque colonne le même nombre de lignes.
Il est tout de même possible de briser cette limite en fusionnant certaines cellules adjacentes entre-elles. |
|
|
|
|
|
Partant d'un tableau 'parfait' disons de 12 cellules, en 3 lignes de 4 colonnes, nous pouvons 'fusionner' certaines
cellules entre elles soit horizontalement, soit verticalement :
- Fusion horizontale : colspan (regroupement de colonnes)
La valeur donnée à cet attribut donne le nombre total de colonnes que va couvrir la cellule (pas le nombre
de colonnes à supprimer après la cellule)
- Fusion verticale : rowspan (regroupement de rangées)
La valeur donnée à cet attribut donne le nombre total de lignes que va couvrir la cellule (pas le nombre
de lignes à supprimer après la cellule)
Lorsqu'on place un colspan="2" par exemple au début d'une ligne de tableau qui contient
en principe 4 cellules par ligne, on ne trouvera que 3 fois la balise <td...> sur la ligne
puisque la seconde cellule a été fusionnée avec la première.
De même, lorsqu'on place un rowspan="2" par exemple sur la première cellule de la première ligne d'un tableau qui contient
en principe 4 lignes, la première balise <td...> de la seconde ligne sera en fait la
'seconde' cellule de la ligne puisque la première cellule a été fusionnée avec celle de la
première ligne.
Les attributs colspan et rowspan peuvent être utilisés
dans la même cellule, auquel cas la cellule occupera à la fois plusieurs lignes et plusieurs colonnes.
|
|
|
|
|
|
 |
|
 |
|
|
Exemple 1
<table border="1">
<tr>
<td colspan="2">Première ligne, première colonne</td>
<td>Première ligne, troisième colonne</td>
<td>Première ligne, quatrième colonne</td>
</tr>
<tr>
<td>Deuxième ligne, première colonne</td>
<td>Deuxième ligne, deuxième colonne</td>
<td>Deuxième ligne, troisième colonne</td>
<td>Deuxième ligne, quatrième colonne</td>
</tr>
</table>
Exemple 2
<table border="1">
<tr>
<td rowspan="2">Première ligne, première colonne</td>
<td>Première ligne, deuxième colonne</td>
<td>Première ligne, troisième colonne</td>
<td>Première ligne, quatrième colonne</td>
</tr>
<tr>
<td>Deuxième ligne, deuxième colonne</td>
<td>Deuxième ligne, troisième colonne</td>
<td>Deuxième ligne, quatrième colonne</td>
</tr>
<tr>
<td>Troisième ligne, première colonne</td>
<td>Troisième ligne, deuxième colonne</td>
<td>Troisième ligne, troisième colonne</td>
<td>Troisième ligne, quatrième colonne</td>
</tr>
</table>
Exemple 3
<table border="1">
<tr>
<td colspan="3" rowspan="2">Première ligne, première colonne</td>
<td>Première ligne, quatrième colonne</td>
</tr>
<tr>
<td>Deuxième ligne, quatrième colonne</td>
</tr>
<tr>
<td>Troisième ligne, première colonne</td>
<td>Troisième ligne, deuxième colonne</td>
<td>Troisième ligne, troisième colonne</td>
<td>Troisième ligne, quatrième colonne</td>
</tr>
</table>
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
|
|
Exemple 1
| Première ligne, première colonne |
Première ligne, troisième colonne |
Première ligne, quatrième colonne |
| Deuxième ligne, première colonne |
Deuxième ligne, deuxième colonne |
Deuxième ligne, troisième colonne |
Deuxième ligne, quatrième colonne |
Exemple 2
| Première ligne, première colonne |
Première ligne, deuxième colonne |
Première ligne, troisième colonne |
Première ligne, quatrième colonne |
| Deuxième ligne, deuxième colonne |
Deuxième ligne, troisième colonne |
Deuxième ligne, quatrième colonne |
| Troisième ligne, première colonne |
Troisième ligne, deuxième colonne |
Troisième ligne, troisième colonne |
Troisième ligne, quatrième colonne |
Exemple 3
| Première ligne, première colonne |
Première ligne, quatrième colonne |
| Deuxième ligne, quatrième colonne |
| Troisième ligne, première colonne |
Troisième ligne, deuxième colonne |
Troisième ligne, troisième colonne |
Troisième ligne, quatrième colonne |
|
|
|
|
|
|
|
|
|
|
|
|
|
