diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/ca/web/html/element/col/index.html | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/ca/web/html/element/col/index.html')
-rw-r--r-- | files/ca/web/html/element/col/index.html | 326 |
1 files changed, 326 insertions, 0 deletions
diff --git a/files/ca/web/html/element/col/index.html b/files/ca/web/html/element/col/index.html new file mode 100644 index 0000000000..a6925864de --- /dev/null +++ b/files/ca/web/html/element/col/index.html @@ -0,0 +1,326 @@ +--- +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><col></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><col></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 <col>. 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><col></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', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</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><</span><span>col</span><span>></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> |