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

Aquest article ens ajudarà a començar amb les taules HTML, cobreix els conceptes bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.

Requisits Previs: Els fonaments d'HTML (veure Introducció a HTML).
Objectiu: Familiaritzar-se amb les taules HTML.

Què és una taula?

Una taula és un conjunt estructurat de dades composta de files i columnes (dades tabulars). Una taula permet buscar de forma ràpida i fàcil valors que indiquin algun tipus de connexió entre els diferents tipus de dades, per exemple una persona i la seva edat, o un dia o la setmana, o el calendari d'una piscina municipal.

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

Les taules s'utilitzen amb molta freqüència en la nostre societat, han estat durant molt de temps, com ho demostra aquest document del cens dels EUA a partir de 1800:

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

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

Com funciona una taula?

El punt d'una taula és que és rígid. La informació és fàcil d'interpretar fent associacions visuals entre les capçaleres de fila i columna. Si mirem la taula de sota, per exemple, trobar un pronom personal singular, que s'utilitza en la "3ª Persona", amb un ♀ de gènere, que s'utilitza com un objecte en una oració. Es pot trobar la resposta per associació de les capçaleres de fila i 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 vidents i deficients visuals per igual.

Estil de taula

Es pot trobar el codi font HTML de la taula anterior en GitHub; anar i fer una ullada ara i també fer un cop d'ull a l'exemple en viu! Una cosa que notarem és que la taula no és molt llegible - això és perquè la taula que apareix més amunt, en aquesta pàgina, té afegit un cert estil pel lloc MDN, mentres que l'exemple de GitHub no té en absolut informació d'estil.

No ens enganyem; perquè les taules siguin eficaces a la web, s'haurà de proporcionar alguna informació d'estil amb CSS, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrerem en la part HTML; per saber més sobre la part CSS s'ha de visitar el nostre article taules d'estil després que d'haver acabat aquí..

No ens centrarem en CSS en aquest mòdul, però hem proporcionat un full d'estil CSS de mínims, per al seu ús, per fer les taules més llegibles que el valor per defecte que s'obté sense cap tipus d'estil. Es pot trobar el full d'estil aquí i també es pot trobar una plantilla HTML on s'aplica el full d'estil - junts us donarà un bon punt de partida per experimentar amb taules HTML.

Nota: També veureu aquí una versió de la taula personal_pronouns amb un estil aplicat, perquè tingueu una idea del que sembla.

Quan NO usar taules HTML?

Les taules HTML s'han d'utilitzar per dades tabulars - això és pel que estan dissenyades. Malauradament, molta gent utilitza taules HTML per dissenyar pàgines web, per exemple, una fila per contenir la capçalera, una fila per contenir les columnes de contingut, una fila per contenir el peu de pàgina, etc. Es poden trobar més detalls i un exemple en Dissenys de Pàgines en el nostre Mòdul d'Aprenentatge de l'Accessibilitat. Això era comunament utilitzat, perquè el suport CSS a través de navegadors solia ser terrible; els dissenys de taules són molt menys comuns avui en dia, però encara es poden veure en alguns racons de la web.

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

  1. Les taules de disseny redueixen l'accessibilitat als usuaris amb discapacitat visual: Els Lectors de pantalla, utilitzats per persones cegues, interpretan les etiquetes que existeixen en una pàgina HTML i llegeixen el contingut a l'usuari. A causa que les taules no són l'eina adequada per al disseny, i el marcat és més complexa que amb les tècniques de disseny CSS, la sortida en els lectors de pantalla serà confús per als usuaris.
  2. Les taules produeixen sopa d'etiquetes: Com es va esmentar anteriorment, els dissenys de taules generalment involucren estructures de marcat més complexes que les tècniques de disseny adequats. Això pot resultar en el codi de ser més difícil d'escriure, mantenir i depurar.
  3. Les  taules no són automaticament sensibles: Quan s'utilitzan esquemes de contenidors adequats (com ara <header>, <section>, <article>, or <div>), els valors per defecte d'amplada és el 100% del seu element pare. Les taules, per altra banda, estan dimensionades d'acord al seu contingut per defecte, de manera que es necessiten mesures addicionals, per aconseguir un estil disseny de taula, per treballar amb eficàcia entre una varietat de dispositius.

Aprenentatge actiu: Crear la primera taula

