Parfois, une information dans un tableau doit occuper plus d'une case. Vous allez voir comment fusionner des cellules en hauteur avec rowspan et en largeur avec colspan.
Pourquoi fusionner des cellules ?
Un tableau classique avance case par case. Chaque ligne contient ses cellules, et chaque colonne garde la même logique du début à la fin.
Mais certaines situations demandent un peu plus de souplesse. Par exemple, une même catégorie peut concerner plusieurs lignes, ou un titre peut devoir s'étendre sur plusieurs colonnes.
Dans ces cas-là, on peut fusionner des cellules pour éviter de répéter plusieurs fois la même information.
-
la fusion verticale utilise l'attribut
rowspan -
la fusion horizontale utilise l'attribut
colspan
Le principe est simple, mais il faut rester attentif : dès qu'une cellule prend plus de place, les autres cellules du tableau doivent continuer à s'aligner correctement.
À revoir si besoin
Si vous voulez revoir la structure d'un tableau avant de fusionner des cellules, relisez Titre et légende des tableaux HTML. Vous y retrouverez l'organisation avec l'en-tête, les données et le pied du tableau.
La fusion verticale de cellules
La fusion verticale consiste à faire occuper à une cellule plusieurs lignes.
Pour cela, on ajoute l'attribut rowspan sur la cellule concernée. La valeur indiquée correspond au nombre de lignes que la cellule doit couvrir.
<table>
<tr>
<th>Jour</th>
<th>Activité</th>
</tr>
<tr>
<td rowspan="2">Lundi</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
</table>
| Jour | Activité |
|---|---|
| Lundi | HTML |
| CSS |
La cellule Lundi occupe ici deux lignes de suite.
À première vue, cela peut sembler étrange, car la deuxième ligne contient une cellule en moins. En réalité, c'est normal : la cellule avec rowspan="2" prend déjà la place de cette case.
Retenez surtout ceci : si une cellule fusionne deux lignes, vous ne devez pas réécrire une cellule à cet endroit dans la ligne suivante.
La fusion horizontale de cellules
La fusion horizontale consiste cette fois à faire occuper à une cellule plusieurs colonnes.
Pour cela, on utilise l'attribut colspan. La valeur représente le nombre de colonnes que la cellule doit prendre.
<table>
<tr>
<th colspan="3">Planning de la semaine</th>
</tr>
<tr>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>Responsive</td>
</tr>
</table>
| Planning de la semaine | ||
|---|---|---|
| Lundi | Mardi | Mercredi |
| HTML | CSS | Responsive |
La cellule Planning de la semaine occupe ici toute la largeur des trois colonnes.
Cette fois, la logique est la même que pour rowspan : si une cellule prend trois colonnes avec colspan="3", il ne faut pas ajouter d'autres cellules à côté sur la même ligne.
Attention ! La fusion de cellules est pratique, mais il faut l'utiliser avec mesure. Si un tableau devient trop compliqué, il devient aussi plus difficile à relire et à corriger.
En résumé, rowspan fusionne en hauteur et colspan fusionne en largeur. Avec ces deux attributs, vous pouvez déjà construire des tableaux plus souples quand la mise en forme des données l'exige.