diff options
Diffstat (limited to 'files/ca/learn/html/tables/advanced/index.html')
| -rw-r--r-- | files/ca/learn/html/tables/advanced/index.html | 463 |
1 files changed, 463 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> |