Docs HTML exécutables : Colspan et rowspan

Q: À quoi sert colspan en HTML ?

colspan étire un ou un sur plusieurs colonnes : prend la place de trois cellules dans sa ligne. Cette ligne a alors besoin de deux cellules de moins que les autres.

Q: À quoi sert rowspan en HTML ?

rowspan étire une cellule vers le bas sur plusieurs lignes : remplit sa propre ligne et celle du dessous. La ligne suivante doit omettre cette colonne, car la cellule du dessus la couvre déjà.

Q: Une cellule peut-elle utiliser colspan et rowspan en même temps ?

Oui. couvre un bloc de deux colonnes sur deux lignes. Chaque ligne qu'elle traverse a besoin de deux cellules de moins.

Q: Quelle est la valeur maximale de colspan ?

Les navigateurs limitent colspan à 1000 et rowspan à 65534. Pour colspan, une valeur de 0 ou une valeur qui ne commence pas par un chiffre est traitée comme 1.

colspan : une cellule sur plusieurs colonnes

colspan="n" rend une cellule aussi large que n colonnes. Sa ligne a alors n - 1 cellules de moins. Ici, le total s'étend sur les deux premières colonnes :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

La dernière ligne a deux cellules, mais la première compte pour deux, donc la ligne fait toujours trois colonnes comme les autres.

rowspan : une cellule sur plusieurs lignes

rowspan="n" rend une cellule aussi haute que n lignes. Les lignes en dessous omettent cette colonne, car la haute cellule la remplit déjà :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Les lignes de Bob et de Cy n'ont qu'un seul <td> : la colonne Team est déjà occupée par « Design ». Rien ne le signale dans le HTML, donc lisez un tableau avec rowspan de haut en bas en tenant le compte des colonnes encore couvertes.

colspan et rowspan ensemble : un emploi du temps

Une cellule peut s'étendre dans les deux sens. L'emploi du temps est le cas classique, avec des cours qui durent deux créneaux et d'autres qui s'étalent sur deux jours :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Comptez la ligne de 10:00 : l'en-tête de l'heure, puis Mon est couvert par HTML depuis la ligne du dessus, puis Lab remplit Tue et Wed. À 11:00, Mon est de nouveau libre et Lab couvre encore Tue et Wed, donc la ligne a une seule cellule de données.

Compter les cellules pour garder un tableau régulier

Chaque ligne doit totaliser le même nombre de colonnes, en comptant le colspan de chaque cellule et les colonnes couvertes par les cellules rowspan du dessus. Quand une ligne a une cellule de trop, le navigateur lui ajoute une nouvelle colonne et le tableau prend un bord irrégulier :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

Dans le mauvais tableau, la deuxième ligne a oublié que A couvre sa première colonne, donc D atterrit dans une troisième colonne qu'aucune autre ligne n'a. La correction consiste à supprimer une cellule. La même erreur avec colspan consiste à garder toutes les cellules d'origine dans la ligne qui contient la cellule large.

Une cellule en moins pose le problème inverse : la ligne s'arrête plus tôt et laisse un trou à la fin.

En-têtes groupés avec colspan

Un en-tête peut s'étendre sur les colonnes qu'il nomme, au-dessus d'une ligne d'en-têtes plus précis. Marquez-le scope="colgroup" pour que les lecteurs d'écran l'appliquent à toutes les colonnes en dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

« City » s'étend sur les deux lignes d'en-tête avec rowspan="2", et chaque mois s'étend sur ses deux colonnes avec colspan="2". Les éléments <colgroup> définissent les groupes de colonnes auxquels se réfère scope="colgroup". Un lecteur d'écran sur la cellule 31 de Rome peut alors dire « Rome, July, High, 31 ». Pour le reste de la structure du tableau, voir tableau HTML.

Réservez les fusions à une vraie structure

Les fusions rendent un tableau plus difficile à lire avec un lecteur d'écran, et plus difficile à trier, filtrer ou copier dans un tableur. Utilisez-les là où les données sont vraiment groupées (un total, un en-tête au-dessus de sous-colonnes, un cours qui dure deux heures). Si un tableau a besoin de nombreuses fusions, deux tableaux plus simples sont souvent plus clairs.

Erreurs fréquentes

Laisser les cellules couvertes. Une cellule colspan="2" remplace deux cellules ; supprimez l'une des cellules d'origine.
Oublier les lignes sous un rowspan. Chacune a besoin d'une cellule de moins.
Écrire colspan sur <tr>. Il ne fonctionne que sur <td> et <th>.
Des fusions pour la mise en page visuelle, comme une ligne de bannière dans un tableau de mise en page. Utilisez CSS grid pour la mise en page.
colspan="100%" pour dire « toute la largeur ». Le navigateur ne lit que les chiffres du début, donc cette cellule s'étend sur 100 colonnes et ajoute des colonnes vides au tableau. La valeur est un nombre entier de colonnes.

Questions fréquentes

À quoi sert colspan en HTML ?

colspan étire un <td> ou un <th> sur plusieurs colonnes : <td colspan="3"> prend la place de trois cellules dans sa ligne. Cette ligne a alors besoin de deux cellules de moins que les autres.

À quoi sert rowspan en HTML ?

rowspan étire une cellule vers le bas sur plusieurs lignes : <td rowspan="2"> remplit sa propre ligne et celle du dessous. La ligne suivante doit omettre cette colonne, car la cellule du dessus la couvre déjà.

Une cellule peut-elle utiliser colspan et rowspan en même temps ?

Oui. <td colspan="2" rowspan="2"> couvre un bloc de deux colonnes sur deux lignes. Chaque ligne qu'elle traverse a besoin de deux cellules de moins.

Pourquoi mon tableau a une cellule en trop qui dépasse ?

Une ligne a plus de cellules que les autres une fois les fusions comptées. Le plus souvent, une ligne sous un rowspan contient encore une cellule pour la colonne couverte, ou une ligne avec un colspan a gardé toutes ses cellules d'origine. Supprimez le <td> en trop.

Quelle est la valeur maximale de colspan ?

Les navigateurs limitent colspan à 1000 et rowspan à 65534. Pour colspan, une valeur de 0 ou une valeur qui ne commence pas par un chiffre est traitée comme 1.

Concepts liés