Hem parlat de prou teoria sobre les taules, de manera que, anem a bussejar en un exemple pràctic i construir una taula senzilla.

  1. En primer lloc, fer una còpia local de blank-template.html i minimal-table.css in en un nou directori a l'equip local.
  2. El contingut de cada taula està tancat per aquestes dues etiquetes: <table></table>. Afegir aquestes dins del cos del codi HTML.
  3. El contenidor més petit dins d'una taula és una cel·la de la taula, que es creat per un element <td> ('td' és sinònim de 'dades de la taula'). Afegir la següent dins les seves etiquetes table:
    <td>Hi, I'm your first cell.</td>
  4. Si volem una fila de quatre cel·les, necessitem copiar les següents etiquetes en tres ocasions. Actualitzar els continguts de la taula per veure si queda 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>

Com es veurà, les cel·les no es col·loquen una sota de l'altra, sinó que s'alineen automàticament amb un altre a la mateixa fila. Cada element <td> crea una sola cel·la i juntes formen la primera fila. Cada cel·la afegida fa que la fila es fagi més llarga.

Per aturar que aquesta fila creixi i comenci a col·locar les cel·les subsegüents en una segona fila, hem d'utilitzar l'etiqueta <tr> , l'element ('tr' és sinònim de "fila de la taula '). Investigarem això ara.

  1. Col·locar les quatre cel·les creades dins de les etiquetes <tr>, així:
    <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. Ara que s'ha fet una fila, intentar fer una o dues més - cada fila ha de estar embolicada en un element <tr> addicional, per cada cel·la continguda en un <td>.

Això ha de resultar una taula que es veu de la manera següent:

Hola, Soc la primera cel.la. Soc la segona cel.la. Soc la tecera cel.la. Soc la quarta cel.la.
Segona fila, primera cel.la. Cell 2. Cell 3. Cell 4.

Nota: També es pot trobar aquesta a GitHub com simple-table.html (veure també en directe).

Afegir capçaleres amb elements <th>

Ara centrarem la nostra atenció en les capçaleres de taula - cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o columna (per exemple, veure les cel·les "Breed" i "Age" en el primer exemple que es mostra en aquest article). Per il·lustrar per què són útils, fer una ullada a la següent taula d'exemple. Primer el codi font:

<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ó real 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 aquí és que, mentre que es pogui entendre el que està passant, no és tan fàcil creuar les dades de referència pel que pogués ser. Si les capçaleres de columna i fila destaquessin d'alguna manera, seria molt millor.

Aprenentatge actiu: capçaleres de taula

Intentem millorar aquesta taula.

  1. En primer lloc, fer una còpia local dels fitxers dogs-table.html i minimal-table.css en un nou directori a l'equip local. L'HTML conté el mateix exemple Dogs com s'ha vist anteriorment.
  2. Per reconèixer les capçaleres de taula com capçaleres, tant visualment com semànticament, es pot utilitzar l'element <th> ('th' és sinònim de 'capçalera de taula'). Això funciona exactament de la mateixa manera que <td>, excepte que denota una capçalera, no és una cel·la normal. Entrar al codi HTML, i canviar tots els elements <td> que envolten les capçaleres de taula en elements <th>.
  3. Guardar l'HTML i carregar en un navegador, i ha de mostrar les capçaleres que ara s'assemblen a les capçaleres.

Nota: Es pot trobar el nostre exemple acabat en dogs-table-fixed.html en GitHub (veure-ho en directe també).

Perquè són útils els encapçalats ?

Ja hem respost parcialment a aquesta pregunta - és més fàcil trobar les dades, si les busquem, quan les capçaleres destaquen clarament i el disseny en general es veu millor.

Nota: Els encapçalaments de les taules vénen amb un estil per defecte - estan en negreta i centrats, fins i tot si no s'afegeix el seu propi estil a la taula, per ajudar a que destaquin.

Les capçaleres de les taules també tenen un benefici afegit - juntament amb l'atribut scope (aprendrem sobre ell en el proper article), permet fer més accessibles les taules, associant cada capçalera amb totes les dades en la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o columna de dades alhora, la qual cosa és força útil.

Permetre que les cel·les abastin diverses files i columnes

A vegades volem que les cel·les abastin diverses files o columnes. Prenguen el següent exemple senzill, que mostra els noms dels animals comuns. En alguns casos, volem mostrar els noms dels mascles i les femelles al costat del nom de l'animal. De vegades no ho fem, i en aquests casos només volem que el nom d'un animal abasti tota la taula.

El marcat 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 dóna exactament el que volem:

Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Cock
Rooster

