diff options
Diffstat (limited to 'files/ca/web/html/element/colgroup/index.html')
| -rw-r--r-- | files/ca/web/html/element/colgroup/index.html | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/files/ca/web/html/element/colgroup/index.html b/files/ca/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..92d26e45de --- /dev/null +++ b/files/ca/web/html/element/colgroup/index.html @@ -0,0 +1,333 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Referencia + - Tables + - Web +translation_of: Web/HTML/Element/colgroup +--- +<h2 id="Sumari">Sumari</h2> + +<p>L'Element HTML Grup de columnes de taula (<colgroup>) defineix un grup de columnes dins d'una taula.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th> + <td>Cap.</td> + </tr> + <tr> + <th scope="row">Contingut permès</th> + <td><span id="result_box" lang="ca"><span>Si</span> <span>l'atribut</span> </span>{{htmlattrxref("span", "colgroup")}} <span id="result_box" lang="ca"><span>és present</span></span>: Cap, és un {{Glossary("empty element")}}.<br> + <span id="result_box" lang="ca"><span>Si</span> <span>l'atribut</span> <span>no està</span> <span>present</span></span> : <span id="result_box" lang="ca"><span>zero o</span> <span>més</span></span> elements {{HTMLElement("col")}}</td> + </tr> + <tr> + <th scope="row">Omissió de l'etiqueta</th> + <td>L'etiqueta d'inici pot ser omesa, si té un element {{HTMLElement("col")}} com el seu primer fill i si no està precedida per un {{HTMLElement("colgroup")}} <span id="ouHighlight__127_129TO119_128">l'etiqueta</span><span id="noHighlight_0.9717654875284019"> </span><span id="ouHighlight__123_125TO130_134">final</span><span id="noHighlight_0.9545554484982509"> </span><span id="ouHighlight__131_133TO136_137">ha</span><span id="noHighlight_0.23101560550425038"> </span><span class="highlighted" id="ouHighlight__135_138TO139_143">estat</span><span id="noHighlight_0.7466432272455653"> </span><span id="ouHighlight__140_146TO145_148">omesa</span>.<br> + L'etiqueta final es pot ometre, si no és seguit per un espai o un comentari.</td> + </tr> + <tr> + <th scope="row">Elements pares permesos</th> + <td>Un element {{HTMLElement("table")}} . El {{HTMLElement("colgroup")}} ha d'aparèixer després de qualsevol element {{HTMLElement("caption")}} <span id="result_box" lang="ca"> <span>opcional</span><span>, però</span> <span>abans</span> <span>de qualsevol</span> element </span>{{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} i {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Interfície DOM</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atribut">Atribut</h2> + +<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></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à establert, s'assumeix el valor d'esquerra. Els elements {{HTMLElement("col")}} descendents podem substituir aquest valor mitjançant el seu propi atribut {{htmlattrxref("align", "col")}}.</p> + + <div class="note"><strong>Nota: </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 {{cssxref("text-align")}} en un selector aplicant-ho a un element {{HTMLElement("colgroup")}}. Perquè els elements {{HTMLElement("td")}} no són descendents de l'element {{HTMLElement("colgroup")}} , 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 <code>char</code>, en CSS3, pot utilitzar el valor de char {{htmlattrxref("char", "colgroup")}} com el valor de la propietat {{cssxref("text-align")}} {{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 las columnes menbres de un column group. És un codi de 6 dígits hexadecimal definits en <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, precedit per un '#'. Una de les setze cadenes de colors predefinits, com s'esmenta més endavant, es poden fer servir: + <table> + <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 = "#008080"</code></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>Not d'ùs: </strong>No utilitzeu aquest atribut, ja que no és estàndard i només implementat en algunes versions de Microsoft Internet Explorer; Els elements {{HTMLElement("colgroup")}} és podem donat estil amb <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per donar un efecte similar a l'atribut <strong>bgcolor</strong>, utilitzeu la propietat <a href="/en-US/docs/CSS" title="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 especifica l'alineació del contingut de un grup de columnas a un caràcter. <span id="result_box" lang="ca"><span>Els</span> <span>valors</span> <span>típics</span> <span>d'això inclouen</span> <span>un punt (.</span><span>)</span> <span>en intentar</span> <span>alinear</span> <span>els números</span> <span>o valors</span> <span>monetaris</span></span> . Si no s'estableix {{htmlattrxref("align", "colgroup")}}<code> </code>a <code>char</code>, aquest atribut s'ignora, tot i que encara s'utilitza com a valor per omissió d' {{htmlattrxref("align", "col")}} de lelement {{HTMLElement("col")}} que són membres d'aquest grup de columnes.. + <div class="note"><strong>Nota: </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", "colgroup")}}, en CSS3, pots utilitzar el joc de caràcters utilitzant l'atribut {{htmlattrxref("char", "colgroup")}} com el valor de la propietat {{cssxref("text-align")}} property {{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 <strong>char</strong>. + <div class="note"><strong>Nota: </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 abastan l'element <code><colgroup></code>. Si no hi és, el seu valor per defecte és 1. + <div class="note"><strong>Note: </strong>Aquest atribut s'aplica sobre els atributs del grup de columna, no té cap efecte sobre les regles d'estil CSS associats a ella o, encara més, a les cel·les dels membres de les columnes del grup. + <ul> + <li>L'atribut span pot no estar present si hi ha un o més elements <code><col></code> dins el <code><colgroup></code>.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Aquest atribut especifica l'alineació vertical del text dins de cada cel·la de la columna. Els valors possibles per aquest atribut són: + <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" title="http://en.wikipedia.org/wiki/Baseline_(typography)">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 cel·la;</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>No utilitzeu aquest atribut, ja que és obsolet (i no és compatible) en l'últim estàndard: + + <ul> + <li>No tracteu d'establir la propietat {{cssxref("vertical-align")}} en un selector donant-ho a un element {{HTMLElement("colgroup")}}. Perquè els elements{{HTMLElement("td")}} no són descendents de l'element {{HTMLElement("colgroup")}}, ells no heretaran.</li> + <li>Si la taula no utilitza un atribut {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, 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 no fa ús d'un atribut colspan {{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> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</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 els continguts de les columnes. Amplades relatives com ara 0,5* també es poden utilitzar.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Si us plau, consulteu la pàgina {{HTMLElement("table")}} per exemples de <code><colgroup></code>.</p> + +<h2 id="Specifications" name="Specifications">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-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </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("col")}}, {{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> </span><code><col></code>: + <ul> + <li>La propietat {{cssxref("width")}} <span class="short_text" id="result_box" lang="ca"><span>controla</span> <span>l'ample de</span> <span>la columna</span><span>;</span></span></li> + <li>La pseudo-class {{cssxref(":nth-child")}} <span id="result_box" lang="ca"><span>estableix</span> <span>l'alineació en</span> <span>les</span> <span>cel·les de la</span> <span>columna</span><span>;</span></span></li> + <li>La propietat {{cssxref("text-align")}} alinea tots els continguts de les cel·les en el mateix caràcter, like '.'.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> |