Fusion de cellules et tableaux complexes
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 ?
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.