W3docs
fr
Se connecter

Balise HTML <col>

La balise <col> définit les propriétés des colonnes d'un tableau HTML. Description, attributs et exemples d'utilisation.

La balise <col> définit les propriétés d'une ou plusieurs colonnes dans un tableau HTML créé avec la balise <table>. Elle permet de cibler des colonnes entières d'un coup, au lieu de styliser chaque cellule <td> individuellement. La balise <col> est presque toujours utilisée à l'intérieur de la balise <colgroup>, qui regroupe une ou plusieurs colonnes partageant des propriétés communes.

La balise <col> est placée à l'intérieur de la balise <table>, avant les balises <thead>, <tbody>, <tfoot> et <tr>, et après la balise <caption> si elle est utilisée (dans la balise <caption>, on insère le nom du tableau).

Pourquoi utiliser <col> ?

Une cellule de tableau se trouve à l'intersection d'une ligne et d'une colonne, mais la structure HTML est orientée lignes en premier : <tr> regroupe les cellules horizontalement, et il n'existe pas d'élément qui regroupe les cellules verticalement ligne par ligne. L'élément <col> comble ce vide. Au lieu d'appliquer les mêmes valeurs de width, background-color ou border à chaque <td> d'une colonne, vous les déclarez une seule fois sur un <col>, et le navigateur les applique à toute la colonne.

Cela est particulièrement utile lorsque vous souhaitez :

  • Donner à une colonne une largeur fixe ou proportionnelle (par exemple, rendre la première colonne étroite et la dernière large).
  • Mettre en évidence une colonne avec une couleur d'arrière-plan pour attirer l'œil du lecteur.
  • Appliquer une bordure à une colonne pour la séparer visuellement.

Gardez à l'esprit une limitation importante : un élément <col> ne contient pas de contenu et ne peut pas être stylisé librement. Les navigateurs n'appliquent qu'un petit ensemble de propriétés CSS via <col> — background, border, width et visibility. Les propriétés telles que padding, color ou font-size sont ignorées sur <col> ; pour celles-ci, vous devez styliser directement les cellules <td>/<th>.

Syntaxe

La balise <col> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Mais en XHTML, la balise <col> doit être auto-fermante (<col />). En HTML5 moderne, la barre oblique de fermeture est omise (<col>).

Exemple de la balise HTML <col> :

Balise HTML <col>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>
Essayez vous-même »

Résultat

Result

L'attribut span

L'attribut span indique à un élément <col> de couvrir plusieurs colonnes consécutives. Cela évite de répéter le même <col> pour des colonnes adjacentes qui doivent avoir le même aspect. La valeur doit être un entier positif ; la valeur par défaut est 1.

Dans l'exemple ci-dessous, un seul <col span="3"> stylise les trois premières colonnes en même temps, tandis qu'un deuxième <col> stylise la quatrième colonne séparément :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Styliser les colonnes avec CSS

Les attributs align, valign et width sont obsolètes en HTML5 — ils ont été supprimés de la spécification et vous ne devriez pas vous y fier. L'approche moderne consiste à définir les largeurs et les autres propriétés prises en charge avec CSS, plutôt qu'avec des attributs de présentation inline.

Vous pouvez cibler un <col> directement, ou lui donner une class et styliser cette classe. Comme width est l'une des propriétés qui s'applique via <col>, cela fonctionne bien :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>
Avertissement

Seul un ensemble limité de propriétés CSS prend effet lorsqu'elles sont appliquées à <col> : background, border, width et visibility (par exemple visibility: collapse pour masquer une colonne). Les propriétés comme padding, color, text-align et font-size sont ignorées sur la colonne et doivent être définies sur les cellules <td> ou <th> à la place.

Accessibilité

Les éléments <col> et <colgroup> sont purement présentationnels — ils regroupent les colonnes visuellement mais ne créent pas de relation sémantique annoncée par les lecteurs d'écran. Un lecteur d'écran navigue dans un tableau cellule par cellule en utilisant les associations de ligne (<tr>) et d'en-tête (<th>), et non les groupes de colonnes.

Pour qu'un tableau de données soit compréhensible lorsqu'il est lu hors séquence :

  • Utilisez des cellules d'en-tête <th> appropriées avec l'attribut scope (scope="col" pour les en-têtes de colonne) afin que chaque cellule de données soit liée à son en-tête.
  • Fournissez un <caption> pour donner un nom au tableau.
  • N'utilisez pas background-color sur un <col> comme seul moyen de transmettre une signification (par exemple, colonnes « valides » ou « invalides »), car la couleur est invisible pour les utilisateurs de lecteurs d'écran et pour les personnes qui ne peuvent pas la distinguer. Associez-la à du texte ou à une icône.

Attributs

AttributValeurDescription
spannumberDéfinit le nombre de colonnes dont les propriétés sont déterminées par l'élément <col>. La valeur doit être un entier positif. Si le paramètre n'est pas spécifié, la valeur par défaut est 1.
alignleft, right, center, justify, charDéfinit l'alignement horizontal du contenu de la colonne. Obsolète en HTML5 — utilisez la propriété CSS text-align sur les cellules <td>/<th> à la place.
charcharacterAligne le contenu de la colonne sur un caractère. Utilisé uniquement avec align="char". Obsolète en HTML5.
charoffnumberDécale le contenu par rapport au caractère d'alignement. Utilisé uniquement avec align="char". Obsolète en HTML5.
valigntop, middle, bottom, baselineAligne le contenu verticalement. Obsolète en HTML5 — utilisez la propriété CSS vertical-align sur les cellules à la place.
width%, pixels, relative_lengthDéfinit la largeur de la colonne. Obsolète en HTML5 — utilisez la propriété CSS width sur le <col> (par ex. col { width: 40%; }) à la place.

span est le seul attribut encore défini pour <col> en HTML5. Tout ce qui était autrefois fait avec align, valign et width se fait maintenant avec CSS, comme illustré dans la section « Styliser les colonnes avec CSS » ci-dessus.

La balise <col> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

Pratique
Que fait la balise HTML col dans un tableau ?
Que fait la balise HTML col dans un tableau ?
Was this page helpful?