Necessitem una manera d'aconseguir que "Animals", "Hippopotamus" i "Crocodile" abastin al llarg de dues columnes, i "Horse" i "Chicken" abastin més de dues files cap avall. Afortunadament, les capçaleres de taula i cel·les tenen els atributs colspan i rowspan, que ens permeten fer precisament aquestes coses. Tots dos acceptan un valor de nombre sense unitats, que és igual al nombre de files o columnes que es desitja abastar. Per exemple, colspan="2" fa que una cel·la abasti dues columnes.

Utilitzarem colspan i rowspan per millorar aquesta taula.

  1. En primer lloc, fer una còpia local dels fitxers animals-table.html i minimal-table.css en un nou directori a l'equip local. L'HTML conté el mateix exemple animals com s'ha vist anteriorment.
  2. A continuació, utilitzar colspan per fer que "Animals", "Hippopotamus" i "Crocodile" s'estenguin al llarg de dues columnes.
  3. Finalment, utilitzar rowspan per fer que "Horse" i "Chicken" s'estenguin al llarg de dues files.
  4. Guardar i obrir el codi en el navegador per veure la millora.

Nota: Es pot trobar el nostre exemple acabat en animals-table-fixed.html en GitHub (veureu-ho en directe també).

Proporcionar estil comú a les columnes

Hi ha una última característica que explicarem en aquest article abans de seguir endavant. HTML té un mètode per definir la informació d'estil per a tota una columna de dades en un sol lloc - els elements <col> i <colgroup> Aquests existeixen, perquè pot ser una mica molest i ineficient haver d'especificar l'estil en les columnes - en general, s'ha d'especificar la informació d'estil en cada <td> o <th> en la columna, o utilitzar un selector complex com :nth-child().

Prenguem el següent exemple:

<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 dóna el següent resultat:

Data 1 Data 2
Calcutta Orange
Robots Jazz

Això no és l'ideal, ja que hem de repetir la informació d'estil en les tres cel·les de la columna (que probablement tindríem un conjunt de classes en totes tres en un projecte real i especificar l'estil en una fulla d'estil per separat). En comptes de fer això, podem especificar la informació una vegada, en un element <col>. Els elements <col> s'especifiquen dins d'un contenidor <colgroup> just sota l'etiqueta d'obertura <table>. Podríem crear el mateix efecte que veiem a dalt mitjançant l'especificació a 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>

Efectivament estem definint dues "columnes d'estil", especificant una informació d'estil per a cada columna. No estem Dissenyant la primera columna, però encara hem d'incloure un element en blanc <col> - si no ho fem, l'estil només s'aplicaria a la primera columna.

Si volguéssim aplicar la informació d'estil per totes dues columnes, podríem incloure un element <col> amb un atribut span en ell, 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 que volem aplicar-los l'estil.

Aprenentatge actiu: colgroup i col

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

A continuació es pot veure l'horari d'una professora d'idiomes. Divendres té una nova classe d'ensenyament d'holandès durant tot el dia, però també ensenya alemany durant alguns períodes en dimarts i dijous. Vol destacar les columnes que contenen els dies que està ensenyant.

  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 els passos a continuació.

  1. En primer lloc, fer una còpia local de l'arxiu timetable.html en un nou directori a l'equip local. L'HTML conté la mateixa taula que hem vist anteriorment, menys la informació de les columnes d'estil.
  2. Afegir un element <colgroup> a la part superior de la taula, just sota l'etiqueta <table>, en el qual afegirem els elements <col>.
  3. Les dues primeres columnes sense cap estil.
  4. Afegir un color de fons a la segona i tercera columna. El valor de l'atribut style és background-color: # 97DB9A;
  5. Establir una amplada de separació en la quarta columna. El valor de l'atribut style és width: 42px;
  6. Afegir un color de fons a la cinquena columna. El valor de l'atribut style és background-color: # 97DB9A;
  7. Afegir un color de fons diferent, més una vora a la sisena columna, per significar que es tracta d'un dia especial i està ensenyant una nova classe. 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;

Veure com us va amb l'exemple. Si us quedeu encallats, o desitjeu revisar el treball, podeu trobar la nostra versió en GitHub com timetable-fixed.html (veureu-ho en directe també).

Sumari

Gairebé amb això concloem els conceptes bàsics de les taules HTML. En el següent article veurem algunes característiques de les taules una mica més avançades, i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.

Document Tags and Contributors

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