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