MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Taula HTML característiques avançades i l'accessibilitat

This translation is incomplete. Please help translate this article from English.

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 l'agrupament de files en seccions de cap, cos i peu de taula -, així com pel que fa a l'accessibilitat de les taules per als usuaris amb discapacitat visual.

Requisits Previs: Fonaments d'HTML (veure Introducció a HTML).
Objectiu: Obtenir informació sobre les característiques més avançades de les taules HTML, i l'accessibilitat de les taules.

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

Es pot donar a la taula una títol posant-ho dins d'un element <caption> i niant-ho en l'interior de l'element <table>. 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 vulguin tenir una idea ràpida de si la taula és útil per a ells, fent una ullada a la pàgina, però en particular per als usuaris cecs. En lloc de tenir un lector de pantalla que llegeixi el contingut de moltes cel·les per esbrinar sobre la taula, ell o ella, depenent del títol decidiran si llegir o no la taula amb més detall.

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

Nota: L'atribut summary pot ser utilitzat en l'etiqueta <table> per a proporcionar una descripció - això també és llegit pels lectors de pantalla. Ens agradaria recomanar l'ús de l'element <caption> en el seu lloc, ja que, com a resum està en desaprovat per l'especificació HTML 5, i no pot ser llegit pels usuaris vidents (no apareix a la pàgina .)

Aprenentatge actiu: Afegir un títol

Tractarem aixó, visitant un exemple que ens trobem per primera vegada en l'article anterior.

  1. Obrir el calendari escolar de la professora d'idiomes des del final de Fonaments de la taula HTML, o fer una còpia local de l'arxiu timetable-fixed.html
  2. Afegir un títol adequat a la taula.
  3. Desar el codi i obrir-lo en el navegador per veure com es veu.

Nota: Es pot trobar la nostra versió en GitHub - veure timetable-caption.html (veureu-ho en directe també).

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

A mesura que les taules es fan una mica més complexes en la seva estructura, és útil aprofundir en la definició estructural. Una manera clara de fer això és mitjançant l'ús de <thead>, <tfoot> i <tbody>, que permeten el  marcat d'un encapçalat, peu i cos de la secció de la taula.

Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no donen lloc a cap millora visual. No obstant això, són molt útils per l'estil i el disseny - que actuen com a ganxos per afegir CSS a la taula. Per donar alguns exemples interessants, en el cas d'una taula llarga, es podria fer que la capçalera de la taula i el peu de pàgina es repetís en cada pàgina impresa, i fer que el cos de la taula es mostrés en una sola pàgina i que el contingut disponible es pogués desplaçar cap amunt i cap avall .

Per utilitzar-los:

  • L'element <thead> es necessita per embolicar la part de la taula que és la capçalera - aquesta és normalment la primera fila que conté les capçaleres de columna, però això no és sempre el cas. Si s'està utilitzant els elements <col>/<colgroup>, la capçalera de la taula ha de venir just sota d'ells.
  • L'element <tfoot> es necessita per embolicar la part de la taula que és el peu - això podria ser una fila al final amb elements de files anteriors sumades, per exemple. Es pot 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> es necessita per a embolicar les altres parts del contingut de la taula que no estan a la capçalera o el peu de taula. Apareixerà sota de la capçalera de la taula o, de vegades a peu de taula, depenent de com es decidís estructurar-la (consulteu les notes anteriors).

Nota: <tbody> sempre s'inclou en cada taula, implícitament, si no s'especifica en el codi. Per comprovar això, obriu un dels exemples anteriors que no inclogui <tbody> i mirar el codi HTML en les eines de desenvolupador del navegador - es veurà que el navegador ha afegit aquesta etiqueta. Ens podrian preguntar perquè molestar-nos a incloure-la - s'hauria, perquè ens dóna més control sobre la estructura de la taula i l'estil.

Aprenentatge actiu: Afegir estructura a la taula

Posarem aquests nous elements en acció.

  1. Primer de tot, fer una còpia local de spending-record.html i minimal-table.css en una nova carpeta.
  2. Intentar obrir-lo en un navegador - veurem que es veu correcte, però podria ser millorat. La fila "SUM" conté una suma de les quantitats gastades, sembla estar en el lloc equivocat, i hi ha alguns detalls que falten en el codi.
  3. Posar, obviament, les capçaleres de fila dins d'un element <thead>, la fila "suma" dins d'un element <tfoot>, i la resta del contingut dins d'un element <tbody>.
  4. Guardar i actualitzar, i veurem que en afegri l'element <tfoot> ha causat que la fila "suma" baixés a la part inferior de la taula.
  5. A continuació, afegir un atribut colspan per fer que  la cel·la "SUM" abasti les quatre primeres columnes, de manera que el nombre real aparegui a la part inferior de la columna "Cost".
  6. Afegir una mica d'estil extra a la taula, ens donarà una idea de l'útil que són aquests elements per aplicar CSS. Dins del head del document HTML, veurem un element <style> buit. Dins d'aquest element, afegirem les següents línies de codi CSS:
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    
    tfoot {
      font-weight: bold;
    }
    
  7. Guardar i actualitzar, i fer una ullada al resultat. Si els elements <tbody> i <tfoot> no estan al seu lloc, serà molt més complicat escriure selectors/regles per aplicar el mateix estil.

