tableaux block

<colgroup>

Regroupe une ou plusieurs colonnes d'un tableau pour leur appliquer des styles communs.

Description

L’élément <colgroup> définit un groupe de colonnes dans un tableau afin de leur appliquer des styles CSS communs. Il doit être placé après <caption> et avant <thead>. Il peut contenir des éléments <col> pour cibler des colonnes individuelles.

Syntaxe

<table>
  <colgroup>
    <col>
    <col style="background-color: #f0f0f0">
  </colgroup>
  <thead>…</thead>
</table>

Exemples

Mise en évidence d’une colonne :

<table>
  <caption>Résultats trimestriels</caption>
  <colgroup>
    <col><!-- Colonne Produit -->
    <col style="background-color: oklch(0.97 0.05 150)"><!-- Q1 mis en avant -->
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Produit</th>
      <th>T1</th>
      <th>T2</th>
      <th>T3</th>
    </tr>
  </thead>
  <tbody>…</tbody>
</table>

colgroup avec span :

<colgroup span="2" style="background-color: #eef"></colgroup>

Attributs spécifiques

AttributTypeDescription
spanintegerNombre de colonnes couvertes par ce groupe (si colgroup est sans enfants col).

Notes

Propriétés CSS limitées : seules certaines propriétés CSS fonctionnent sur <col> et <colgroup> : background, border, visibility, width. Les autres propriétés (comme text-align) ne s’appliquent pas.

Support navigateurs

Chrome1+ · Firefox1+ · Safari≤4+ · Edge12+