aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/html/element/col
diff options
context:
space:
mode:
authortristantheb <tristantheb@users.noreply.github.com>2021-06-19 10:25:05 +0200
committerGitHub <noreply@github.com>2021-06-19 10:25:05 +0200
commita47584de1bd47788cb5aa6178fa88b31977b2a8e (patch)
tree1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/col
parent1b0940218952a8132ceb9e4b56792ad47e94d552 (diff)
downloadtranslated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz
translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2
translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip
UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)
* UPDATE: Updating pages starting with A * FIX: Update missing KS to html anchor * Review HTML Element a * Review HTML Element abbr * Review HTML Element acronym * Review HTML Element address * Review HTML Element applet * Review HTML Element area * Review HTML Element article * Review HTML Element aside * Review HTML Element audio * UPDATE: Updating pages wtarting with B * Review HTML Element b * Review HTML Element base * Review HTML Element basefont * Review HTML Element bdi * Review HTML Element bdo * Review HTML Element big * Review HTML Element blink * Review HTML Element blockquote * Review HTML Element body * Review HTML Element br * Review HTML Element button * Review HTML Element button - rm HTMLRef * Review HTML Element button - lint link * UPDATE: Updating pages starting with C * UPDATE: Updating pages starting with D * UPDATE: Refresh the reference page * UPDATE: Updating pages starting with E * Review HTML Element canvas * Review HTML Element caption * Review HTML Element center * Review HTML Element cite * UPDATE: Updating pages starting with F * BCD: Update all updated pages with new BCD format * FIX: add missing bracket * Review - HTML element - code * Review - HTML Element - col * Review - HTML Element - colgroup * Review - HTML Element - content * Review - HTML Element - data * Review - HTML Element - datalist * Review - HTML Element - dd * Review - HTML Element - del * Review - HTML Element * Review - HTML Element - dfn * Review - HTML Element - dialog * Review - HTML element - dir * Review - HTML Element div * Review - HTML Element - dl * Review - HTML Element - dt * Review - HTML Element - em * Review - HTML Element - embed * Review - HTML Element - fieldset * Review - HTML Element - figcaption * Review - HTML Element - figure * Review - HTML Element - font * Review - HTML Element - footer * Review - HTML Element - form * Review - HTML Element - frame * Review - HTML Element - frameset * Review updates since PR start - A * Review updates since PR start - B * Review updates since PR start - C * Review updates since PR start - D * Review updates since PR start - F Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/col')
-rw-r--r--files/fr/web/html/element/col/index.html377
1 files changed, 124 insertions, 253 deletions
diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html
index 6bae79df54..77709ea9a9 100644
--- a/files/fr/web/html/element/col/index.html
+++ b/files/fr/web/html/element/col/index.html
@@ -1,277 +1,148 @@
---
-title: <col>
+title: '<col> : l''élément représentant une colonne'
slug: Web/HTML/Element/col
tags:
- Element
- HTML
+ - HTML tabular data
- Reference
- - Tableau
+ - 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 {{HTMLElement("colgroup")}}.</p>
+<p class="summary">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>
-<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
-
-<p>Cet élément peut être mis en forme grâce à CSS mais seules quelques propriétés auront un effet sur la colonne (se référer à <a href="https://www.w3.org/TR/CSS21/tables.html#columns">la spécification CSS 2.1</a> pour une liste exhaustive)</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> avec cet élément.</p>
-
-<dl>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd>Cet attribut énuméré définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
- <ul>
- <li><code>left</code> : le contenu de la cellule est aligné à gauche de la cellule</li>
- <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
- <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
- <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
- <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
-
- <p>Si cet attribut n'est pas renseigné, sa valeur est héritée de la valeur de l'attribut {{htmlattrxref("align", "colgroup")}} de l'élément {{HTMLElement("colgroup")}} auquel cette colonne appartient. S'il n'y en a pas, la valeur <code>left</code> est prise comme valeur par défaut.</p>
-
- <div class="warning"><strong>Attention : </strong>Cet attribut est devenu obsolète dans le dernier standard.
-
- <ul>
- <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> :
-
- <ul>
- <li>N'utilisez pas la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("col")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("col")}} il n'hériteront pas de cette propriété.</li>
- <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>td:nth-child(an+b)</code> avec a qui vaut zéro et  <code>b</code> la position ordinale de la colonne dans le tableau. <code>td:nth-child(2) { text-align: right; }</code> permettra d'aligner à droite la deuxième colonne.</li>
- <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à effectuer.</li>
- </ul>
- </li>
- <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "col")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
- <table>
+<table class="properties">
<tbody>
- <tr>
- <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>black</code> = "#000000"</td>
- <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>green</code> = "#008000"</td>
- </tr>
- <tr>
- <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>silver</code> = "#C0C0C0"</td>
- <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>lime</code> = "#00FF00"</td>
- </tr>
- <tr>
- <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>gray</code> = "#808080"</td>
- <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>olive</code> = "#808000"</td>
- </tr>
- <tr>
- <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>white</code> = "#FFFFFF"</td>
- <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>yellow</code> = "#FFFF00"</td>
- </tr>
- <tr>
- <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>maroon</code> = "#800000"</td>
- <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>navy</code> = "#000080"</td>
- </tr>
- <tr>
- <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>red</code> = "#FF0000"</td>
- <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>blue</code> = "#0000FF"</td>
- </tr>
- <tr>
- <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>purple</code> = "#800080"</td>
- <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>teal</code> = "#008080"</td>
- </tr>
- <tr>
- <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>fuchsia</code> = "#FF00FF"</td>
- <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
- <td><code>aqua</code> = "#00FFFF"</td>
- </tr>
+ <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>
- <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("col")}} doit être mis en forme grâce au CSS. Pour obtenir un effet semblable à celui obtenu avec l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules de la colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
- <dd>
- <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "col")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
- <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("span")}}</dt>
- <dd>Cet attribut contient un entier positif indiquand le nombre de colonne consécutives regroupées sous l'élément <code>&lt;col&gt;</code>. La valeur par défaut de cet attribut est 1.</dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
- <ul>
- <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
- <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
- <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
- <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser.
-
- <ul>
- <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("col")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("col")}}, ils n'hériteront pas de la propriété.</li>
- <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes dans le tableau et b la position ordinale de la colonne dans le tableau. La propriété {{cssxref("vertical-align")}} peut alors être utilisée sur le sélecteur.</li>
- <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li>
- </ul>
- </div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
- <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. Utiliser cette notation de manière relative (par exemple <code>0.5*</code> ) est également possible.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
- &lt;colgroup&gt;
- &lt;col class="premiereColonne"&gt;
- &lt;col class="deuxDernieresColonnes" span="2"&gt;
- &lt;/colgroup&gt;
- &lt;tr&gt;
- &lt;th&gt;Citron vert&lt;/th&gt;
- &lt;th&gt;Citron&lt;/th&gt;
- &lt;th&gt;Orange&lt;/th&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
- &lt;td&gt;Vert&lt;/td&gt;
- &lt;td&gt;Jaune&lt;/td&gt;
- &lt;td&gt;Orange&lt;/td&gt;
- &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">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>{{HTMLElement("colgroup")}} uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'attribut {{htmlattrxref("span", "colgroup")}}.</td>
- </tr>
- <tr>
- <th scope="row">Rôles ARIA autorisés</th>
- <td>Aucun.</td>
- </tr>
- <tr>
- <th scope="row">Interface DOM</th>
- <td>{{domxref("HTMLTableColElement")}}</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '&lt;col&gt;')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</td>
- <td>{{Spec2('HTML4.01')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
-
-<p>{{Compat("html.elements.col")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux :
+ <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 id="attr-span"><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 id="attr-align"><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>{{HTMLElement("caption")}}</li>
- <li>{{HTMLElement("colgroup")}}</li>
- <li>{{HTMLElement("table")}}</li>
- <li>{{HTMLElement("tbody")}}</li>
- <li>{{HTMLElement("td")}}</li>
- <li>{{HTMLElement("tfoot")}}</li>
- <li>{{HTMLElement("th")}}</li>
- <li>{{HTMLElement("thead")}}</li>
- <li>{{HTMLElement("tr")}}</li>
+ <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>
- </li>
- <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code>&lt;col&gt;</code> :
+
+ <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="notecard note">
+ <p><b>Note :</b></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 id="attr-bgcolor"><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 id="attr-char"><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 id="attr-charoff"><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 id="attr-valign"><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="notecard note">
+ <p><b>Note :</b></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 id="attr-width"><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é {{cssxref("width")}} pour contrôler la largeur de la colonne</li>
- <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement sur les cellules d'une colonne</li>
- <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu de cellules sur le même caractère (le point « . » par exemple).</li>
+ <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>