---
title: <col>
slug: Web/HTML/Element/col
tags:
  - Element
  - HTML
  - HTML tabular data
  - Referencia
  - Tables
  - Web
translation_of: Web/HTML/Element/col
---
<div>{{HTMLRef}}</div>

<p>L'<em>Element HTML taula de columna</em> (<strong>&lt;col&gt;</strong>) defineix una columna d'una taula i s'utilitza per definir la semàntica comú en totes les cèl·lules comunes. En general es troba dins d'un element {{HTMLElement("colgroup")}}.</p>

<p>Aquest element permet columnes d'estil usant CSS,  però només alguns atributs tindran un efecte en la columna (<a href="http://www.w3.org/TR/CSS21/tables.html#columns">vegeu l'especificació de CSS 2.1 </a>llistat).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><span class="short_text" id="result_box" lang="ca"><span>Cap</span><span>, és un</span></span> {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td><span id="result_box" lang="ca"><span>L'etiqueta</span> <span>d'inici és</span> <span>obligatoria,</span> <span>però</span><span>,</span> <span>ja</span> <span>que és un</span> <span>element</span> <span>buit,</span> <span>està prohibit l'ús</span> <span>d'una etiqueta</span> <span>de tancament.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Només {{HTMLElement("colgroup")}}, encara que pot estar implícitament definida com la seva etiqueta d'inici no és obligatòria. El {{HTMLElement("colgroup")}} no ha de tenir un atribut {{htmlattrxref("span", "colgroup")}}.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLTableColElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Aquest atribut enumerat especifica com es gestionarà l'alineació horitzontal del contingut de cada cel·la de la columna. Els valors possibles són:
 <ul>
  <li><code>left</code>, alineació del contingut a l'esquerra de la cel·la</li>
  <li><code>center</code>, centrar el contingut en la cel·la</li>
  <li><code>right</code>, alineació del contingut a la dreta de la cel·la</li>
  <li><code>justify</code>, inserció d'espais en el contingut textual de manera que el contingut es justifica en la cel·la</li>
  <li><code>char</code>,alineació del contingut textual d'un caràcter especial amb un desplaçament mínim, definit pels atributs {{htmlattrxref("char", "col")}} i {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li>
 </ul>

 <p>Si aquest atribut no està definit, el seu valor s'hereta d'{{htmlattrxref("align", "colgroup")}} de l'element {{HTMLElement("colgroup")}} i en el qual també pertany l'element <code>&lt;col&gt;</code>. Si no n'hi ha, s'assumeix el valor de l'esquerra.</p>

 <div class="note"><strong>Note: </strong>No utilitzeu aquest atribut, ja que és obsolet (no suportat) en l'últim estàndard.

 <ul>
  <li>Per aconseguir el mateix efecte qu'els valors <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> :

   <ul>
    <li>No tracteu d'establir la propietat {{HTMLElement("col")}} en un selector aplicant-ho a un element {{HTMLElement("col")}}. Perquè els elements {{HTMLElement("td")}} no són descendents de l'element {{HTMLElement("col")}}, ells no heretaran.</li>
    <li>Si la taula no utilitza un atribut {{htmlattrxref("colspan", "td")}} , utilitzeu el selector CSS <code>td:nth-child(an+b)</code>  on a és el nombre total de les columnes de la taula i b és la posició ordinal de la columna a la taula. Només després d'aquest selector la propietat {{cssxref("text-align")}} es pot utilitzar.</li>
    <li>Si la taula fa ús d'un atribut {{htmlattrxref("colspan", "td")}}, l'efecte es pot aconseguir mitjançant la combinació adequada de selectors d'atributs CSS com<code> [colspan = n]</code>, encara que això no és trivial</li>
   </ul>
  </li>
  <li>Per aconseguir el mateix efecte que el valor {{htmlattrxref("char", "col")}}, en CSS3, pot utilitzar el valor de char com el valor de la propietat {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
 <dd>Aquest atribut defineix el color de fons de cada cel·la de la columna. És un codi  de 6 dígits hexadecimal definits en <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, precedit per un '#'.<br>
 Una de les setze cadenes de color predefinides que es poden utilitzar:
 <table style="width: 80%;">
  <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>
  </tbody>
 </table>

 <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que no és estàndard i només implementat en algunes versions de Microsoft Internet Explorer: l'element {{HTMLElement("col")}} ha de ser d'estil amb <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>. Per donar un efecte similar a l'atribut bgcolor, utilitzeu la propietat <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> {{cssxref("background-color")}}, en els elements {{HTMLElement("td")}} pertinents.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Aquest atribut s'utilitza per establir el caràcter per alinear les cel·les d'una columna a. Els valors típics d'això inclouen un punt (.) en intentar alinear números o valors monetaris. Si no s'estableix {{htmlattrxref("align", "col")}} a char, aquest atribut s'ignora.
 <div class="note"><strong>Note: </strong>No utilitzeu aquest atribut, ja que és obsolet (i no és compatible) en l'últim estàndard. Per aconseguir el mateix efecte com el {{htmlattrxref("char", "col")}}, en CSS3, pots utilitzar el joc de caràcters utilitzant l'atribut {{htmlattrxref("char", "col")}} com el valor de la propietat {{cssxref("text-align")}} {{unimplemented_inline}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Aquest atribut s'utilitza per indicar el nombre de caràcters per compensar les dades de la columna dels caràcters d'alineació especificat per l'atribut char.
 <div class="note"><strong>Note: </strong>No utilitzeu aquest atribut, ja que és obsolet (i no és compatible) en l'últim estàndard.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("span")}}</dt>
 <dd>Aquest atribut conté un enter positiu que indica el nombre de columnes consecutives que abasta l'element &lt;col&gt;. Si no hi és, el seu valor per defecte és 1.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Aquest</span> <span>atribut</span> <span>especifica</span> <span>l'alineació</span> <span>vertical del</span> <span>text</span> <span>dins de cada</span> <span>cel·la de la</span> <span>columna.</span> <span>Els</span> <span>valors</span> <span>possibles</span> <span>per</span> <span>aquest atribut</span> <span>són</span><span>:</span></span>
 <ul>
  <li><code>baseline</code>, posarà el text tan a prop del fons de la cel·la com sigui possible, però alineant-ho sobre la <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> dels caràcters en lloc de la part inferior d'ells. Si els caràcters són tots de la mida, això té el mateix efecte que <code>bottom</code> .</li>
  <li><code>bottom</code>, posarà el text tan a prop de la part inferior de la cel·la com sigui possible.</li>
  <li><code>middle</code>, centrarà el text en la <span id="result_box" lang="ca"><span>cel·la.</span></span></li>
  <li>and <code>top</code>, posarà el text tan com sigui possible a la part superior de la cel·la.</li>
 </ul>

 <div class="note"><strong>Nota: </strong> <span id="result_box" lang="ca"><span>No utilitzeu</span> <span>aquest</span> <span>atribut,</span> <span>ja</span> <span>que és</span> <span>obsolet</span> <span>(</span><span>i no</span> <span>és compatible</span><span>)</span> <span>en l'últim</span> <span>estàndard</span><span>:</span></span>

 <ul>
  <li>No tracteu d'establir la propietat {{cssxref("vertical-align")}} en un selector aplicant-ho a un element {{HTMLElement("col")}} Perquè els elements {{HTMLElement("td")}} no són descendents de l'element {{HTMLElement("col")}}, ells no heretaran.</li>
  <li>Si la taula no utilitza un atribut {{htmlattrxref("colspan", "td")}} , utilitzeu el selector CSS <code>td:nth-child(an+b)</code> on a és el nombre total de les columnes de la taula i b és la posició ordinal de la columna a la taula. Només després d'aquest selector la propietat {{cssxref("vertical-align")}} es pot utilitzar.</li>
  <li>Si la taula fa ús d'un atribut {{htmlattrxref("colspan", "td")}}, l'efecte es pot aconseguir mitjançant la combinació adequada de selectors d'atributs CSS com <code>[colspan=n]</code>, encara que això no és trivialI.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
 <dd>Aquest atribut especifica una amplada per defecte per a cada columna en el grup de la columna actual. A més dels valors dels píxels i percentatge estàndard, aquest atribut podria prendre la forma especial 0*, el que significa que l'ample de cada columna al grup ha de ser l'ample mínim necessari per mantenir el contingut de la columna. Amplades relatives com ara 0,5* també es poden utilitzar.</dd>
</dl>

<h2 id="Exemple">Exemple</h2>

<p><span id="result_box" lang="ca"><span>Si us plau</span><span>, consulteu</span> <span>la pàgina</span></span> {{HTMLElement("table")}} <span id="result_box" lang="ca"><span>per</span> <span>exemples</span> <span>de</span></span> <code>&lt;col&gt;</code>.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'tabular-data.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>definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>align/valign</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} {{bug(915)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>char/charoff</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} {{bug(2212)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>bgcolor</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>align/valign</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} {{bug(915)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>char/charoff</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} {{bug(2212)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>bgcolor</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li><span class="short_text" id="result_box" lang="ca"><span>Altres</span> <span>elements</span> <span>HTML</span> <span>relacionats</span> <span>amb</span> <span>taules</span></span> : {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
 <li><span id="result_box" lang="ca"><span>Propietats CSS</span> <span>i pseudo</span><span>-</span><span>classes</span> <span>que poden ser</span> <span>especialment</span> <span>útils</span> <span>per a l'estil</span> <span>de l'element</span> <code><span>&lt;</span><span>col</span><span>&gt;</span></code><span>:</span></span>
  <ul>
   <li>La propietat {{cssxref("width")}} <span id="result_box" lang="ca"><span>controla</span> <span>l'ample de</span> <span>la columna</span></span> ;</li>
   <li>La pseudo-classe {{cssxref(":nth-child")}}<span id="result_box" lang="ca"><span> ajusta</span> <span>l'alineació de</span> <span>les</span> <span>cel·les de la</span> <span>columna</span><span>;</span></span></li>
   <li>La propietat {{cssxref("text-align")}} alinea el contingut de totes les cel·les  en el mateix caràcter, like '.'.</li>
  </ul>
 </li>
</ul>