Fonaments de la taula HTML

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.

Requisits previs: Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu: Familiaritzar-se amb les taules HTML.

Què és una taula?

Una taula és un conjunt estructurat de dades compost de files i columnes (dades tabulars). 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.

Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47.

Un exemple de taula de dades que presenta l'horari d'una piscina

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:

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.

Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.

Com funciona una taula?

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. Si observem la taula de sota, per exemple, veiem que hi ha un pronom personal singular que s'utilitza en la «3rd Person», amb un símbol ♀ que denota gènere, que s'utilitza com un objecte en una oració. La resposta es pot trobar per associació de les capçaleres de la fila i la columna corresponents.

Pronoms personals
Subject Object
Singular 1st Person I me
2nd Person you you
3rd Person he him
she her
o it it
Plural 1st Person we us
2nd Person you you
3rd Person they them

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.

Aplicar estil a una taula

En GitHub pots trobar el codi HTML d’origen de la taula anterior; dona-hi una ullada i fes també un cop d'ull a l'exemple en viu! Observa que la taula no és gaire llegible; això és perquè la taula que apareix més amunt en aquesta pàgina inclou una mica d’estil que ha afegit el lloc MDN, mentre que l'exemple de GitHub no té gens d’informació d'estil.

No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb CSS, 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 Aplicar estil a les taules quan acabis d’aquí.

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 full d'estil aquí i també hi pots trobar una plantilla HTML on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.

Nota: Aquí també trobaràs una versió de la taula personal_pronouns amb una mica d’estil aplicat, perquè te’n facis una idea.

Quan NO s’han d’usar taules HTML?

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 Disseny de pàgines web en el nostre mòdul d'aprenentatge de l'accessibilitat. 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.

En resum, l'ús de taules per al disseny de pàgines web en lloc de les tècniques de disseny CSS és una mala idea. Les raons principals són les següents:

  1. El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals: Els lectors de pantalla 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.
  2. El disseny de pàgines web amb taules genera una sopa d'etiquetes: 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.
  3. Les taules no tenen adaptabilitat automàtica: Quan s'utilitzen esquemes de contenidors adequats (com ara <header>, <section>, <article> o <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.

Aprenentatge actiu: Crea la teva primera taula

Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.

  1. En primer lloc, fes una còpia local de blank-template.html i minimal-table.css en un directori nou del teu equip local.
  2. El contingut de cada taula està delimitat per aquestes dues etiquetes: <table></table>. Afegeix-les al cos del teu codi HTML.
  3. El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <td> ('td' ve de table data, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula:
    <td>Hi, I'm your first cell.</td>
  4. 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í:
    <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>

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 <td> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.

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 <tr> ('tr' ve de table raw, ’fila de taula'). Ara explicarem això.

  1. Col·loca les quatre cel·les que has creat entre etiquetes <tr>, d’aquesta manera:
    <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>
  2. Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <tr> addicional, i cada cel·la ha d’estar continguda entre etiquetes <td>.

Això hauria de donar com a resultat una taula, com la que es veu a continuació:

Hi, I'm your first cell. I'm your second cell. I'm your third cell. I'm your fourth cell.
Second row, first cell. Cell 2. Cell 3. Cell 4.

Nota: També la pots trobar a GitHub, com simple-table.html (i també pots consultar-la en l’).

Afegeix capçaleres amb elements <th>

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:

<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>

Ara, la representació de la taula:

Knocky Flor Ella Juan
Breed Jack Russell Poodle Streetdog Cocker Spaniel
Age 16 9 10 5
Owner Mother-in-law Me Me Sister-in-law
Eating Habits Eats everyone's leftovers Nibbles at food Hearty eater Will eat till he explodes

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.

Aprenentatge actiu: capçaleres de taula

Intentem millorar aquesta taula.

  1. En primer lloc, fes una còpia local dels fitxers dogs-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.
  2. Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <th> ('th' ve de table header, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <td>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <td> que delimiten les cel·les de capçalera de la taula per elements <th>.
  3. Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.

Nota: En GitHub pots trobar el nostre exemple acabat en dogs-table-fixed.html (i també el pots consultar en l’exemple en viu).

Per què són útils les capçaleres?

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.

Nota: 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.

Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut scope (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.

Cel·les que ocupen diverses files i columnes

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.

L’etiquetatge inicial és el següent:

<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>

Però la sortida no ens dona exactament el que volem:

Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Cock
Rooster

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 colspan i rowspan, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten de valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, colspan="2" fa que una cel·la ocupi dues columnes.

Utilitzem colspan i rowspan per a millorar aquesta taula.

  1. En primer lloc, fes una còpia local dels fitxers animals-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.
  2. A continuació, utilitza colspan perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.
  3. Finalment, utilitza rowspan perquè «Horse» i «Chicken» ocupin dues files.
  4. Desa el codi i obre’l en el navegador per a veure com millora.

Nota: En GitHub pots trobar el nostre exemple acabat en animals-table-fixed.html (també el pots consultar en l’exemple en viu).

Aplicar a les columnes un estil habitual

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 <col> i <colgroup>. 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 <td> o <th> de la columna, o s’ha d’utilitzar un selector complex com :nth-child().

Considerem l’exemple següent:

<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>

Ens dona el resultat següent:

Data 1 Data 2
Calcutta Orange
Robots Jazz

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 <col>. Els elements <col> s'especifiquen dins d'un contenidor <colgroup> just a sota de l'etiqueta d'obertura <table>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:

<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>

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 <col>; si no ho fem, l'estil s'aplicarà justament a la primera columna.

Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <col> que inclogui un atribut span, com aquest:

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

Igual que colspan i rowspan, span pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.

Aprenentatge actiu: colgroup i col

Ara és el moment de fer-ho tu mateix.

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.

Mon Tues Wed Thurs Fri Sat Sun
1st period English German Dutch
2nd period English English German Dutch
3rd period German German Dutch
4th period English English Dutch

Tornar a crear la taula seguint aquests passos:

  1. En primer lloc, fes una còpia local de l'arxiu timetable.html 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.
  2. Afegeix un element <colgroup> a la part superior de la taula, just a sota de l'etiqueta <table>, en què afegirem els elements <col>.
  3. No apliquem cap estil a les dues primeres columnes.
  4. Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut style és background-color:#97DB9A;
  5. Establim una amplada de separació en la quarta columna. El valor de l'atribut style és width: 42px;
  6. Afegim un color de fons a la cinquena columna. El valor de l'atribut style és background-color:#97DB9A;
  7. 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 style són background-color:#DCC48E; border:4px solid #C1437A;
  8. Els dos últims dies són dies lliures; el valor de l'atribut style és width: 42px;

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 timetable-fixed.html (també el pots consultar en l’exemple en viu).

Resum

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.