Vous construisez un tableau de comparaison de formules sur une page produit, avec une colonne finale qui doit ressortir visuellement du reste, un fond différent, une largeur minimale. Ajouter cette mise en forme cellule par cellule, ligne après ligne, oblige à répéter la même règle CSS sur chaque <td> de la colonne, un travail fastidieux et fragile au moindre ajout de ligne.
La balise <colgroup> répond exactement à ce problème : elle cible une colonne entière du tableau en une seule fois, pour lui appliquer une largeur ou un arrière-plan, sans toucher au contenu d'aucune cellule.
Définition
<colgroup> est un conteneur qui regroupe un ou plusieurs éléments <col>, chacun représentant une colonne du tableau. Il n'affiche aucun contenu par lui-même : son seul rôle est de porter des attributs de présentation qui s'appliqueront à toute la colonne qu'il décrit.
Son emplacement dans le document est imposé par la spécification HTML : il doit apparaître juste après <caption> s'il y en a une, et avant le contenu du tableau, c'est-à-dire avant la première ligne. Placé ailleurs, un navigateur le déplace silencieusement ou l'ignore, ce qui rend l'erreur difficile à repérer.
Un colgroup mal placé, par exemple après les premières lignes du tableau, ne provoque aucune erreur visible dans la console. Le navigateur le réinterprète simplement ou l'ignore, et le style attendu sur la colonne n'apparaît jamais. Si un colgroup semble sans effet, vérifiez toujours sa position en premier, juste après l'ouverture du tableau ou de sa légende.
Syntaxe : col et span
Dans sa forme la plus courante, colgroup contient un col par colonne à styliser, dans l'ordre où les colonnes apparaissent dans le tableau. Un col vide, sans style particulier, marque simplement qu'aucune règle ne s'applique à cette colonne précise.
L'attribut span, posé sur colgroup ou sur un col, évite de répéter des éléments identiques : span="2" sur un seul col revient à écrire deux col consécutifs qui partagent exactement le même style, pratique quand plusieurs colonnes voisines doivent recevoir la même règle.
<table>
<caption>Comparaison des formules</caption>
<colgroup>
<col span="2">
<col class="colonne-totale">
</colgroup>
<tr><th scope="col">Essential</th><th scope="col">Plus</th><th scope="col">Total annuel</th></tr>
<tr><td>9,90 €</td><td>19,90 €</td><td>238,80 €</td></tr>
</table>Exemple concret : mettre en valeur une colonne de total
Reprenons ce tableau de formules, avec une colonne « Total annuel » à faire ressortir du reste. Avec colgroup, une seule règle posée sur le col correspondant suffit à lui donner un arrière-plan différent et une largeur minimale, sans toucher au contenu d'aucun td de cette colonne.
.colonne-totale {
background-color: #fdf2e9;
width: 140px;
}Cette règle s'applique automatiquement à toute ligne ajoutée plus tard au tableau : nul besoin de retoucher le CSS chaque fois qu'une formule s'ajoute, contrairement à une classe qu'il faudrait poser sur chaque cellule de la colonne.
Sémantique et accessibilité
colgroup n'a aucune valeur sémantique pour les technologies d'assistance : un lecteur d'écran ne l'annonce jamais et son absence ne change rien à la façon dont un tableau est parcouru. Son seul rôle est visuel. L'accessibilité d'un tableau repose ailleurs, sur caption pour le titre et sur <th> pour les intitulés de colonnes et de lignes.
Seules quelques propriétés CSS s'appliquent réellement à travers colgroup ou col : la couleur de fond, la largeur, la visibilité, et de façon inégale selon les navigateurs la bordure. Les propriétés de texte, comme la couleur du texte ou la graisse, ne se propagent pas jusqu'aux cellules, parce qu'une colonne n'est pas une boîte qui contient visuellement son contenu, seules les cellules le sont réellement.
| Élément | Portée du style | Propriétés CSS efficaces |
|---|---|---|
colgroup, col | Une colonne entière | Fond, largeur, visibilité |
tr | Une ligne entière | Toutes les propriétés usuelles |
td, th | Une seule cellule | Toutes les propriétés usuelles |
Bonnes pratiques
Placez toujours colgroup immédiatement après caption, ou en tout premier enfant du tableau si aucune légende n'est présente. Préférez span à la répétition de plusieurs col identiques dès que trois colonnes ou plus partagent exactement le même style. Réservez colgroup à la mise en forme visuelle : la structure et le sens du tableau doivent rester lisibles même si son style est entièrement retiré.
Questions fréquentes
Pourquoi mon texte ne devient pas gras alors que j'ai bien mis font-weight sur mon colgroup ?
Parce que les propriétés de texte, comme la graisse ou la couleur du texte, ne comptent pas parmi les propriétés que le CSS applique réellement à travers colgroup ou col. Seuls le fond, la largeur et la visibilité s'y propagent. Pour mettre du texte en gras, il faut cibler directement les cellules concernées, par exemple avec un sélecteur nth-child ou une classe posée sur chaque td.
Faut-il un col pour chaque colonne du tableau, même celles que je ne veux pas styliser ?
Non, seulement pour les colonnes que vous souhaitez cibler. Mais si des colonnes non stylisées précèdent une colonne à styliser, il faut inclure un col vide pour chacune d'elles, afin que le col stylisé conserve la bonne position dans le tableau. L'ordre des col doit toujours correspondre à l'ordre réel des colonnes.
Le colgroup change-t-il l'ordre dans lequel un lecteur d'écran annonce les colonnes ?
Non, absolument aucun effet sur ce point : colgroup est ignoré par les technologies d'assistance, qui se fient uniquement à la structure des lignes et des cellules, ainsi qu'aux intitulés portés par th et à l'attribut scope pour comprendre l'organisation du tableau.