Taules HTML: característiques avançades i accessibilitat

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.

Requisits previs: Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu: Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.

Afegir un títol a la taula amb <caption>

Pots donar a la taula una títol, que es posa dins d'un element <caption> que està imbricat dins de l'element <table>. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <table>.

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

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.

Un títol es col·loca directament sota l'etiqueta <table>.

Nota: Per a proporcionar una descripció també pots utilitzar l'atribut summary en l'etiqueta <table>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <caption>, perquè l’atribut summary està desaprovat per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).

Aprenentatge actiu: Afegir un títol

Tornem al primer exemple de l'article anterior i observem com es fa això.

  1. Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article Fonaments bàsics de les taules HTML, o fes una còpia local de l'arxiu timetable-fixed.html
  2. Afegeix un títol adequat a la taula.
  3. Desa el codi i obre’l en el navegador, i observa com es veu.

Nota: Pots trobar a GitHub la nostra versió del fitxer timetable-caption.html; i també el pots consultar en l’exemple en viu).

Afegir estructura amb <thead>, <tfoot> i <tbody>

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 <thead>, <tfoot> i <tbody>, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.

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.

Per a utilitzar aquests elements cal tenir en compte el següent:

  • L'element <thead> 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 <col>/<colgroup>, la capçalera de la taula hi ha de venir just a sota.
  • L'element <tfoot> 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).
  • L'element <tbody> 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).

Nota: <tbody> 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 <tbody> i observa el codi HTML amb les eines de desenvolupador del navegador; 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.

Aprenentatge actiu: afegir estructura a la taula

Posarem aquests elements nous en acció.

  1. Primer de tot, fes una còpia local de spending-record.html i minimal-table.css en una carpeta nova.
  2. 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.
  3. Posa les capçaleres òbvies de fila dins d'un element <thead>, la fila «SUM» dins d'un element <tfoot>, i la resta del contingut dins d'un element <tbody>.
  4. Desa i actualitza, i observa que en afegir l'element <tfoot> la fila «SUM» s’ha col·locat a la part inferior de la taula.
  5. A continuació, afegeix un atribut colspan perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».
  6. 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 (head) del document HTML hi ha un element <style> buit. Afegirem dins d'aquest element les línies de codi CSS següents:
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    
    tfoot {
      font-weight: bold;
    }
    
  7. Desa i actualitza, i dona una ullada al resultat. Si els elements <tbody> i <tfoot> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.

Nota: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (Introducció al CSS és un bon lloc per on començar; també hi ha un article concret sobre aplicar estil a les taules).

La taula acabada ha de presentar un aspecte semblant a aquest:

Nota: Pots trobar el fitxer a GitHub com spending-record-finished.html (i també consultar l’exemple en viu).

Taules imbricades

És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <table>. 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.

El marcatge següent mostra una imbricació de taules senzilla:

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

La sortida presenta aquest aspecte:

title1 title2 title3
cell1 cell2 cell3
cell2 cell3
cell4 cell5 cell6

Taules per a usuaris amb discapacitats visuals

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.

Items Sold August 2016
Clothes Accessories
Trouses Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

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.

En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.

Utilitza capçaleres per a les files i les columnes

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.

Ja hem exposat les capçaleres en l’article anterior; consulta Afegir capçaleres amb elements <th>.

L'atribut scope

Un tema nou d'aquest article és l'atribut scope, que s’afegeix a l'element <th> 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:

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

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

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

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.

scope té dos valors possibles més; colgroup i rowgroup. 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 (<th>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut scope="colgroup", mentre que les altres tindrien un atribut scope="col".

Els atributs id i headers

Una alternativa a l'ús de l'atribut scope és utilitzar els atributs id i headers per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:

  1. Afegeix un id únic per a cada element <th>.
  2. Afegeix un atribut headers per a cada element <td>. Cada atribut headers ha d’incloure una llista dels id de tots els elements <th> que actuen de capçalera per a aquesta cel·la, separats per espais.

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.

Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:

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

Nota: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza molt més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de scope sol ser prou per a la majoria de les taules.

Aprenentatge actiu: Juga amb l’scope i les capçaleres

  1. Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers items-sold.html i minimal-table.css, en un directori nou.
  2. A continuació, afegeix els atributs scope apropiats per a fer aquesta taula més adequada.
  3. Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs id i header.

Nota: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a items-sold-scope.html (o també consultar l’exemple en viu) i items-sold-headers.html (o també consultar l’exemple en viu).

Resum

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 Aplicar estil a les taules.