Nota: No esperem que es pugui entendre plenament la CSS en aquest moment. Aprendrem més sobre això a través dels nostres mòduls CSS (Introducció a CSS és un bon lloc per començar; també tenim un article en concret en les taules d'estil).

La taula acabada s'ha de veure a alguna cosa com el següent:

Note: Tambés es pot trovar en Github com spending-record-finished.html (veureu-ho en viu també).

Niant Taules

És possible niar una taula dins d'una altra, sempre que s'inclogui l'estructura completa, inclouent l'element <table>. Això, generalment, no és realment aconsellable, ja que fa que el marcat sigui més confús i menys accessible als usuaris de lectors de pantalla, i en molts casos pot ser que també s'acabin afegint cel·les /files/columnes addicionals a la taula existent. No obstant això, de vegades és necessari, per exemple, importar el contingut fàcilment d'altres fonts.

El següent marcat mostra una senzilla taula niada:

<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 de la qual, és com la següent:

title1 title2 title3
cell1 cell2 cell3
cell2 cell3
cell4 cell5 cell6

Taules per a usuaris amb discapacitat visual

Recapitulem breument sobre com fem servir les taules de dades. Una taula pot ser una eina molt útil, per donar-nos un ràpid accés a les dades i permetre'ns buscar valors diferents. Per exemple, només es necessita un breu cop d'ull a la taula de sota per esbrinar quants anells van ser venuts a Gent l'agost passat. Per entendre la informació fem associacions visuals entre les dades d'aquesta taula i les seves capçaleres de columna i/o fila.

 

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 es podem fer aquestes associacions visuals? Com llavors es pot llegir una taula com l'anterior? Persones amb discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és problema quan estàs llegint text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. No obstant això, amb el marcatge adequat es pot substituir les associacions visuals per unes programàtiques.

Aquesta secció de l'article s'ofereixen més tècniques per fer taules el més accessibles possible.

Utilitza capçaleres de columna i fila

Els lectors de pantalla identifican totes les capçaleres i els utilitzen per fer associacions programàtiques entre les capçaleres i les cel·les amb les quals es relacionen. La combinació de les capçaleres de columna i fila identifican i interpretan les dades en cada cel·la perquè l'usuari lector de pantalla pogui interpretar la taula de manera similar a com un usuari vident fa.

Ja hem cobert les capçaleres en el nostre article anterior - vegeu Afegir capçaleres amb elements <th>.

L'atribut scope

Un nou tema d'aquest article és l'atribut scope, que es pot afegir a l'element <th> per dir-li als lectors de pantalla exactament que les cel·les de capçalera són capçaleres - es tracta d'una capçalera de fila en la qual es troba, o la columna, per exemple? Mirant cap enrere en el nostre exemple de registre de la despesa, es podria definir sense ambigüitats les capçaleres de columna com capçaleres de columna com aquesta:

<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 com això (si afegim les capçaleres de fila, així com 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 reconeixeran el marcat estructurat com aquest, i permetran als seus usuaris llegir tota la columna o fila alhora, per exemple.

scope té dos valors possibles més - colgroup i rowgroup. aquests s'utilitzen per als títols que es col·loquen sobre la part superior de diverses columnes o files. Si mirem cap enrere en els "articles venuts ..." la taula al començament d'aquesta secció de l'article, es veurà que la cel·la "Clothes" es troba per sobre de les cel·les "Trousers", "Skirts" i "Dresses". Totes aquestes cel·les han de marcar-se com encapçalats (<th>), però "Clothes" és un títol que es troba a la part superior i defineix els altres tres subtítols. "Clothes" per tant, han de tenir un atribut scope="colgroup", mentre que els 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 crear associacions entre les capçaleres i cel·les. La forma en què s'utilitzen és la següent:

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

Això dóna a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per la capçalera(s) per a cada columna i fila de la que és part, com a una mena de full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres de columna i fila.

Tornant al nostre exemple dels costos de despeses, dos fragments anteriors es podrian 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>

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

Aprenentatge actiu: jugant amb scope i headers

  1. Per a aquest exercici final, ens agradaria que féssiu, primer, copies locals d'items-sold.html i minimal-table.css, en un nou directori.
  2. Ara tracteu d'afegir els atributs scope apropiats per fer aquesta taula més adequada.
  3. Finalment, tracteu de fer una altra còpia dels arxius incials, i aquest cop fer més accessible la taula utilitzant els atributs id i headers.

Nota:  Podeu verificar el vostre treball comparant-los amb els nostres exemples acabats - veure items-sold-scope.html (veure aquest en viu també) i items-sold-headers.html (veure aquest en viu també).

Sumari

Hi ha algunes altres coses que es podrian aprendre sobre la taula HTML, però realment hem donat tot el que es necessita saber en aquest precís moment. En aquest punt, és possible que vulgueu aprendre sobre l'estil de les taules HTML  - vegeu Taules d'Estil.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,