Attribut HTML colspan

L'attribut HTML colspan permet à une cellule de tableau unique de s'étendre sur deux colonnes ou plus. C'est l'équivalent en balisage de la fonction « fusionner des cellules » dans un tableur : au lieu d'avoir une cellule par colonne dans une ligne, on attribue un colspan à une cellule pour qu'elle occupe l'espace horizontal de plusieurs colonnes. C'est ainsi que l'on crée des lignes récapitulatives, des en-têtes groupés et toute mise en page où un contenu appartient à plus d'une colonne.

Cette page présente les valeurs acceptées par colspan, les éléments qui le prennent en charge, la façon de le combiner avec rowspan pour s'étendre à la fois sur des colonnes et des lignes, les considérations d'accessibilité pour les cellules d'en-tête, ainsi que le CSS moderne qui remplace l'ancien style border="1".

Éléments prenant en charge colspan

colspan ne peut être utilisé que sur les deux éléments de cellule de tableau :

<td> — une cellule de données standard. colspan définit le nombre d'emplacements de colonnes occupés par la cellule.
<th> — une cellule d'en-tête. colspan définit le nombre de colonnes que l'en-tête étiquette.

Il n'est pas valide sur <table>, <tr>, <col>, ni sur aucun autre élément. Pour contrôler des colonnes entières depuis un seul endroit, utilisez plutôt <col>/<colgroup> — mais le comportement d'extension de cellule se définit toujours sur <td> ou <th>.

Règles de valeur

La valeur de colspan est un entier positif (1, 2, 3, …) :

colspan="1" est la valeur par défaut — une cellule normale qui occupe une seule colonne. Il est rarement nécessaire de l'écrire explicitement.
Toute valeur supérieure à 1 fait s'étendre la cellule sur autant de colonnes. La cellule consomme des emplacements de colonnes sur les autres cellules de la même ligne, donc chaque colspan réduit le nombre de cellules sœurs que cette ligne doit contenir.
La norme HTML plafonne la valeur à 1000 ; les nombres plus grands sont écrêtés.
colspan="0" était une ancienne idée HTML4 signifiant « s'étendre sur toutes les colonnes restantes ». Elle ne fait pas partie du standard HTML actuel et n'est pas prise en charge de manière fiable par les navigateurs — ne l'utilisez pas ; préférez un entier positif explicite.

Si vous définissez un colspan supérieur au nombre de colonnes réellement disponibles dans la ligne, le navigateur étend simplement la cellule jusqu'au bord du tableau ; il ne crée pas de colonnes supplémentaires.

Syntaxe

<td colspan="value"> ... </td>
<th colspan="value"> ... </th>

Exemple de l'attribut HTML colspan utilisé sur l'élément `<td>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>March</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>April</td>
        <td>$150</td>
      </tr>
      <tr>
        <td colspan="2">Total: $250</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

La dernière ligne ne contient qu'un seul <td>, et non deux, car colspan="2" fait en sorte que cette unique cellule remplisse à la fois les colonnes « Month » et « Salary ». Si vous omettiez le colspan, cette ligne manquerait d'une cellule et la mise en page du tableau serait cassée.

Exemple de l'attribut HTML colspan utilisé sur l'élément `<th>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
      <tr>
        <td>February</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Combiner colspan avec rowspan

colspan s'étend sur des colonnes (horizontalement) ; son équivalent rowspan s'étend sur des lignes (verticalement). Ils sont presque toujours présentés ensemble, car les tableaux réels ont besoin des deux — par exemple, un en-tête qui étiquette plusieurs colonnes au-dessus de sous-en-têtes, ou une cellule d'étiquette qui couvre plusieurs lignes sur le côté.

Vous pouvez placer les deux attributs sur la même cellule pour lui faire occuper un bloc rectangulaire de colonnes et de lignes à la fois. Comme avec colspan seul, chaque cellule qu'une autre cellule « recouvre » doit être retirée du balisage de la ligne où elle aurait dû apparaître — sinon cette ligne se retrouve avec trop de cellules.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table>
      <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Contact</th>
      </tr>
      <tr>
        <th>Phone</th>
        <th>Email</th>
      </tr>
      <tr>
        <td>Anna</td>
        <td>555-0101</td>
        <td>[email protected]</td>
      </tr>
    </table>
  </body>
</html>

Ici, rowspan="2" fait descendre l'en-tête « Name » dans la deuxième ligne d'en-tête, tandis que colspan="2" permet à l'en-tête « Contact » de se placer au-dessus de « Phone » et de « Email ». Vous pouvez en savoir plus sur la construction de ces structures sur la page Tableaux HTML.

Styliser les bordures de tableau avec CSS

L'attribut border="1" utilisé dans les exemples ci-dessus est l'ancienne façon de tracer des bordures de cellule. Il est déprécié dans le HTML moderne — utilisez plutôt CSS. La propriété clé est border-collapse: collapse, qui fusionne les doubles bordures de cellule en lignes partagées simples :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #666;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
    </table>
  </body>
</html>

Cela vous donne un contrôle total sur la couleur, l'épaisseur et l'espacement des bordures, ce que l'attribut border ne permet pas.

Accessibilité pour les cellules d'en-tête couvrant plusieurs colonnes

Lorsqu'un <th> s'étend sur plusieurs colonnes, les lecteurs d'écran ont besoin d'aide pour comprendre quelles cellules de données il décrit. Ajoutez l'un des éléments suivants :

L'attribut scope sur l'en-tête — scope="colgroup" pour un en-tête qui couvre plusieurs colonnes, ou scope="col" pour une seule colonne. C'est l'option la plus simple pour les tableaux simples.
Pour les tableaux complexes, attribuez un id à chaque en-tête et référencez ces ids depuis les cellules de données concernées à l'aide de l'attribut headers (headers="h1 h2").

Par exemple, un en-tête de groupe de colonnes devrait être balisé comme <th colspan="2" scope="colgroup">Contact</th> afin que la technologie d'assistance l'associe aux deux colonnes qu'il couvre.

Exercice

Pratique

Quel est le rôle principal de l'attribut HTML colspan ?

Il met les en-têtes de tableau en gras.Il modifie la couleur des cellules du tableau.Il indique le nombre de colonnes sur lesquelles une cellule doit s'étendre horizontalement.Il indique le nombre de lignes sur lesquelles une cellule doit s'étendre verticalement.Il aligne le texte à l'intérieur des cellules du tableau.