<col> : l'élément représentant une colonne

Exemple interactif

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Attributs

Cet élément inclut les attributs universels.

span

Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <col> couvre. S'il n'est pas présent, sa valeur par défaut est 1.

Attributs dépréciés

Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.

align Obsolète

Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :

• left, aligner le contenu à gauche de la cellule
• center, centrer le contenu dans la cellule
• right, aligner le contenu à droite de la cellule
• justify, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule

Si cet attribut n'est pas défini, sa valeur est héritée du align de l'élément <colgroup> auquel appartient cet <col>. S'il n'y en a pas, la valeur left est supposée.

Note :

• Pour obtenir le même effet que les valeurs left, center, right ou justify :
  • N'essayez pas de définir la propriété text-align sur un sélecteur donnant un élément <col>. Comme les éléments <td> ne sont pas des descendants de l'élément <col>, ils n'en hériteront pas.
  • Si le tableau n'utilise pas d'attribut colspan, utilisez le sélecteur CSS td:nth-child(an+b). Définissez a à zéro et b à la position de la colonne dans le tableau, par exemple td:nth-child(2) { text-align : right ; } pour aligner à droite la deuxième colonne.
  • Si le tableau utilise bien un attribut colspan, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme [colspan=n], bien que cela ne soit pas trivial.

bgcolor Obsolète

La couleur de fond du tableau. Il s'agit d'un code RVB hexadécimal à 6 chiffres, préfixé par un « # ». L'un des mots-clés de couleur prédéfinis peut également être utilisé.

Pour obtenir un effet similaire, utilisez la propriété CSS background-color.

char Obsolète

Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré.

charoff Obsolète

Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut char.

valign Obsolète

Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :

• baseline, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la base des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que bottom ;
• bottom, placera le texte aussi près du bas de la cellule que possible ;
• middle, permet de centrer le texte dans la cellule ;
• and top, placera le texte aussi près du haut de la cellule que possible.

Note :

• N'essayez pas de définir la propriété vertical-align sur un sélecteur donnant un élément <col>. Comme les éléments <td> ne sont pas des descendants de l'élément <col>, ils n'en hériteront pas.
• Si le tableau n'utilise pas d'attribut colspan, utilisez le sélecteur CSS td:nth-child(an+b) où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété vertical-align peut être utilisée.
• Si le tableau utilise bien un attribut colspan, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme [colspan=n], bien que cela ne soit pas trivial.

width Obsolète

Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale 0*, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que 5* peuvent également être utilisées.

Exemples

Veuillez consulter la page <table> pour des exemples sur <colgroup>.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés et pseudo-classes CSS qui peuvent être spécialement utiles pour mettre en forme l'élément <col> :
  • la propriété width pour contrôler la largeur de la colonne ;
  • la pseudo-classe :nth-child pour définir l'alignement des cellules de la colonne ;
  • la propriété text-align pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».