Un tableau de prix affiche une colonne « Prix TTC » qu'on veut mettre en évidence sur toute sa hauteur, ou une colonne entière qu'on veut légèrement grisée pour la distinguer visuellement des autres. Appliquer ce style cellule par cellule, à coup de classes CSS répétées sur chaque <td> de la colonne, fonctionne mais devient vite lourd à écrire et fragile à maintenir dès qu'une ligne s'ajoute au tableau.
La balise <col> répond à ce besoin précis. Elle représente une colonne entière d'un tableau, ce qui permet de lui appliquer un style en une seule déclaration, sans toucher au contenu ni au style d'aucune cellule individuellement.
Définition
<col> est un élément vide, sans contenu ni balise fermante distincte, qui représente une colonne entière d'un tableau. Elle ne sert qu'à porter des attributs de style ou de mise en forme appliqués à toute la colonne d'un coup, sans jamais contenir de texte ni de contenu visible par elle-même.
La syntaxe : à l'intérieur de colgroup, avec l'attribut span
<col> ne s'utilise jamais seule : elle prend toujours place à l'intérieur d'une <colgroup>, elle-même placée juste après une éventuelle <caption> et avant le corps du tableau. L'attribut span permet à une seule balise <col> de couvrir plusieurs colonnes consécutives d'un coup, sans devoir répéter la balise autant de fois qu'il y a de colonnes concernées.
<table>
<colgroup>
<col />
<col span="2" style="background-color: #f4f4f4" />
</colgroup>
<tbody>
<tr>
<td>Produit</td>
<td>Prix HT</td>
<td>Prix TTC</td>
</tr>
</tbody>
</table>Dans cet exemple, la première colonne reste sans style particulier, tandis que la seconde balise <col>, grâce à span="2", applique un fond grisé aux deux colonnes suivantes, « Prix HT » et « Prix TTC », d'un seul geste.
Cas d'usage : styliser sans toucher chaque cellule
L'intérêt principal de <col> tient à la maintenance. Sur un tableau de plusieurs dizaines de lignes, ajouter ou retirer une ligne ne demande aucune modification du style de la colonne : la déclaration reste centralisée dans la <colgroup>, en tête de tableau, plutôt que dispersée sur chaque cellule concernée. Un tableau comparant trois offres tarifaires illustre bien ce gain : mettre en évidence la colonne du milieu, l'offre recommandée, ne demande de modifier qu'une seule balise <col>, jamais une cellule par ligne du tableau.
Seule une poignée de propriétés CSS s'applique réellement via <col> : essentiellement la largeur, la visibilité et l'arrière-plan. Les propriétés qui dépendent du contenu du texte, comme la couleur du texte ou la police, ne s'appliquent pas de façon fiable à travers cette balise et doivent rester sur les cellules elles-mêmes.
col face à td, une colonne entière contre une cellule
La différence avec <td> tient à l'échelle de ce que chaque balise désigne. <td> représente une cellule unique, à l'intersection d'une ligne et d'une colonne précises, avec un contenu propre. <col> représente la colonne dans son ensemble, sans aucun contenu, uniquement pour porter un style commun à toutes les cellules qui s'y trouvent, quelle que soit la ligne.
| Élément | Ce qu'il désigne | Peut contenir du texte |
|---|---|---|
<col> | Une colonne entière du tableau | Non |
| <td> | Une cellule précise, ligne par colonne | Oui |
Questions fréquentes
col en dehors de colgroup ?Non, <col> n'a de sens qu'à l'intérieur d'une <colgroup>. Utilisée seule, en dehors de ce conteneur, elle n'est tout simplement pas reconnue par le navigateur et son effet de style disparaît, quelle que soit la propriété CSS appliquée.
col faut-il écrire pour dix colonnes identiques ?Une seule suffit, à condition d'utiliser l'attribut span="10" sur cette balise unique. Écrire dix balises <col> répétées produit exactement le même résultat visuel, mais l'attribut span reste la façon la plus courte et la plus claire de l'exprimer.
col l'emporte-t-elle toujours sur le contenu des cellules ?Pas nécessairement. Le calcul final des largeurs de colonnes dépend aussi de l'algorithme de mise en page du tableau et du contenu réel des cellules, notamment sur un texte qui ne peut pas se couper. <col> donne une indication de largeur, pas une contrainte absolue que le navigateur respecte dans tous les cas de figure.