Fusion de cellules et tableaux complexes
- 1colspan permet de fusionner des cellules horizontalement pour créer des en-têtes étendus
- 2rowspan fusionne les cellules verticalement pour regrouper plusieurs lignes
- 3La combinaison des deux attributs permet de créer des tableaux sophistiqués avec des structures complexes
Introduction
Jusqu'à présent, nous avons créé des tableaux simples avec une cellule par intersection ligne/colonne. Mais que faire quand vous devez créer un tableau de planning hebdomadaire où certaines activités s'étendent sur plusieurs jours ? Ou un rapport financier avec des sous-totaux qui regroupent plusieurs lignes ?
Vous êtes webmaster pour une école de musique. On vous demande de créer le planning des cours sur le site web.
Votre défi
Certains cours durent plusieurs heures consécutives, et certains professeurs enseignent le même instrument sur plusieurs créneaux. Comment organiser cela dans un tableau lisible ?
La fusion de cellules avec colspan et rowspan va transformer vos tableaux basiques en structures sophistiquées et professionnelles.
Les fondements de la fusion de cellules
L'attribut colspan - Fusion horizontale
Le colspan (column span) permet à une cellule de s'étendre sur plusieurs colonnes adjacentes.
1<!-- Tableau simple avec fusion horizontale -->
2<table border="1">
3 <tr>
4 <td colspan="3">Cette cellule s'étend sur 3 colonnes</td>
5 </tr>
6 <tr>
7 <td>Colonne 1</td>
8 <td>Colonne 2</td>
9 <td>Colonne 3</td>
10 </tr>
11</table>💡 À retenir: La valeur de
colspanindique le nombre total de colonnes que la cellule doit occuper, pas le nombre de colonnes supplémentaires.
L'attribut rowspan - Fusion verticale
Le rowspan (row span) permet à une cellule de s'étendre sur plusieurs lignes.
1<!-- Tableau avec fusion verticale -->
2<table border="1">
3 <tr>
4 <td rowspan="2">Cellule haute</td>
5 <td>Données 1</td>
6 </tr>
7 <tr>
8 <!-- Attention: pas de première cellule ici, elle est fusionnée ! -->
9 <td>Données 2</td>
10 </tr>
11</table>⚠️ Attention: Quand une cellule utilise
rowspan, vous devez omettre les cellules correspondantes dans les lignes suivantes, sinon votre tableau sera déformé.
Tableaux complexes - Combiner colspan et rowspan
Voici un exemple concret de tableau de planning scolaire :
1<table border="1" style="border-collapse: collapse; width: 100%;">
2 <caption>Planning des cours - École de Musique</caption>
3
4 <!-- En-tête principal -->
5 <tr>
6 <th rowspan="2">Horaires</th>
7 <th colspan="5">Jours de la semaine</th>
8 </tr>
9
10 <!-- Sous-en-têtes des jours -->
11 <tr>
12 <th>Lundi</th>
13 <th>Mardi</th>
14 <th>Mercredi</th>
15 <th>Jeudi</th>
16 <th>Vendredi</th>
17 </tr>
18
19 <!-- Créneaux horaires -->
20 <tr>
21 <th>9h-10h</th>
22 <td>Piano débutant</td>
23 <td rowspan="2">Guitare<br/>Cours collectif</td>
24 <td>Violon</td>
25 <td colspan="2">Orchestre junior</td>
26 </tr>
27
28 <tr>
29 <th>10h-11h</th>
30 <td>Chant</td>
31 <!-- Cellule guitare continue (rowspan) -->
32 <td>Piano avancé</td>
33 <!-- Cellules orchestre continuent (colspan) -->
34 </tr>
35
36 <tr>
37 <th>11h-12h</th>
38 <td colspan="3">Répétition générale</td>
39 <td>Théorie musicale</td>
40 <td>Libre</td>
41 </tr>
42</table>Le saviez-vous ?
Le premier tableau HTML a été créé en 1993, mais les attributs colspan et rowspan n'ont été standardisés qu'en 1997 avec HTML 3.2. Avant cela, créer des tableaux complexes était un véritable casse-tête !
— Histoire du développement des spécifications HTML du W3C
Règles de construction pour éviter les erreurs
Planification structurelle
Avant de coder, dessinez votre tableau sur papier :
| Planification | Description | Impact |
|---|---|---|
| Grille de base | Déterminez le nombre total de colonnes | Structure fondamentale |
| Zones de fusion | Identifiez les cellules à fusionner | Logique de colspan/rowspan |
| Cellules omises | Marquez les cellules à ne pas coder | Évite la déformation |
Exemple de tableau financier complexe
1<table border="1" style="border-collapse: collapse;">
2 <caption>Rapport Financier Trimestriel</caption>
3
4 <tr>
5 <th rowspan="2">Catégorie</th>
6 <th colspan="3">Trimestre 2024</th>
7 <th rowspan="2">Total</th>
8 </tr>
9
10 <tr>
11 <th>T1</th>
12 <th>T2</th>
13 <th>T3</th>
14 </tr>
15
16 <tr>
17 <td rowspan="3">Revenus</td>
18 <td>15 000€</td>
19 <td>18 000€</td>
20 <td>22 000€</td>
21 <td rowspan="3">55 000€</td>
22 </tr>
23
24 <tr>
25 <td>12 000€</td>
26 <td>16 000€</td>
27 <td>14 000€</td>
28 </tr>
29
30 <tr>
31 <td colspan="3"><strong>Sous-total Revenus: 97 000€</strong></td>
32 </tr>
33</table>Points clés et bonnes pratiques
🎯 En pratique: Utilisez toujours
border-collapse: collapseen CSS pour éviter les doubles bordures entre les cellules fusionnées.
💡 À retenir: La somme des colspan dans une ligne doit toujours égaler le nombre total de colonnes du tableau.
⚠️ Attention: Plus votre tableau est complexe, plus il devient difficile à modifier. Documentez votre structure ou utilisez des commentaires HTML.
1<!-- Exemple de documentation -->
2<!--
3Structure : 5 colonnes au total
4Ligne 1 : colspan=2 + 3 cellules normales
5Ligne 2 : rowspan=2 + 4 cellules normales
6-->
7<table>
8 <tr>
9 <td colspan="2">Fusion horizontale</td>
10 <td>Normal</td>
11 <td>Normal</td>
12 <td>Normal</td>
13 </tr>
14 <!-- etc. -->
15</table>Accessibilité des tableaux complexes
Pour les lecteurs d'écran et l'accessibilité :
1<table>
2 <caption>Description claire du contenu</caption>
3 <thead>
4 <tr>
5 <th scope="col" colspan="2">En-tête groupé</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <th scope="row" rowspan="2">Catégorie</th>
11 <td>Données</td>
12 </tr>
13 </tbody>
14</table>🎯 En pratique: Utilisez
scope="col"pour les en-têtes de colonnes etscope="row"pour les en-têtes de lignes, même avec fusion.
Si un tableau a 4 colonnes et qu'une cellule utilise colspan="3", combien de cellules <td> supplémentaires peut-on ajouter sur la même ligne ?