English

<colgroup>

Styliser des colonnes entières sans répéter le CSS dans chaque cellule

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<colgroup> + <col> — Styliser les colonnes

<colgroup> définit un groupe de colonnes dans un tableau. <col> représente une ou plusieurs colonnes au sein de ce groupe. Ils permettent d'appliquer des styles ou des attributs a des colonnes entières sans répéter des classes sur chaque <td>.

Quand l'utiliser

Tu veux mettre en évidence une colonne, par exemple surligner la colonne "Total" ou appliquer une largeur fixe à la première colonne. Place <colgroup> après <caption> et avant <thead>.

Ce que tu gagnes

Accessibilité : <colgroup> et <col> n'ont pas d'impact direct sur les technologies d'assistance, mais ils encouragent une structure de tableau propre. L'attribut span permet de grouper des colonnes logiquement liées.

Exemple de code

<table>
  <caption>Team allocation</caption>
  <colgroup>
    <col />
    <col span="2" class="highlight" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Project A</th>
      <th scope="col">Project B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>80%</td>
      <td>20%</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
  </tbody>
</table>

Pour aller plus loin