0Pricing
HTML Academy · Leçon

colspan et rowspan pour fusionner des cellules

Fusionnez des cellules sur plusieurs colonnes et lignes.

colspan et rowspan pour fusionner des cellules est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu’est-ce que la fusion de cellules ?

Par défaut, chaque cellule d’un tableau occupe une ligne et une colonne. La fusion permet à une cellule de s’étendre sur plusieurs colonnes ou lignes :

  • colspan — s’étendre sur plusieurs colonnes
  • rowspan — s’étendre sur plusieurs lignes

colspan

L’attribut colspan permet à une cellule de s’étendre sur plusieurs colonnes :

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

L’attribut rowspan permet à une cellule de s’étendre sur plusieurs lignes :

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan et rowspan ensemble

Vous pouvez combiner les deux attributs dans une même cellule :

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Gérer les cellules fusionnées

Lorsqu’une cellule s’étend sur plusieurs colonnes, omettez ces colonnes dans les lignes concernées :

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Schémas courants de fusion

Exemples de fusion de cellules dans des tableaux réels :

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan pour fusionner des en-têtes de lignes

Utilisez rowspan pour créer des libellés fusionnés de groupes de lignes :

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — cellule pleine largeur

Une valeur colspan égale à 0 couvre toutes les colonnes restantes d’un groupe de colonnes (rarement utilisé) :

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Fusion de cellules et accessibilité

Les tableaux avec des fusions complexes nécessitent les attributs scope et headers pour les lecteurs d’écran :

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Déboguer les problèmes de fusion

Erreurs courantes lors de la fusion :

  • Trop ou pas assez de cellules dans une ligne après une fusion
  • rowspan qui dépasse le nombre de lignes
  • Fusions qui se chevauchent (deux cellules revendiquent la même position)

Utilisez les DevTools du navigateur pour examiner la structure du tableau si quelque chose semble incorrect.

CSS pour les cellules fusionnées

Stylisez les cellules qui s’étendent sur plusieurs colonnes ou lignes :

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Impression et fusion de cellules

Les cellules fusionnées s’impriment correctement dans les navigateurs modernes. Cependant :

  • Si les lignes de thead s’étendent sur plusieurs colonnes, elles se répètent correctement sur chaque page imprimée
  • rowspan dans tbody ne se répète pas après un saut de page
  • Testez les tableaux complexes dans l’aperçu avant impression avant leur mise en production

Vérification rapide

Vous avez une cellule de tableau qui doit couvrir 3 colonnes. Quel attribut utilisez-vous ?

Récapitulatif : colspan et rowspan

Notions essentielles de la fusion de cellules :

  • colspan — la cellule s’étend sur plusieurs colonnes
  • rowspan — la cellule s’étend sur plusieurs lignes
  • Gérez les cellules fusionnées : omettez les cellules couvertes par la fusion
  • Ajoutez scope="colgroup" pour rendre les en-têtes fusionnés accessibles
  • Utilisez les DevTools pour déboguer les problèmes de mise en page

Questions Fréquemment Posées

La leçon « colspan et rowspan pour fusionner des cellules » est-elle gratuite ?

Oui — le texte complet de « colspan et rowspan pour fusionner des cellules » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « colspan et rowspan pour fusionner des cellules » ?

Fusionnez des cellules sur plusieurs colonnes et lignes. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « colspan et rowspan pour fusionner des cellules » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. table, tr, td et th
  2. Structure thead, tbody et tfoot
  3. colspan et rowspan pour fusionner des cellules
  4. Accessibilité des tableaux : scope, summary et caption
← Retour à HTML Academy