---
title: '<col> : l''élément représentant une colonne'
slug: Web/HTML/Element/col
tags:
  - Element
  - HTML
  - HTML tabular data
  - Reference
  - Tables
  - Web
translation_of: Web/HTML/Element/col
browser-compat: html.elements.col
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;col&gt;</code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div>

<table class="properties">
  <tbody>
    <tr>
      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégorie de contenu</a></th>
      <td>Aucune.</td>
    </tr>
    <tr>
      <th scope="row">Contenu autorisé</th>
      <td>Aucun, cet élément est un élément vide.</td>
    </tr>
    <tr>
      <th scope="row">Omission de balise</th>
      <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td>
    </tr>
    <tr>
      <th scope="row">Parents autorisés</th>
      <td><a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> ne doit pas avoir d'attribut <a href="/fr/docs/Web/HTML/Element/colgroup#attr-span"><code>span</code></a>.</td>
    </tr>
    <tr>
      <th scope="row">Rôle ARIA implicite</th>
      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
    </tr>
    <tr>
      <th scope="row">Rôles ARIA autorisés</th>
      <td>Aucun rôle autorisé.</td>
    </tr>
    <tr>
      <th scope="row">Interface DOM</th>
      <td><a href="/fr/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td>
    </tr>
  </tbody>
 </table>

 <h2 id="attributes">Attributs</h2>

 <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
 
 <dl>
  <dt><strong><code>span</code></strong></dt>
  <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code>&lt;col&gt;</code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>.</dd>
 </dl>
 
 <h3 id="deprecated_attributes">Attributs dépréciés</h3>
 
 <p>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.</p>
 
 <dl>
  <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt>
  <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
  <ul>
    <li><code>left</code>, aligner le contenu à gauche de la cellule</li>
    <li><code>center</code>, centrer le contenu dans la cellule</li>
    <li><code>right</code>, aligner le contenu à droite de la cellule</li>
    <li><code>justify</code>, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule</li>
  </ul>
 
  <p>Si cet attribut n'est pas défini, sa valeur est héritée du <a href="/fr/docs/Web/HTML/Element/colgroup#attr-align"><code>align</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> auquel appartient cet <code>&lt;col&gt;</code>. S'il n'y en a pas, la valeur <code>left</code> est supposée.</p>

  <div class="note">
    <p><strong>Note :</strong></p>

    <ul>
      <li>Pour obtenir le même effet que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> :

        <ul>
          <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <code>&lt;col&gt;</code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <code>&lt;col&gt;</code>, ils n'en hériteront pas.</li>
          <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code>. Définissez <code>a</code> à zéro et <code>b </code> à la position de la colonne dans le tableau, par exemple <code>td:nth-child(2) { text-align : right ; }</code> pour aligner à droite la deuxième colonne.</li>
          <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
        </ul>
      </li>
    </ul>
  </div>
  </dd>
  <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt>
  <dd>
  <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p>
 
  <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p>
  </dd>
  <dt><strong><code>char</code></strong> {{deprecated_inline}}</dt>
  <dd>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 <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré.</dd>
  <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt>
  <dd>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 <code>char</code>.</dd>
  <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt>
  <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
    <ul>
      <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">base</a> 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 <code>bottom</code> ;</li>
      <li><code>bottom</code>, placera le texte aussi près du bas de la cellule que possible ;</li>
      <li><code>middle</code>, permet de centrer le texte dans la cellule ;</li>
      <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li>
    </ul>
  
    <div class="note">
      <p><strong>Note :</strong></p>
  
      <ul>
        <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code>&lt;col&gt;</code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <code>&lt;col&gt;</code>, ils n'en hériteront pas.</li>
        <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> 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é <code>vertical-align</code> peut être utilisée.</li>
        <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
      </ul>
    </div>
  </dd>
  <dt><strong><code>width</code></strong> {{deprecated_inline}}</dt>
  <dd>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 <code>0*</code>, 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 <code>5*</code> peuvent également être utilisées.</dd>
 </dl>

 <h2 id="examples">Exemples</h2>

 <p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> pour des exemples sur <code>&lt;colgroup&gt;</code>.</p>

<h2 id="specifications">Spécifications</h2>

<p>{{Specifications}}</p>

<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat}}</p>

<h2 id="see_also">Voir aussi</h2>

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