diff options
Diffstat (limited to 'files/ca/web/html/element/table/index.html')
| -rw-r--r-- | files/ca/web/html/element/table/index.html | 442 |
1 files changed, 442 insertions, 0 deletions
diff --git a/files/ca/web/html/element/table/index.html b/files/ca/web/html/element/table/index.html new file mode 100644 index 0000000000..a4a7e04b14 --- /dev/null +++ b/files/ca/web/html/element/table/index.html @@ -0,0 +1,442 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - CSS Elemen + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p>L'<strong>Element HTML Taula</strong> (<code><table>)</code> representa dades tabulars, és a dir, informació expressada a través d'una taula de dades bidimensionals.</p> + +<div class="note"><strong>Nota: </strong>Abans de la creació de <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>, els elements HTML {{HTMLElement("table")}} s'utilitzaven sovint com un mètode per al disseny de pàgines. Aquest ús ha estat descoratjat des de HTML 4. No obstant això, els correus electrònics HTML són una excepció on les taules estan sent utilitzats amb fins de disseny. La raó d'això és el <a href="https://css-tricks.com/using-css-in-html-emails-the-real-story/">poc suport de CSS en clients de correu electrònic populars</a>.</div> + +<h2 id="Context_d'ùs">Context d'ùs</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a></td> + </tr> + <tr> + <td>Contingut permès</td> + <td> + <div class="content-models"> + <div id="table-mdls">En aquest ordre: + <ol> + <li>un element opcional {{HTMLElement("caption")}},</li> + <li>zero o més elements {{HTMLElement("colgroup")}},</li> + <li>un element opcional {{HTMLElement("thead")}},</li> + <li>un element opcional {{HTMLElement("tfoot")}}, <span class="short_text" id="result_box" lang="ca"><span>ja</span> <span>sigui</span> <span>abans</span> <span>o després</span> <span>d'un de</span> <span>les</span> <span>següents</span></span>: + <ul> + <li>zero o més elements {{HTMLElement("tbody")}}</li> + <li>un o més elements {{HTMLElement("tr")}}</li> + </ul> + </li> + </ol> + </div> + </div> + </td> + </tr> + <tr> + <td>Omissió de l'etiqueta</td> + <td>Cap, tant l'etiqueta d'inici com final són obligatories</td> + </tr> + <tr> + <td>Elements pares permesos</td> + <td>Qualsevol element que accepti contingut dinàmic</td> + </tr> + <tr> + <td>Normativa del document</td> + <td><a class="external" href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element" rel="external nofollow">HTML5, secció 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, secció 11.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Atributs">Atributs</h2> + +<p><span id="result_box" lang="ca"><span>Aquest</span> <span>element</span> <span>inclou</span> <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributs globals</a><span>.</span> <span>Els</span> <span>següents</span> <span>atributs</span> <span>mostrats en</span> <span>aquesta</span> <span>pàgina</span> ara están desaprovats<span>.</span></span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut enumerat indica com ha d'alinear-se la taula dins del document que ho conté. Pot tenir els següents valors: + <ul> + <li><span>left: </span>la taula es mostra a la part esquerra del document;</li> + <li><span>center:</span> la taula es mostra al centre del document;</li> + <li><span>right:</span> la taula es mostra a la part dreta del document.</li> + </ul> + + <div class="note"><strong>Nota d'ùs</strong> + + <ul> + <li>No utilitzeu aquest atribut, ja que ha estat desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb CSS. Establir {{cssxref("margin-left")}} i {{cssxref("margin-right")}} a <code>auto</code> o {{cssxref("margin")}} a<code> 0 auto</code> per aconseguir el efecte similar a l'atribut align.</li> + <li>Abans del Firefox 4, Firefox també donava suport els valors <code>middle</code>, <code>absmiddle</code>, and <code>abscenter</code> com a sinònims de <code>center</code>, d'una manera peculiar.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut defineix el color de fons d'una taula. Consisteix en un codi hexadecimal de 6 dígits com es defineix en <a href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> i està prefixat per "#". Aquest atribut es pot utilitzar amb una de les setze cadenes de color predefinits: + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>. Utilitzar la propietat <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> {{cssxref("background-color")}} per crear un efecte similar a l'atribut <code>bgcolor</code>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut enter defineix, en píxels, la mida del marc que envolta la taula. Si s'estableix a 0, l'atribut {{htmlattrxref("frame", "table")}} es posa a void. + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que ha està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>. Per crear un efecte similar a l'atribut <code>border</code>, podeu utlitzar les propietats <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} i {{cssxref("border-style")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut defineix l'espai entre el contingut d'una cel·la i la seva vora, que es mostra o no. Si la longitud de la cellpadding es defineix en píxels, aquest espai de mida de píxel s'aplicarà als quatre costats del contingut de la cel·la. Si la longitud es defineix amb un valor percentual, el contingut se centra i l'espai vertical total (superior i inferior) representarà aquest valor. El mateix succeeix amb l'espai horitzontal total (esquerra i dreta). + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb <a href="/en-US/docs/CSS">CSS</a>. Per crear un efecte similar a l'atribut <code>cellpadding</code>, aplicar la propietat {{cssxref("border-collapse")}} a l'element {{HTMLElement("table")}}, amb el seu valor establert a collapse, i la propietat {{cssxref("padding")}} a l'element {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut defineix la mida de l'espai entre dues cel·les en un valor de percentatge o píxels. L'atribut s'aplica tant horitzontal com verticalment, a l'espai entre la part superior de la taula i les cel·les de la primera fila, l'esquerra de la taula i la primera columna, a la dreta de la taula i l'última columna i la part inferior de la taula i l'última fila. + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb <a href="/en-US/docs/CSS">CSS</a>. Per crear un efecte similar a l'atribut <code>cellspacing</code>, aplicar la propietat {{cssxref("border-spacing")}} a l'element {{HTMLElement("table")}}. Border-spacing no té cap efecte si {{cssxref ("border-collapse")}} s'estableix a collapse.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut enumerat defineix quin costat del marc que envolta la taula ha de mostrar-se. Pot tenir els següents valors: + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que està desaprovat. L'element {{HTMLElement("table")}} se li ha de donar estil amb <a href="/en-US/docs/CSS">CSS</a>. Per crear un efecte similar a l'atribut <code><span>frame</span></code>, aplicar les propietats {{cssxref("border-style")}} i {{cssxref("border-width")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut enumerat defineix on han d'aparèixer les regles, és a dir línies, en una taula. Pot tenir els següents valors: + <ul> + <li>cap, indica que no es mostraran les regles; que és el valor per defecte;</li> + <li>grups, farà que les regles es mostrin entre grups de files (definit per els elements {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} i {{HTMLElement("tfoot")}}) i entre els grups de columnes (definits per els elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}});</li> + <li>files, farà que les regles es mostrin entre les files;</li> + <li><span>columnes</span>, farà que les regles es mostrin entre les columnes;</li> + <li><span>tot</span>, farà que les regles es mostrin entre les files and columnes.</li> + </ul> + + <div class="note"><strong>Nota</strong>: + + <ul> + <li>L'estil de les regles depenen del navegador i no pot ser modificat.</li> + <li>No utilitzeu aquest atribut, ja que està desaprovat. Les regles han de ser definides i se'ls dóna estil usant <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>. Aplicar la propietat {{cssxref("border")}} adequadament els elements {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut defineix un text alternatiu que resumeix el contingut de la taula. En general, permet els discapacitats visuals que estan navegant per la web amb una pantalla Braille, adquirir informació sobre la taula. Si la informació afegida per aquest atribut també és útil per a persones que no tenen problemes visuals, considereu l'ús de {{HTMLElement("caption")}} al seu lloc. L'atribut <code>summary</code> no és obligatori i pot ser omès quan un element {{HTMLElement("caption")}} compleix la seva funció. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que està desaprovat. En el seu lloc, triar un d'aquests mètodes per afegir una descripció d'una taula: + <ul> + <li>Utilitzeu la prosa al voltant de la taula (aquest mètode és menys semàntic).</li> + <li>Afegir una descripció a la taula amb l'element {{HTMLElement("caption")}}.</li> + <li>Afegir una descripció en un element {{HTMLElement("details")}}, a l'interior de la taula de l'element {{HTMLElement("caption")}}.</li> + <li>Incloure en un element {{HTMLElement("table")}} un element {{HTMLElement("figure")}} i afegir la descripció en prosa al seu costat.</li> + <li>Incloure en un element {{HTMLElement("table")}} un element {{HTMLElement("figure")}} i afegir la descripció en prosa dins d'un element {{HTMLElement("figcaption")}}.</li> + <li>Configurar la taula de manera que no sigui necessària una descripció (per exemple, amb l'ús dels elements {{HTMLElement("th")}} i {{HTMLElement("thead")}}).</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>Aquest atribut defineix l'amplada de la taula. L'amplada es pot definir per píxels o un valor de percentatge. Un valor percentual serà definit per l'amplada del contenidor en el qual es col·loca la taula. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que està desaprovat. Les regles han de ser definides i se'ls dóna estil usant <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>. Utilitzar la propietat {{cssxref("width")}} en el seu lloc.</div> + </dd> +</dl> + +<h2 id="Interfície_DOM">Interfície DOM</h2> + +<p>Aquest element implementa la interfície <code><a href="/en-US/docs/DOM/HTMLTableElement">HTMLTableElement</a></code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Taula_senzilla">Taula senzilla</h3> + +<pre class="brush: html"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/table')}}</p> + +<h3 id="Més_Exemples">Més Exemples</h3> + +<pre class="brush: html"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col style="background-color: #0f0"> + <col span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}</p> + +<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")}}</td> + <td>4.0<sup>[1]</sup></td> + <td>7.0</td> + <td>1.0</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>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0<sup>[1]</sup></td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="result_box" lang="ca"><span class="alt-edited">Hi ha un error de representació en Internet Explorer 9 que implica {{HTMLElement("table")}} i {{cssxref(":hover")}}; vegeu <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover#Browser_compatibility">la secció "Compatibilitat del navegador" del article :hover</a> per a més detalls.</span></span></p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li>Altres elements HTML relacionats amb taules: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propietats CSS que poden ser especialment útils per donat estil a l'element <code><table></code>: + <ul> + <li>{{cssxref("width")}} <span class="short_text" id="result_box" lang="ca"><span>per controlar</span> <span>l'ample de</span> <span>la taula</span><span>;</span></span> ;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} per controlar l'aspecte de les vores, regles i marc de les cel.les;</li> + <li>{{cssxref("margin")}} and {{cssxref("padding")}} <span id="result_box" lang="ca"><span>donar-li</span> <span>estil</span> <span>al contingut de la</span> <span>cel·la individual</span><span>;</span></span></li> + <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} per definir l'alineació de text i el contingut cel·la.</li> + </ul> + </li> +</ul> |