diff options
Diffstat (limited to 'files/ca/web/html/element/th/index.html')
| -rw-r--r-- | files/ca/web/html/element/th/index.html | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/files/ca/web/html/element/th/index.html b/files/ca/web/html/element/th/index.html new file mode 100644 index 0000000000..13614a6d62 --- /dev/null +++ b/files/ca/web/html/element/th/index.html @@ -0,0 +1,303 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/th +--- +<p>L'<em>element HTML cel·la de capçalera de la taula</em> <code><th></code> defineix una cel·la com a capçalera d'un grup de cel·les de la taula. La naturalesa exacta d'aquest grup es defineix pels atributs {{htmlattrxref("scope", "th")}} i {{htmlattrxref("headers", "th")}}.</p> + +<h2 id="Context_d'ùs">Context d'ùs</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categories de contingut</a></td> + <td>Cap.</td> + </tr> + <tr> + <td>Contingut permès</td> + <td> + <div class="content-models"> + <div id="table-mdls">Contingut textual.</div> + </div> + </td> + </tr> + <tr> + <td>Omissió de l'etiqueta</td> + <td>L'etiqueta d'inici és obligatòria.<br> + L'etiqueta final es pot ometre, si és seguit immediatament per un element {{HTMLElement("th")}} o {{HTMLElement("td")}} o si no hi ha més dades en el seu element pare.</td> + </tr> + <tr> + <td>Elements pares permesos</td> + <td>Un element {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <td>Normativa del document</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">HTML5, secció 4.9.10</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, secció 11.2.6</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Atributs">Atributs</h2> + +<p>Aquest element inclou els següents <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributs globals</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Aquest atribut conté una breu descripció del contingut de la cel·la. Un agent d'usuari (per exemple, un lector de parla) pot estar present davant de la descripció. + <div class="note"><strong>Nota d'ùs: </strong> No utilitzeu aquest atribut, ja que és obsolet en l'últim estàndard. Alternativament, es pot posar la descripció abreujada dins de la cel·la i posar el contingut llarg en l'atribut <code>title</code>.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Aquest atribut enumerat especifica com s'aplicarà l'alineació horitzontal del contingut de cada cel·la. Els valors possibles són: + <ul> + <li><code>left</code>: El contingut s'alinea a l'esquerra de la cel·la.</li> + <li><code>center</code>: El contingut es centra en la cel·la.</li> + <li><code>right</code>: El contingut s'alinea a la dreta de la cel·la.</li> + <li><code>justify</code> (només amb text): El contingut s'estén dins de la cel·la de manera que cobreixi tota la seva amplada.</li> + <li><code>char</code> ( només amb text): El contingut està alineat a un caràcter dins de l'element <th> amb un mínim desplaçament. Aquest caràcter es definit per els atributs {{htmlattrxref("char", "th")}} i {{htmlattrxref("charoff", "th")}} {{unimplemented_inline("2212")}}.</li> + </ul> + + <p>El valor per defecte quan aquest atribut no està especificat és <code>left</code>.</p> + + <div class="note"><strong>Nota d'ùs: </strong> No utilitzeu aquest atribut, ja que és obsolet en l'últim estàndard. + + <ul> + <li>Per aconseguir el mateix efecte que els valors <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> o <span style="font-family: courier new;">justify</span> aplicar la propietat CSS {{cssxref("text-align")}} per l'atribut.</li> + <li>Per aconseguir el mateix efecte que el valor <code>char</code>, en CSS3, donar a la propietat {{cssxref ("text-align")}} el mateix valor que utilitzaria per {{htmlattrxref("char", "th")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Aquest atribut conté una llista de cadenes separades per espais. Cada cadena és l'ID d'un grup de cel·les a les que s'aplica aquesta capçalera. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que és obsolet en l'últim estàndard: en el seu lloc utilitzar l'atribut {{htmlattrxref("scope", "th")}}.</div> + </dd> + <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 hexadecimal de 6 dígits com es defineix en <a href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> prefixat per un '#'. Podeu utilitzar una de les setze cadenes de color predefinits: + <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</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 s'implementa en algunes versions de Microsoft Internet Explorer: L'element {{HTMLElement("th")}} se li ha de donar estil amb <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per donar un efecte similar utilitzeu la propietat <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>El contingut d'una columna s'alinea amb un caràcter en l'element <code><th></code>. Els valors típics inclouen un punt (.) per alinear nombres o valors monetaris. Si {{htmlattrxref ("align", "th")}} no s'ha establert a <code>char</code>, aquest atribut s'ignora. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que no és suportat amb l'últim estàndard. Per aconseguir el mateix efecte en CSS3, podeu especificar el caràcter com a primer valor de la propietat {{cssxref ("text-align")}}{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Aquest atribut s'utilitza per desplaçar dades de la columna a la dreta del caràcter especificat per l'atribut char. El seu valor especifica la longitud d'aquest canvi. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que no és suportat amb l'últim estàndard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Aquest atribut conté un valor enter positiu que indica sobre quantes columnes s'estén una cel·la. El seu valor per defecte és 1. Si el valor s'estableix a 0, la cel·la s'estén fins a l'últim element de {{HTMLElement ("colgroup")}}. Els valors superiors a 1000 es retallen fins a 1000.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Aquest atribut conté una llista de cadenes separades per espais, cadascuna de les quals correspon als atributs <code>id</code> d'altres elements {{HTMLElement ( "th")}} que es relacionen amb aquest element.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Aquest atribut conté un valor enter positiu que indica sobre quantes files s'estén a les cel·les. El seu valor per defecte és <code>1</code>. Si el valor s'estableix a <code>0</code>, la cel·la s'estén fins a l'últim element de les seccions de la taula ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o {{HTMLElement("tfoot")}}). Els valors superiors a 65534 es retallen fins 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>Aquest atribut enumerat defineix les cel·les amb les que es relaciona la capçalera (definit en l'element {{HTMLElement("th")}}). Pot tenir els següents valors: + <ul> + <li><code>row</code>: La capçalera es relaciona amb totes les cel·les de la fila a què pertany.</li> + <li><code>col</code>: La capçalera es relaciona amb totes les cel·les de la columna al qual pertany.</li> + <li><code>rowgroup</code>: La capçalera pertany a un rowgroup i es relaciona amb totes les seves cel·les. Aquestes cel·les es poden col·locar a la dreta o l'esquerra de la capçalera, depenent del valor de l'atribut <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> en l'element {{HTMLElement("table")}}.</li> + <li><code>colgroup</code>: La capçalera pertany a una colgroup i es relaciona amb totes les seves cel·les.</li> + <li><code>auto</code></li> + </ul> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Aquest atribut especifica com un text s'alinea verticalment dins d'una cel·la. Els valors possibles per aquest atribut són: + <ul> + <li><code>baseline</code>: Posiciona el text a la part inferior de la cel·la i s'alinea amb la <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">línia de base (baseline)</a> dels caràcters en lloc de la part inferior. Si els caràcters no descendeixen per sota de la línia de base, el valor de la línea de base aconsegueix el mateix efecte que <code>bottom</code>.</li> + <li><code>bottom</code>: Posiciona el text a la part inferior de la cel·la.</li> + <li><code>middle</code>: Centre el text en la cel·la.</li> + <li>i <code>top</code>: Posiciona el text a la part superior de la cel·la.</li> + </ul> + + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que no és suportat amb l'últim estàndard: en el seu lloc aplicar la propietat CSS {{cssxref("vertical-align")}}.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> + <dd>Aquest atribut s'utilitza per definir l'amplada de cel·la recomanada. L'espai addicional es pot afegir amb les propietats <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> i <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> i l'amplada de l'element {{HTMLElement ("col")}} també pot crear una amplada extra. Però, si l'ample d'una columna és massa estreta per mostrar correctament una cel·la en particular, aquesta s'ampliarà quan es mostri. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que no és suportat amb l'últim estàndard: en el seu lloc aplicar la propietat CSS {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Interfície_DOM">Interfície DOM</h2> + +<p>Aquest element implementa la interfície {{domxref("HTMLTableHeaderCellElement")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Veure {{HTMLElement("table")}} per exemples de <code><th></code>.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<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>1.0</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>atribut <code>char/charoff</code></td> + <td>1.0</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>atribut <code>bgcolor</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("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}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atribut <code>char/charoff</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atribut <code>bgcolor</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Veure {{bug(915)}}.</p> + +<p>[2] Veure {{bug(2212)}}.</p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li>Altres elements HTML relacionats amb taules: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> |