HTML - Groupe de colonnes de tableau

Syntaxe et utilisation

L'élément <colgroup> en HTML regroupe les colonnes dans un tableau et applique des styles ou un formatage à ces colonnes. Il est placé à l'intérieur de l'élément <table>, généralement après l'élément <caption> (s'il est présent) et avant tout élément <thead>, <tbody> ou <tfoot>.

<table>
  <colgroup>
    <col>
    <col>
    ...
  </colgroup>
  ...
</table>

À l'intérieur de l'élément <colgroup>, vous pouvez utiliser un ou plusieurs éléments <col> pour représenter chaque colonne ou un groupe de colonnes. Les éléments <col> sont vides et n'ont pas de contenu. Ils servent de référence pour appliquer des styles ou des attributs aux colonnes correspondantes.

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
    <th>Colonne 3</th>
    <th>Colonne 4</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

L'élément <colgroup> contient quatre éléments <col>. Les premier et quatrième éléments <col> représentent des colonnes uniques, tandis que le deuxième élément <col> a un attribut span défini à "2", indiquant qu'il s'étend sur deux colonnes (Colonne 2 et Colonne 3).

En utilisant les éléments <colgroup> et <col>, vous pouvez appliquer des styles ou des attributs à des colonnes spécifiques ou à des groupes de colonnes dans un tableau. Cela est utile lorsque vous souhaitez définir un formatage ou un style cohérent pour certaines colonnes sans avoir à répéter les styles pour chaque cellule de ces colonnes.

Attributs

L'élément <colgroup> prend en charge plusieurs attributs qui vous permettent de contrôler le style et le comportement des groupes de colonnes dans un tableau.

<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="width: 200px;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col class="highlight">
    <col class="data">
  </colgroup>
  ...
</table>

.highlight {
  background-color: yellow;
}

.data {
  text-align: center;
}

Mise en forme des colonnes

L'élément <colgroup> en HTML offre plusieurs façons de mettre en forme les colonnes dans un tableau. Vous pouvez définir des couleurs d'arrière-plan, ajuster les largeurs des colonnes, et appliquer des bordures et des marges intérieures aux groupes de colonnes.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
    <col style="background-color: #d9d9d9;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 50%;">
    <col style="width: 20%;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="padding: 5px;">
  </colgroup>
  ...
</table>

Considérations d'accessibilité

Lors de l'utilisation de l'élément <colgroup> dans les tableaux HTML, il est important de tenir compte de l'accessibilité pour les utilisateurs qui dépendent de technologies d'assistance, comme les lecteurs d'écran. Une utilisation appropriée de <colgroup> peut contribuer à améliorer l'accessibilité de vos tableaux.

Une façon d'utiliser <colgroup> pour l'accessibilité consiste à associer des groupes de colonnes aux en-têtes de tableau. Cela aide à établir une relation claire entre les en-têtes et les cellules de données correspondantes. Vous pouvez y parvenir en utilisant l'attribut scope sur les éléments <th> pour indiquer s'il s'agit d'en-têtes pour des lignes ou des colonnes.

<table>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">En-tête 1</th>
      <th scope="colgroup" colspan="2">En-tête 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donnée 1</td>
      <td>Donnée 2</td>
      <td>Donnée 3</td>
    </tr>
  </tbody>
</table>

Le premier élément <th> a un attribut scope défini sur "col", indiquant qu'il s'agit d'un en-tête pour la première colonne. Le deuxième élément <th> a un attribut scope défini sur "colgroup" et un attribut colspan défini sur "2", indiquant qu'il s'agit d'un en-tête pour les deuxième et troisième colonnes, qui sont regroupées à l'aide de <colgroup>.

En associant correctement les en-têtes aux groupes de colonnes, les lecteurs d'écran peuvent fournir des informations plus significatives et contextuelles aux utilisateurs. Cela permet aux utilisateurs de comprendre la relation entre les en-têtes et les cellules de données dans chaque groupe de colonnes.

Une autre considération d'accessibilité est d'éviter d'utiliser <colgroup> à des fins purement visuelles. Bien que <colgroup> puisse être utilisé pour appliquer des styles et du formatage aux colonnes, il est important de l'utiliser d'une manière qui ne repose pas uniquement sur des indices visuels. Par exemple, si vous utilisez des couleurs de fond pour transmettre du sens ou du regroupement, assurez-vous de fournir du texte alternatif ou des étiquettes qui décrivent le but des groupes de colonnes pour les utilisateurs qui ne peuvent pas percevoir les couleurs.

<table>
  <colgroup>
    <col class="categorie">
    <col span="2" class="valeurs">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Catégorie</th>
      <th scope="colgroup" colspan="2">Valeurs</th>
    </tr>
  </thead>
  ...
</table>

.categorie::before {
  content: "Catégorie : ";
}

.valeurs::before {
  content: "Valeurs : ";
}

Les éléments <colgroup> ont des noms de classe "categorie" et "valeurs". Les règles CSS correspondantes utilisent le pseudo-élément ::before pour fournir du texte alternatif pour chaque groupe de colonnes. Ce texte alternatif est accessible aux lecteurs d'écran et aide à transmettre le but des groupes de colonnes aux utilisateurs qui ne peuvent pas percevoir visuellement le style.

En tenant compte de l'accessibilité lors de l'utilisation de <colgroup>, vous pouvez créer des tableaux plus inclusifs et utilisables pour un plus large éventail d'utilisateurs. L'association appropriée des groupes de colonnes avec les en-têtes et la fourniture de texte alternatif pour les indices visuels améliorent l'accessibilité de vos tableaux.

Compatibilité des navigateurs

L'élément <colgroup> est pris en charge par les navigateurs web modernes, notamment Chrome, Firefox, Safari, Opera et Internet Explorer. La plupart des navigateurs prennent en charge <colgroup> depuis longtemps, et vous pouvez l'utiliser dans vos tableaux HTML sans vous soucier des problèmes de compatibilité.

Cependant, si vous devez prendre en charge des navigateurs plus anciens ou gérer des cas particuliers, vous pouvez envisager quelques stratégies de repli.

Une approche consiste à utiliser CSS pour styliser directement les colonnes du tableau, sans s'appuyer sur <colgroup>. Vous pouvez cibler des colonnes spécifiques en utilisant des sélecteurs CSS comme :nth-child() ou :nth-of-type() et appliquer les styles en conséquence.

<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <td>Données 1</td>
    <td>Données 2</td>
    <td>Données 3</td>
  </tr>
</table>

table th:nth-child(1),
table td:nth-child(1) {
  background-color: #f2f2f2;
}

table th:nth-child(2),
table td:nth-child(2) {
  background-color: #e6e6e6;
}

table th:nth-child(3),
table td:nth-child(3) {
  background-color: #d9d9d9;
}

Une autre stratégie de repli consiste à utiliser des styles en ligne sur les cellules individuelles du tableau. Au lieu d'appliquer des styles aux éléments <colgroup> ou <col>, vous pouvez ajouter l'attribut style à chaque élément <th> ou <td> dans les colonnes que vous souhaitez styliser.

<table>
  <tr>
    <th style="background-color: #f2f2f2;">En-tête 1</th>
    <th style="background-color: #e6e6e6;">En-tête 2</th>
    <th style="background-color: #d9d9d9;">En-tête 3</th>
  </tr>
  <tr>
    <td style="background-color: #f2f2f2;">Données 1</td>
    <td style="background-color: #e6e6e6;">Données 2</td>
    <td style="background-color: #d9d9d9;">Données 3</td>
  </tr>
</table>

Bien que cette approche fonctionne, elle peut être moins efficace et plus difficile à maintenir par rapport à l'utilisation de <colgroup> ou de CSS externe. Cependant, elle peut servir de solution de repli pour les navigateurs qui ne prennent pas en charge <colgroup>.

Ces stratégies de repli peuvent ne pas être nécessaires dans la plupart des cas, car <colgroup> bénéficie d'une excellente prise en charge par les navigateurs. À moins que vous n'ayez des exigences spécifiques pour prendre en charge des navigateurs très anciens, vous pouvez utiliser <colgroup> dans vos tableaux HTML.

Si vous rencontrez des problèmes de compatibilité avec les navigateurs, vous pouvez consulter des ressources en ligne comme Can I Use (https://caniuse.com/) ou MDN Web Docs (https://developer.mozilla.org/) pour vérifier la compatibilité de <colgroup> avec différentes versions de navigateurs et prendre des décisions en fonction de votre public cible et de vos exigences en matière de prise en charge des navigateurs.

Exemples

Dans cette section, nous examinerons des exemples d'utilisation de l'élément <colgroup> dans les tableaux HTML. Nous commencerons par un exemple de base, puis passerons à un style plus avancé et à une conception de tableau responsive.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
  </colgroup>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
  <tr>
    <td>Donnée 4</td>
    <td>Donnée 5</td>
    <td>Donnée 6</td>
  </tr>
</table>

<table>
  <colgroup>
    <col class="highlight">
    <col class="data" span="2">
  </colgroup>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
  <tr>
    <td>Donnée 4</td>
    <td>Donnée 5</td>
    <td>Donnée 6</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
}

.highlight {
  background-color: #f2f2f2;
  font-weight: bold;
}

.data {
  background-color: #e6e6e6;
}

<table>
  <colgroup>
    <col class="column1">
    <col class="column2">
    <col class="column3">
  </colgroup>
  <thead>
    <tr>
      <th>En-tête 1</th>
      <th>En-tête 2</th>
      <th>En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donnée 1</td>
      <td>Donnée 2</td>
      <td>Donnée 3</td>
    </tr>
    <tr>
      <td>Donnée 4</td>
      <td>Donnée 5</td>
      <td>Donnée 6</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
}

.column1 {
  width: 30%;
}

.column2 {
  width: 40%;
}

.column3 {
  width: 30%;
}

@media screen and (max-width: 600px) {
  .column1,
  .column2,
  .column3 {
    width: 100%;
  }
}