La balise HTML <colgroup>

La balise HTML <colgroup> permet de définir un groupe de colonnes partageant des propriétés communes dans un tableau. Elle ne peut contenir que des éléments <col>, qui définissent les propriétés des colonnes.

La balise <colgroup> est imbriquée à l'intérieur d'une balise <table>, avant <thead>, <tbody>, <tfoot> et <tr>, et après <caption> si celle-ci est utilisée (la balise <caption> accueille la légende du tableau).

Un seul tableau HTML peut contenir plusieurs balises <colgroup>.

Pourquoi utiliser `<colgroup>` ?

Les cellules d'un tableau HTML sont écrites ligne par ligne, il n'existe donc pas d'endroit naturel pour attacher un style devant s'appliquer à toute une colonne. Les éléments <colgroup> et <col> résolvent ce problème : ils décrivent les colonnes du tableau une seule fois, en amont, et permettent d'appliquer des propriétés partagées (largeur, arrière-plan, bordures) à chaque cellule de ces colonnes simultanément.

Deux avantages concrets :

Styliser plusieurs colonnes à la fois. Définissez une largeur ou un arrière-plan sur un groupe de colonnes sans avoir à le répéter sur chaque <td> de chaque ligne.
Séparer la structure de la présentation. Les définitions de colonnes sont regroupées dans un petit bloc en haut du tableau plutôt que dispersées dans les cellules, ce qui rend le balisage plus facile à lire et à maintenir.

Syntaxe

La balise <colgroup> s'utilise par paires. Le contenu est écrit entre les balises ouvrante (<colgroup>) et fermante (</colgroup>).

Exemple de la balise HTML `<colgroup>` :

Balise HTML <colgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Result

Comprendre l'attribut `span`

span contrôle le nombre de colonnes consécutives couvertes par un élément, mais sa signification varie légèrement selon l'endroit où il est placé :

span sur <colgroup> indique que le groupe lui-même s'étend sur ce nombre de colonnes. Utilisez-le quand vous souhaitez traiter plusieurs colonnes consécutives comme un seul bloc stylisé sans avoir besoin d'éléments <col> enfants séparés. Par exemple, <colgroup span="3"> regroupe les trois premières colonnes.
span sur un <col> enfant indique le nombre de colonnes auxquelles ce <col> s'applique. Cela permet à un seul <colgroup> de décrire plusieurs colonnes avec des règles différentes, comme dans l'exemple ci-dessus où <col span="2"> couvre les deux premières colonnes et le <col> suivant couvre la troisième.

Si un <colgroup> contient des éléments <col> enfants, ce sont eux qui décrivent les colonnes et vous ne devez pas également placer span sur le <colgroup>.

Utiliser plusieurs éléments `<colgroup>`

Un tableau peut contenir plusieurs <colgroup>. Chaque groupe prend en charge le prochain ensemble de colonnes dans l'ordre, ce qui est pratique pour séparer visuellement des sections logiques d'un tableau :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>

Result

Le premier <colgroup> stylise la colonne la plus à gauche ; le second, avec span="2", stylise les deux colonnes de ventes comme un seul groupe.

Styliser les colonnes avec CSS

L'approche moderne la plus propre consiste à garder le balisage minimal et à déplacer la présentation dans une feuille de style, en ciblant les éléments <col> et <colgroup> avec CSS plutôt qu'avec les attributs dépréciés align, valign et width. Un ensemble limité mais utile de propriétés CSS s'applique via ces éléments : background-color, background, border, width et visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Un point pratique à noter : la background-color d'une colonne ne transparaît que là où les cellules elles-mêmes sont transparentes. Si un <td> ou un <tr> définit son propre arrière-plan, la couleur au niveau de la cellule prend le dessus sur celle de la colonne.

Accessibilité

<colgroup> et <col> sont purement présentationnels — ils affectent l'apparence mais ne véhiculent aucune signification sémantique pour les technologies d'assistance. Les lecteurs d'écran n'annoncent pas les groupes de colonnes, et leur utilisation n'associe pas les en-têtes aux cellules de données. Pour rendre un tableau accessible, utilisez de véritables cellules d'en-tête (<th>) avec des attributs scope appropriés ; ne vous fiez pas à <colgroup> pour transmettre la structure.

Attributs

Remarque : les attributs de présentation tels que align, valign et width sont dépréciés en HTML5. Stylisez les colonnes avec CSS (text-align, vertical-align, width) en ciblant les éléments <col> et <colgroup>.

Attribut	Valeur	Description
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Définit l'alignement du contenu de la colonne. Non pris en charge en HTML5.
`char`	caractère	Aligne le contenu de la colonne sur le caractère spécifié. Utilisé uniquement si `align="char"`. Non pris en charge en HTML5.
`charoff`	nombre	Décale le contenu de la cellule par rapport au caractère spécifié. Utilisé uniquement si `align="char"`. Non pris en charge en HTML5.
`span`	nombre	Définit le nombre de colonnes auxquelles l'élément `<col>` s'applique. La valeur par défaut est 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Aligne le contenu verticalement. Non pris en charge en HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Définit la largeur de la colonne. Non pris en charge en HTML5.

La balise <colgroup> prend également en charge les attributs globaux et les attributs d'événement.

Pratique

Quelle est la représentation correcte et le cas d'utilisation de la balise HTML colgroup ?

La balise <colgroup> définit un groupe d'une ou plusieurs colonnes dans un tableau pour leur mise en forme.<colgroup> est une balise auto-fermante.Les propriétés CSS telles que background-color et width ne s'appliquent jamais via <colgroup>.La balise <colgroup> ne prend pas en charge l'attribut span.La balise <colgroup> est utilisée pour regrouper le contenu d'en-tête dans un tableau.

Pourquoi utiliser <colgroup> ?