diff options
Diffstat (limited to 'files/ca/learn/html/tables')
| -rw-r--r-- | files/ca/learn/html/tables/advanced/index.html | 463 | ||||
| -rw-r--r-- | files/ca/learn/html/tables/basics/index.html | 619 | ||||
| -rw-r--r-- | files/ca/learn/html/tables/index.html | 46 | ||||
| -rw-r--r-- | files/ca/learn/html/tables/structuring_planet_data/index.html | 80 |
4 files changed, 1208 insertions, 0 deletions
diff --git a/files/ca/learn/html/tables/advanced/index.html b/files/ca/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..8ccd08e053 --- /dev/null +++ b/files/ca/learn/html/tables/advanced/index.html @@ -0,0 +1,463 @@ +--- +title: 'Taules HTML: característiques avançades i accessibilitat' +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - nesting + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +original_slug: Learn/HTML/Taules_HTML/Taula_HTML_característiques_avançades_i_laccessibilitat +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">En el segon article d'aquest mòdul ens fixem en algunes de les característiques més avançades de les taules HTML, com ara les llegendes/resums i l'agrupament de files en seccions de capçalera, cos i peu de taula, i en l'accessibilitat de les taules per als usuaris amb discapacitat visual.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.</td> + </tr> + </tbody> +</table> + +<h2 id="Afegir_un_títol_a_la_taula_amb_<caption>">Afegir un títol a la taula amb <caption></h2> + +<p>Pots donar a la taula una títol, que es posa dins d'un element {{htmlelement("caption")}} que està imbricat dins de l'element {{htmlelement("table")}}. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <code><table></code>.</p> + +<pre class="brush: html notranslate"><table> + <caption>Dinosaurs in the Jurassic period</caption> + + ... +</table></pre> + +<p>Com es pot deduir del breu exemple anterior, el títol està destinat a contenir una descripció del contingut de la taula. Això és útil per a tots els lectors que volen tenir una idea ràpida de si la taula els és útil a partir de donar una ullada a la pàgina, però ho és en particular per als usuaris cecs perquè, en lloc d’haver-se d’esperar que el lector de pantalla llegeixi el contingut de moltes cel·les per a esbrinar quina informació proporciona la taula, podran decidir a partir del títol si llegeixen la taula amb més detall.</p> + +<p>Un títol es col·loca directament sota l'etiqueta <code><table></code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Per a proporcionar una descripció també pots utilitzar l'atribut {{htmlattrxref("summary","table")}} en l'etiqueta <code><table></code>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <code><caption></code>, perquè l’atribut {{htmlattrxref("summary","table")}} està {{glossary("desaprovat")}} per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).</p> +</div> + +<h3 id="Aprenentatge_actiu_Afegir_un_títol">Aprenentatge actiu: Afegir un títol</h3> + +<p>Tornem al primer exemple de l'article anterior i observem com es fa això.</p> + +<ol> + <li>Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML#Aprenentatge_actiu_colgroup_i_col">Fonaments bàsics de les taules HTML</a>, o fes una còpia local de l'arxiu <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a></li> + <li>Afegeix un títol adequat a la taula.</li> + <li>Desa el codi i obre’l en el navegador, i observa com es veu.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar a GitHub la nostra versió del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a>; i també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">exemple en viu</a>).</p> +</div> + +<h2 id="Afegir_estructura_amb_<thead>_<tfoot>_i_<tbody>">Afegir estructura amb <thead>, <tfoot> i <tbody></h2> + +<p>A mesura que l’estructura de les taules es fa més complexa, és útil aprofundir en la definició estructural. Una manera clara de fer això és amb l'ús de {{htmlelement("thead")}}, {{htmlelement("tfoot")}} i {{htmlelement("tbody")}}, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.</p> + +<p>Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no proporcionen cap millora visual, però són molt útils per a l'aplicació d’estil i el disseny de pàgina web perquè actuen com «ganxos» amb què s’afegeix CSS a la taula. Podem esmentar com a exemples interessants que es repeteixin en cada pàgina impresa la capçalera i el peu de pàgina d’una taula molt llarga, o que el cos de la taula es mostri en una sola pàgina i el contingut disponible es pugui desplaçar amunt i avall.</p> + +<p><span class="short_text" id="result_box" lang="ca">Per a utilitzar aquests elements cal tenir en compte el següent:</span></p> + +<ul> + <li>L'element <code><thead></code> ha d'etiquetar la part de la taula que és la capçalera; normalment és la primera fila, que conté les capçaleres de columna, però no sempre és així. Si utilitzes els elements {{htmlelement("col")}}/{{htmlelement("colgroup")}}, la capçalera de la taula hi ha de venir just a sota.</li> + <li>L'element <code><tfoot></code> ha d'etiquetar la part de la taula que és el peu, que podria ser la fila del final, que conté la suma dels elements de les files anteriors, per exemple. Pots incloure el peu de taula a la part inferior de la taula, com es podria esperar, o just sota la capçalera de la taula (el navegador la mostrarà a la part inferior de la taula).</li> + <li>L'element <code><tbody></code> ha d'etiquetar les altres parts del contingut de la taula que no estan a la capçalera ni al peu de taula. Apareix a sota de la capçalera de la taula, o de vegades a sota del peu de taula, segons com decideixis estructurar-la (consulta els articles anteriors).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: <code><tbody></code> sempre s'inclou implícitament en totes les taules, si no s'especifica en el codi. Per comprovar-ho, obre un dels exemples anteriors que no inclogui <code><tbody></code> i observa el codi HTML amb les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador del navegador</a>; observa que el navegador hi ha afegit aquesta etiqueta. Et podries demanar per què molestar-nos a incloure-la; s’ha de fer, perquè ens proporciona més control sobre l’estructura de la taula i l'estil.</p> +</div> + +<h3 id="Aprenentatge_actiu_afegir_estructura_a_la_taula">Aprenentatge actiu: afegir estructura a la taula</h3> + +<p>Posarem aquests elements nous en acció.</p> + +<ol> + <li>Primer de tot, fes una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en una carpeta nova.</li> + <li>Obre’l en un navegador; observa que no està malament, però es podria millorar. La fila «SUM» conté una suma de les quantitats que s’han gastat i no sembla que estigui en el lloc adequat, i falten alguns detalls de codi.</li> + <li>Posa les capçaleres òbvies de fila dins d'un element <code><thead></code>, la fila «SUM» dins d'un element <code><tfoot></code>, i la resta del contingut dins d'un element <code><tbody></code>.</li> + <li>Desa i actualitza, i observa que en afegir l'element <code><tfoot></code> la fila «SUM» s’ha col·locat a la part inferior de la taula.</li> + <li>A continuació, afegeix un atribut {{htmlattrxref("colspan","td")}} perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».</li> + <li>Afegeix una mica d'estil extra a la taula i observa la utilitat d’aplicar CSS a aquests elements. Observa que en la capçalera (<code>head</code>) del document HTML hi ha un element {{htmlelement("style")}} buit. Afegirem dins d'aquest element les línies de codi CSS següents: + <pre class="brush: css notranslate">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>Desa i actualitza, i dona una ullada al resultat. Si els elements <code><tbody></code> i <code><tfoot></code> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (<a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a> és un bon lloc per on començar; també hi ha un article concret sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">aplicar estil a les taules</a>).</p> +</div> + +<p>La taula acabada ha de presentar un aspecte semblant a aquest:</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar el fitxer a GitHub com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (i també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">exemple en viu</a>).</p> +</div> + +<h2 id="Taules_imbricades">Taules imbricades</h2> + +<p>És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <code><table></code>. No és en aconsellable en general perquè dona un marcatge més confús i menys accessible als usuaris de lectors de pantalla, i perquè en molts casos es pot resoldre afegint cel·les/files/columnes addicionals a la taula d’origen. Això no obstant, de vegades és necessari, per exemple, per a importar contingut fàcilment d'altres fonts.</p> + +<p>El marcatge següent mostra una imbricació de taules senzilla:</p> + +<pre class="brush: html notranslate"><table id="table1"> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> +</table></pre> + +<p>La sortida presenta aquest aspecte:</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="Taules_per_a_usuaris_amb_discapacitats_visuals"><span class="short_text" id="result_box" lang="ca">Taules per a usuaris amb discapacitats visuals</span></h2> + +<p>Recapitulem breument sobre com la manera de fer servir les taules de dades. Una taula pot ser una eina molt útil perquè ens dona un accés ràpid a les dades i ens permet buscar-hi valors. Per exemple, només cal un cop d'ull breu a la taula de sota per a esbrinar quants anells es van vendre a Gant (Gent) l'agost passat. Per a entendre la informació, fem associacions visuals entre les dades i les capçaleres de les files i columnes d'aquesta taula.</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trouses</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>Però... i si no pots fer associacions visuals? Com es pot llegir una taula com l'anterior, llavors? Les persones que tenen alguna discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és cap problema quan es llegeix text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. Tanmateix, amb el marcatge adequat, les associacions visuals es poden substituir per unes de programàtiques.</p> + +<p>En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.</p> + +<h3 class="attTitle" id="Utilitza_capçaleres_per_a_les_files_i_les_columnes"><span class="short_text" id="result_box" lang="ca">Utilitza capçaleres per a les files i les columnes</span></h3> + +<p>Els lectors de pantalla identifiquen totes les capçaleres i les utilitzen per a fer associacions programàtiques entre les capçaleres i les cel·les amb què es relacionen. La combinació de les capçaleres de les files i les columnes identifica i interpreta les dades que hi ha en cada cel·la perquè l'usuari lector de pantalla pugui interpretar la taula de manera similar a com ho fa un usuari sense discapacitats visuals.</p> + +<p>Ja hem exposat les capçaleres en l’article anterior; consulta <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML#Afegeix_cap%C3%A7aleres_amb_elements_%3Cth%3E">Afegir capçaleres amb elements <th></a>.</p> + +<h3 class="attTitle" id="Latribut_scope">L'atribut scope</h3> + +<p>Un tema nou d'aquest article és l'atribut {{htmlattrxref("scope","th")}}, que s’afegeix a l'element <code><th></code> i informa els lectors de pantalla exactament de quines cel·les són capçalera les cel·les de capçalera; per exemple, la capçalera és de la fila o de la columna en què es troba? Si tornem enrere al nostre exemple de registre de despeses, les capçaleres de columna es podrien definir sense ambigüitats com capçaleres de columna de la manera següent:</p> + +<pre class="brush: html notranslate"><thead> + <tr> + <th scope="col">Purchase</th> + <th scope="col">Location</th> + <th scope="col">Date</th> + <th scope="col">Evaluation</th> + <th scope="col">Cost (€)</th> + </tr> +</thead></pre> + +<p>I cada fila podria tenir una capçalera definida de la mateixa manera (si afegíssim capçaleres a les files, a més de les capçaleres de columna):</p> + +<pre class="brush: html notranslate"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>Els lectors de pantalla reconeixen un marcatge estructurat com aquest i permeten als usuaris llegir tota una columna o tota una fila alhora, per exemple.</p> + +<p><code>scope</code> té dos valors possibles més; <code>colgroup</code> i <code>rowgroup</code>. S'utilitzen per als títols que es col·loquen a la part superior de diverses columnes o files. Si tornem enrere a la taula d’exemple dels articles venuts l’agost del 2016 (Items Sold August 2016) que hi ha al començament d'aquesta secció de l'article, pots observar que la cel·la «Clothes» fa de capçalera de les cel·les «Trousers», «Skirts» i «Dresses». Totes aquestes cel·les haurien de marcar-se com capçaleres (<code><th></code>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut <code>scope="colgroup"</code>, mentre que les altres tindrien un atribut <code>scope="col"</code>.</p> + +<h3 class="attTitle" id="Els_atributs_id_i_headers">Els atributs id i headers</h3> + +<p>Una alternativa a l'ús de l'atribut <code>scope</code> és utilitzar els atributs {{htmlattrxref("id")}} i {{htmlattrxref("headers", "td")}} per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:</p> + +<ol> + <li>Afegeix un <code>id</code> únic per a cada element <code><th></code>.</li> + <li>Afegeix un atribut <code>headers</code> per a cada element <code><td></code>. Cada atribut <code>headers</code> ha d’incloure una llista dels <code>id</code> de tots els elements <code><th></code> que actuen de capçalera per a aquesta cel·la, separats per espais.</li> +</ol> + +<p>Això dona a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per les capçaleres de cada columna i de cada fila de què forma part, de manera semblant a un full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres, de fila i de columna.</p> + +<p>Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:</p> + +<pre class="brush: html notranslate"><thead> + <tr> + <th id="purchase">Purchase</th> + <th id="location">Location</th> + <th id="date">Date</th> + <th id="evaluation">Evaluation</th> + <th id="cost">Cost (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Haircut</th> + <td headers="location haircut">Hairdresser</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Great idea</td> + <td headers="cost haircut">30</td> +</tr> + + ... + +</tbody></pre> + +<div class="note"> +<p><strong>Nota</strong>: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza <strong>molt</strong> més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de <code>scope</code> sol ser prou per a la majoria de les taules.</p> +</div> + +<h3 id="Aprenentatge_actiu_Juga_amb_l’scope_i_les_capçaleres">Aprenentatge actiu: Juga amb l’scope i les capçaleres</h3> + +<ol> + <li>Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, en un directori nou.</li> + <li>A continuació, afegeix els atributs <code>scope</code> apropiats per a fer aquesta taula més adequada.</li> + <li>Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs <code>id</code> i <code>header</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (o també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">exemple en viu</a>) i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (o també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">exemple en viu</a>).</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>Es poden aprendre més coses sobre les taules en HTML, però de fet t’hem proporcionat tot el que et cal saber ara mateix. En aquest punt, pot ser que vulguis aprendre com aplicar estil a les taules HTML; ves a l’article <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a>.</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/ca/learn/html/tables/basics/index.html b/files/ca/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..fd6156d930 --- /dev/null +++ b/files/ca/learn/html/tables/basics/index.html @@ -0,0 +1,619 @@ +--- +title: Fonaments de la taula HTML +slug: Learn/HTML/Tables/Basics +tags: + - Article + - Beginner + - CodingScripting + - HTML + - Learn + - Tables + - basics + - cell + - col + - colgroup + - colspan + - header + - row + - rowspan +translation_of: Learn/HTML/Tables/Basics +original_slug: Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">Aquest article ens ajuda a començar amb les taules HTML, n’exposa els conceptes bàsics com ara les files i cel·les, les capçaleres, les cel·les que ocupen diverses columnes i files, i la manera d’agrupar totes les cel·les d'una columna per a propòsits d'estil.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-se amb les taules HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_una_taula">Què és una taula?</h2> + +<p>Una taula és un conjunt estructurat de dades compost de files i columnes (<strong>dades tabulars</strong>). Una taula permet buscar de manera ràpida i fàcil valors que indiquen algun tipus de connexió entre els diferents tipus de dades, per exemple, una persona i la seva edat, o un dia de la setmana, o l’horari d'una piscina municipal.</p> + +<p><img alt="Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="Un exemple de taula de dades que presenta l'horari d'una piscina" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>Les taules s'utilitzen amb molta freqüència en la nostra societat, i hi estan des de fa molt de temps, com ho demostra aquest document del cens dels EUA de 1800:</p> + +<p><img alt="Un document en pergamí molt antic en què les dades no es llegeixen amb facilitat, però presenta clarament l'ús d'una taula de dades." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.</p> + +<h3 id="Com_funciona_una_taula">Com funciona una taula?</h3> + +<p>La característica d'una taula és que és rígida. La informació és fàcil d'interpretar a partir d’associacions visuals entre les capçaleres de les files i les columnes. Mira la taula que hi ha a continuació i busca ungegant de gas amb 62 llunes. Trobes la resposta associant els encapçalaments de fila i columna corresponents.</p> + +<table> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nom</th> + <th scope="col">Massa (10<sup>24</sup> kg)</th> + <th scope="col">Diàmetre (km)</th> + <th scope="col">Densitat (kg/m<sup>3</sup>)</th> + <th scope="col">Gravetat (m/s<sup>2</sup>)</th> + <th scope="col">Duració del dia (hores)</th> + <th scope="col">Distància del Sol (10<sup>6</sup>km)</th> + <th scope="col">Temperatura mitja (°C)</th> + <th scope="col">Número de llunes</th> + <th scope="col">Observacions</th> + </tr> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Planetes terrestres</th> + <th scope="row">Mercuri</th> + <td>0,330</td> + <td>4.879</td> + <td>5.427</td> + <td>3,7</td> + <td>4.222,6</td> + <td>57,9</td> + <td>167</td> + <td>0</td> + <td>El més proper al Sol</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4,87</td> + <td>12.104</td> + <td>5.243</td> + <td>8,9</td> + <td>2.802,0</td> + <td>108,2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">La Terra</th> + <td>5,97</td> + <td>12.756</td> + <td>5.514</td> + <td>9,8</td> + <td>24,0</td> + <td>149,6</td> + <td>15</td> + <td>1</td> + <td>El nostre planeta</td> + </tr> + <tr> + <th scope="row">Mart</th> + <td>0,642</td> + <td>6.792</td> + <td>3.933</td> + <td>3,7</td> + <td>24,7</td> + <td>227,9</td> + <td>-65</td> + <td>2</td> + <td>El planeta vermell</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Planetas jovians</th> + <th rowspan="2" scope="rowgroup">Gegants de gas</th> + <th scope="row">Júpiter</th> + <td>1.898</td> + <td>142.984</td> + <td>1.326</td> + <td>23,1</td> + <td>9,9</td> + <td>778,6</td> + <td>-110</td> + <td>67</td> + <td>El planeta més gran</td> + </tr> + <tr> + <th scope="row">Saturn</th> + <td>568</td> + <td>120.536</td> + <td>687</td> + <td>9,0</td> + <td>10,7</td> + <td>1.433,5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Gegants de gel</th> + <th scope="row">Urà</th> + <td>86,8</td> + <td>51.118</td> + <td>1.271</td> + <td>8,7</td> + <td>17,2</td> + <td>2.872,5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptú</th> + <td>102</td> + <td>49.528</td> + <td>1.638</td> + <td>11,0</td> + <td>16,1</td> + <td>4.495,1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Planetes nans</th> + <th scope="row">Plutó</th> + <td>0,0146</td> + <td>2.370</td> + <td>2.095</td> + <td>0,7</td> + <td>153,3</td> + <td>5.906,4</td> + <td>-225</td> + <td>5</td> + <td>Desclassificat como planeta el 2006, pero encara és una <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">qüestió polèmica</a>.</td> + </tr> + </thead> +</table> + +<p>Quan es fa correctament, fins i tot les persones cegues poden interpretar les dades tabulades en una taula HTML; una taula HTML ben feta hauria de millorar l'experiència dels usuaris sense discapacitats i amb discapacitats per igual.</p> + +<h3 id="Aplicar_estil_a_una_taula">Aplicar estil a una taula</h3> + +<p>A GitHub pots trobar <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">l'exemple en viu</a>. Observa que la taula que hi trobaràs és llegible; això és perquè la taula que apareix més amunt té uns estils mínims, mentre que la de GitHub té força més CSS aplicat.</p> + +<p>No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb <a href="/ca/docs/Learn/CSS">CSS</a>, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrem en la part HTML; si vols saber coses sobre la part CSS, pots visitar el nostre article <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a> quan acabis d’aquí.</p> + +<p>En aquest mòdul no ens centrarem en el CSS, però et proporcionem un full d'estil CSS de mínims perquè l’usis per fer les taules més llegibles que amb els valors per defecte que s'obtenen sense afegir cap tipus d'estil. Pots trobar el <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">full d'estil aquí</a> i també hi pots trobar una <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">plantilla HTML</a> on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.</p> + +<h3 id="Quan_NO_s’han_d’usar_taules_HTML">Quan NO s’han d’usar taules HTML?</h3> + +<p>Les taules HTML s'han d'utilitzar per a presentar dades tabulades; estan dissenyades per a això. Malauradament, molta gent utilitza taules HTML per a fer disseny de pàgines web; per exemple, una fila per a contenir la capçalera, una fila per a contenir les columnes de contingut, una fila per a contenir el peu de pàgina, etc. En pots trobar més detalls i un exemple en l’article <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Disseny de pàgines web</a> en el nostre <a href="/ca/docs/Learn/Accessibility">mòdul d'aprenentatge de l'accessibilitat</a>. Això es feia servir sovint perquè la compatibilitat CSS dels navegadors solia ser molt precària; avui dia els dissenys de pàgines web amb taules són molt menys comuns, però encara se’n poden veure en alguns racons de la xarxa web.</p> + +<p>En resum, l'ús de taules per al disseny de pàgines web en lloc de les <a href="/ca/docs/Learn/CSS/Disseny_CSS">tècniques de disseny CSS</a> és una mala idea. Les raons principals són les següents:</p> + +<ol> + <li><strong>El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals</strong>: Els <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lectors de pantalla</a> que fan servir les persones amb discapacitat visual interpreten les etiquetes d’una pàgina HTML i en llegeixen el contingut a l'usuari. Com que les taules no són l'eina adequada per al disseny de pàgines web i l’etiquetatge és més complex que amb les tècniques de disseny CSS, la sortida pels lectors de pantalla serà confusa per a aquests usuaris.</li> + <li><strong>El disseny de pàgines web amb taules genera una sopa d'etiquetes</strong>: Com s’ha dit, els dissenys de pàgines web amb taules en general involucren estructures d’etiquetatge més complexes que les tècniques de disseny adequades. Això pot generar un codi més difícil d'escriure, mantenir i depurar.</li> + <li><strong>Les taules no tenen adaptabilitat automàtica</strong>: Quan s'utilitzen esquemes de contenidors adequats (com ara {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} o {{htmlelement("div")}}), els valors per defecte de les amplades són el 100% de la de l’element pare. En canvi, les taules estan dimensionades per defecte d'acord amb el contingut que inclouen, de manera que calen mesures addicionals per a aconseguir aplicar estils de disseny de taula que funcionin de manera eficient en una varietat de dispositius.</li> +</ol> + +<h2 id="Aprenentatge_actiu_Crea_la_teva_primera_taula">Aprenentatge actiu: Crea la teva primera taula</h2> + +<p>Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.</p> + +<ol> + <li>En primer lloc, fes una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local.</li> + <li>El contingut de cada taula està delimitat per aquestes dues etiquetes: <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Afegeix-les al cos del teu codi HTML.</li> + <li>El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' ve de <em>table data</em>, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>Si vols fer una fila de quatre cel·les, has de copiar aquestes etiquetes tres vegades més. Actualitza els continguts de la teva taula perquè et quedi així: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>Observa que les cel·les no es col·loquen l’una sota de l'altra, sinó que s'alineen automàticament les unes amb les altres a la mateixa fila. Cada element <code><td></code> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.</p> + +<p>Per evitar que aquesta fila continuï creixent i començar a col·locar les cel·les següents en una segona fila, hem d'utilitzar l'etiqueta <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' ve de <em>table raw</em>, ’fila de taula'). Ara explicarem això.</p> + +<ol> + <li>Col·loca les quatre cel·les que has creat entre etiquetes <code><tr></code>, d’aquesta manera: + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <code><tr></code> addicional, i cada cel·la ha d’estar continguda entre etiquetes <code><td></code>.</li> +</ol> + +<p>Això hauria de donar com a resultat una taula, com la que es veu a continuació:</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: També la pots trobar a GitHub, com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (i també pots consultar-la en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">exemple en viu</a>).</p> +</div> + +<h2 id="Afegeix_capçaleres_amb_elements_<th>">Afegeix capçaleres amb elements <th></h2> + +<p>Ara centrem la nostra atenció en les capçaleres de taula; són cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o la columna (per exemple, observa les cel·les «Breed» i «Age» en el primer exemple que es mostra en aquest article). Per a il·lustrar per què són útils, dona una ullada a la taula d'exemple següent. Primer, el codi d’origen:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>Ara, la representació de la taula:</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>El problema és que, encara que pots anar intuint què passa aquí, fer el creuament de les dades no resulta tan fàcil com podria ser. Seria molt millor si les capçaleres de la columna i de la fila destaquessin d'alguna manera.</p> + +<h3 id="Aprenentatge_actiu_capçaleres_de_taula"><span class="short_text" id="result_box" lang="ca">Aprenentatge actiu: capçaleres de taula</span></h3> + +<p>Intentem millorar aquesta taula.</p> + +<ol> + <li>En primer lloc, fes una còpia local dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.</li> + <li>Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' ve de <em>table header</em>, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <code><td></code>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <code><td></code> que delimiten les cel·les de capçalera de la taula per elements <code><th></code>.</li> + <li>Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En GitHub pots trobar el nostre exemple acabat en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> (i també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">exemple en viu</a>).</p> +</div> + +<h3 id="Per_què_són_útils_les_capçaleres">Per què són útils les capçaleres?</h3> + +<p>Ja hem respost parcialment aquesta pregunta; quan busques dades, resulta més fàcil trobar-les quan les capçaleres destaquen clarament i el disseny es veu més bé en general.</p> + +<div class="note"> +<p><strong>Nota</strong>: Les capçaleres de les taules venen amb un estil per defecte fins i tot quan no afegeixes el teu estil de taula propi, perquè destaquin: el text està en negreta i centrat.</p> +</div> + +<p>Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut <code>scope</code> (que veurem en l’article següent), fa les taules més accessibles perquè cada capçalera s’associa amb totes les dades de la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o tota una columna de dades alhora, i això és força útil.</p> + +<h2 id="Cel·les_que_ocupen_diverses_files_i_columnes">Cel·les que ocupen diverses files i columnes</h2> + +<p>A vegades volem que les cel·les abastin diverses files o columnes. Prenguem l’exemple senzill següent, que mostra uns quants noms d’animals comuns. Volem que en alguns casos es mostrin els noms dels mascles i els de les femelles al costat del nom de l'animal, però d’altres vegades no ho volem, sinó que volem que el nom de animal abasti tota l’amplada de la taula.</p> + +<p>L’etiquetatge inicial és el següent:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Cock</td> + </tr> + <tr> + <td>Rooster</td> + </tr> +</table></pre> + +<p>Però la sortida no ens dona exactament el que volem:</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Cock</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>Necessitem una manera d'aconseguir que «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes, i «Horse» i «Chicken» ocupin més de dues files cap avall. Afortunadament, les capçaleres de taula i les cel·les tenen els atributs <code>colspan</code> i <code>rowspan</code>, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten per valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, <code>colspan="2"</code> fa que una cel·la ocupi dues columnes.</p> + +<p>Utilitzem <code>colspan</code> i <code>rowspan</code> per a millorar aquesta taula.</p> + +<ol> + <li>En primer lloc, fes una còpia local dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.</li> + <li>A continuació, utilitza <code>colspan</code> perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.</li> + <li>Finalment, utilitza <code>rowspan</code> perquè «Horse» i «Chicken» ocupin dues files.</li> + <li>Desa el codi i obre’l en el navegador per a veure com millora.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En GitHub pots trobar el nostre exemple acabat en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> (també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">exemple en viu</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="Aplicar_a_les_columnes_un_estil_comú"><span class="short_text" id="result_box" lang="ca">Aplicar a les columnes un estil comú</span></h2> + +<p>Abans de continuar endavant, en aquest article explicarem una darrera característica. HTML té un mètode per a definir la informació d'estil per a tota una columna de dades en un sol lloc; es tracta dels elements <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> i <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Aquests elements existeixen perquè pot ser una mica empipador i ineficient haver d'especificar l'estil de les columnes; en general, la informació d'estil s'ha d'especificar per a cada <code><td></code> o <code><th></code> de la columna, o s’ha d’utilitzar un selector complex com {{cssxref(":nth-child()")}}.</p> + +<p>Considerem l’exemple següent:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>Ens dona el resultat següent:</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>Això no és l'ideal, perquè hem de repetir la informació d'estil en les tres cel·les de la columna (probablement en un projecte real tindríem un conjunt de classes en totes tres i l'estil especificat en un full d'estil separat). En comptes d’això, podem especificar la informació una vegada en un element <code><col></code>. Els elements <code><col></code> s'especifiquen dins d'un contenidor <code><colgroup></code> just a sota de l'etiqueta d'obertura <code><table></code>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>De fet, hem definit dues «columnes d'estil», una que especifica la informació d'estil per a cadascuna de les columnes. No volem aplicar estil a la primera columna, per això encara hem d'incloure un element en blanc <code><col></code>; si no ho fem, l'estil s'aplicarà justament a la primera columna.</p> + +<p>Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <code><col></code> que inclogui un atribut <code>span</code>, com aquest:</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>Igual que <code>colspan</code> i <code>rowspan</code>, <code>span</code> pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.</p> + +<h3 id="Aprenentatge_actiu_colgroup_i_col">Aprenentatge actiu: colgroup i col</h3> + +<p>Ara és el moment de fer-ho tu mateix.</p> + +<p>A continuació pots veure l'horari d'una professora d'idiomes. Divendres té una classe nova d'ensenyament d'holandès durant tot el dia, però també fa classes d’alemany algunes hores el dimarts i el dijous. Vol que destaquin les columnes dels dies que fa classes.</p> + +<table> + <colgroup> + <col> + <col style="background-color: #97DB9A;"> + <col style="width: 42px;"> + <col style="background-color: #97DB9A;"> + <col style="background-color: #DCC48E; border: 4px solid #C1437A;"> + <col style="width: 42px;"> + </colgroup> + <tbody> + <tr> + <td></td> + <th>Mon</th> + <th>Tues</th> + <th>Wed</th> + <th>Thurs</th> + <th>Fri</th> + <th>Sat</th> + <th>Sun</th> + </tr> + <tr> + <th>1st period</th> + <td>English</td> + <td></td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>2nd period</th> + <td>English</td> + <td>English</td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>3rd period</th> + <td></td> + <td>German</td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>4th period</th> + <td></td> + <td>English</td> + <td></td> + <td>English</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<p>Tornar a crear la taula seguint aquests passos:</p> + +<ol> + <li>En primer lloc, fes una còpia local de l'arxiu <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> en un directori nou del teu equip local. L'HTML conté la mateixa taula que hem vist abans, menys la informació de les columnes d'estil.</li> + <li>Afegeix un element <code><colgroup></code> a la part superior de la taula, just a sota de l'etiqueta <code><table></code>, en què afegirem els elements <code><col>.</code></li> + <li>No apliquem cap estil a les dues primeres columnes.</li> + <li>Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut <code>style</code> és <code>background-color:#97DB9A</code>;</li> + <li>Establim una amplada de separació en la quarta columna. El valor de l'atribut <code>style</code> és <code>width: 42px</code>;</li> + <li>Afegim un color de fons a la cinquena columna. El valor de l'atribut <code>style</code> és <code>background-color:#97DB9A;</code></li> + <li>Afegim un color de fons diferent, més una vora, a la sisena columna, per a indicar que és un dia especial perquè dona una classe nova. Els valors de l'atribut <code>style</code> són <code>background-color:#DCC48E</code>; <code>border:4px solid #C1437A</code>;</li> + <li>Els dos últims dies són dies lliures; el valor de l'atribut <code>style</code> és <code>width: 42px</code>;</li> +</ol> + +<p>Continua tu amb l'exemple i a veure com et va. Si t’encalles o vols revisar-lo, pots trobar la nostra versió en GitHub com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">exemple en viu</a>).</p> + +<h2 id="Resum">Resum</h2> + +<p>Amb això concloem gairebé els conceptes bàsics de les taules HTML. En l’article següent veurem algunes característiques una mica més avançades de les taules i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.</p> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> diff --git a/files/ca/learn/html/tables/index.html b/files/ca/learn/html/tables/index.html new file mode 100644 index 0000000000..433e905386 --- /dev/null +++ b/files/ca/learn/html/tables/index.html @@ -0,0 +1,46 @@ +--- +title: Taules HTML +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +original_slug: Learn/HTML/Taules_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Una tasca molt comuna en HTML és estructurar dades tabulars, té una sèrie d'elements i atributs per a aquest propòsit. Juntament amb una mica de CSS per el disseny, HTML fa que sigui fàcil de visualitzar taules d'informació a la web, com ara el pla de lliçó de l'escola, els horaris a la piscina del lloc, estadístiques sobre els dinosaures favorits o equip de futbol. Aquest mòdul us porta a través de tot el que es necessita saber sobre l'estructuració de dades tabulars utilitzant HTML.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p>Abans d'iniciar aquest mòdul, ja hauria d'haver cobert els conceptes bàsics d'HTML - vegeu <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si es treballa en un ordinador/tauleta/altre dispositiu el qual no té la capacitat de crear els vostres propis arxius, es pot portar a terme (la majoria) els exemples amb un programa de codificació en línia, com ara <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>Aquest mòdul conté els següents articles:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Taules HTML bàsiques</a></dt> + <dd> + <p>Aquest article ens ajudarà a començar amb les taules HTML, que cobreix els conceptes més bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.</p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Taules HTML característiques avançades i accessibilitat</a></dt> + <dd>En el segon article d'aquest mòdul, ens fixarem en algunes de les característiques més avançades de les taules HTML - com llegendes/resums i agrupament de files en la taula, seccions de cos i peu - així com l'accessibilitat de les taules per als usuaris amb discapacitat visual.</dd> +</dl> + +<h2 id="Avaluació">Avaluació</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuració de dades dels planetes</a></dt> + <dd>En la nostra avaluació de la taula, us proporcionarem algunes dades sobre els planetes del nostre sistema solar i aconseguir una estructura dins d'una taula HTML.</dd> +</dl> diff --git a/files/ca/learn/html/tables/structuring_planet_data/index.html b/files/ca/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..2f49124e01 --- /dev/null +++ b/files/ca/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,80 @@ +--- +title: 'Avaluació: Estructurar les dades dels planeta' +slug: Learn/HTML/Tables/Structuring_planet_data +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - Tables +translation_of: Learn/HTML/Tables/Structuring_planet_data +original_slug: Learn/HTML/Taules_HTML/Avaluació_Estructurar_les_dades_dels_planeta +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">En la nostra avaluació de la taula, proporcionarem algunes dades sobre els planetes del nostre sistema solar, per obtenir una estructura en una taula HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Abans de procedir a aquesta avaluació ja s'hauria d'haver treballat a través de tots els articles d'aquest mòdul.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova la comprensió de les taules HTML i funcions associades.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida">Punt de partida</h2> + +<p>Per obtenir aquesta avaluació començarem per fer còpies locals de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en un nou directori a l'equip local.</p> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, es pot utilitzar un lloc com <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer l'avaluació. Es pot fer enganxant el codi HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que s'utilitza no té panells separats de JavaScript/CSS, lliurament es poden posar en línia amb els elements <code><script></code>/<code><style></code> dins de la pàgina HTML.</p> +</div> + +<h2 id="Resum_del_projecte">Resum del projecte</h2> + +<p>Estem treballant en una escola; actualment els estudiants estan estudiant els planetes del nostre sistema solar, i volem proporcionar-los un conjunt fàcil de seguiment de dades per buscar dades i xifres sobre els planetes. Una taula de dades HTML seria ideal - cal prendre les dades en brut que tenim disponibles i convertir-les en una taula, seguint els passos a continuació.</p> + +<p>La taula d'acabada ha de tenir aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>També es pot <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">veure el exemple en viu aquí</a> (sense mirar el codi font - no enganyar!)</p> + +<ul> +</ul> + +<h2 id="Passos_per_completar"><span class="short_text" id="result_box" lang="ca"><span>Passos</span> <span>per completar</span></span></h2> + +<p>Els següents passos descriuen el que s'ha de fer per completar la taula d'exemple. Totes les dades que es necessitan estan contingudes en l'arxiu <code>planets-data.txt</code>. Si hi ha problemes per visualitzar les dades, mirar l'exemple viu de dalt, o tractar de dibuixar un diagrama.</p> + +<ol> + <li>Obrir la còpia <code>blank-template.html</code> i començar la taula per fora, donant-li un recipient exterior, una capçalera i un cos de taula. No cal un peu de taula per a aquest exemple.</li> + <li>Afegir el títol proporcionat a la taula.</li> + <li>Afegir una fila a la capçalera de la taula que contingui tots els encapçalats de columna.</li> + <li>Crear totes les files de contingut dins del cos de la taula, sense oblidar de fer tots els encapçalats de les files en encapçalats semàntics.</li> + <li>Assegureu-vos que tot el contingut s'insereix en les cel·les correctes - amb les dades en brut, cada fila de dades del planeta s'ha de mostrar al costat del seu planeta associat.</li> + <li>Afegir atributs per fer que les capçaleres de fila i columna estiguin inequívocament associades a les files, columnes o grups de files que actuen com capçaleres.</li> + <li>Afegir una vora negre al voltant de la columna que conté tots els encapçalats de fila dels noms del planetes</li> +</ol> + +<h2 id="Consells_i_suggeriments"><span class="short_text" id="result_box" lang="ca"><span>Consells</span> <span>i</span> <span>suggeriments</span></span></h2> + +<ul> + <li>La primera cel·la de la fila de capçalera ha d'estar en blanc, i abasta dues columnes.</li> + <li>Els títols de les files del grup (per exemple <em>Jovian planets</em> ) que se situen a l'esquerra dels encapçalats de les files dels noms dels planetes (per exemple, <em>Saturn</em> ) són una mica complicats de classificar - necessita està segur que cadascun abasti el nombre correcte de files i columnes.</li> + <li>Associar les capçaleres amb les seves files/columnes és molt més fàcil que al revés.</li> +</ul> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al treball al vostre professor/tutor per avaluar-ho. Si és d'auto-aprenentatge, llavors es pot obtenir la guia d'avaluació facilment preguntan a la llista de correu <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampes!</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> |