Logo de Mosaic
El text central d'HTML
Taules HTML

19. Taules HTML

Jenifer Hanen. 8 de juliol del 2008. Darrera modificació: 22 de novembre de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: encapçalament, dades, peu, taules, títol de taula

Vaja! Com hem d'utilitzar els estàndards del web per a organitzar pilons de dades? El simple fet de pensar en les tones d'elements imbricats necessaris per a aconseguir que totes aquestes dades es distribueixin en files i quadres ja fa que el nostre cervell quedi totalment col·lapsat; però hi ha una solució: les taules poden salvar-nos!

En el disseny de webs, les taules són una manera molt bona d'organitzar dades en un format tabulat. És a dir, que hem de veure les taules, els gràfics i els altres elements visuals informatius com una ajuda per a veure i processar una gran quantitat d'informació d'una manera resumida que ens ajuda a comparar i contrastar dades diferents. Podem veure aquests elements molt sovint als llocs web, ja sigui per a resumir o comparar resultats d'eleccions polítiques, estadístiques esportives, preus, talles o altres dades.

A l'època juràssica d'Internet, abans de la popularització del CSS com a mètode per a separar la presentació de l'estructura de l'HTML, les taules s'utilitzaven per a maquetar les pàgines web: per a crear columnes i quadres i, en general, per a distribuir el contingut. Però aquesta no és la manera correcta de fer les coses; la maquetació amb taules donava com a resultat unes pàgines carregades i confuses amb un piló de taules imbricades; arxius molt grans, difícils de mantenir i difícils de modificar. Encara podreu veure llocs web fets així al web, però cal que tingueu molt clar que actualment les taules s'han d'utilitzar només per a allò que van ser dissenyades: les dades tabulars, i fer servir el CSS per a controlar la maquetació.

En aquest apartat explicaré com utilitzar adequadament les taules HTML.

Els continguts d'aquest apartat són els següents:

19.1. La taula més bàsica

Començaré amb el codi HTML semàntic necessari per a crear una taula bàsica; aquest exemple en concret compara erupcions volcàniques recents de la regió del Pacífic d'Amèrica del Nord. A mi m'agraden els volcans i quan era petita vaig convèncer la meva mare que em portés a diversos d'aquests volcans durant els viatges que fèiem a l'estiu per a visitar l'àvia. Sempre esperava que algun d'aquests volcans del Nord-oest del Pacífic entrés en erupció mentre estàvem de vacances, però va ser en va.

La primera taula és la següent:

<table>
  <tr>
    <td>Volcano Name</td>
    <td>Location</td>
    <td>Last Major Eruption</td>
    <td>Type of Eruption</td>
  </tr>
  <tr>
    <td>Mt. Lassen</td>
    <td>California</td>
    <td>1914-17</td>
    <td>Explosive Eruption</td>
  </tr>
  <tr>
    <td>Mt. Hood</td>
    <td>Oregon</td>
    <td>1790s</td>
    <td>Pyroclastic flows and Mudflows</td>
  </tr>
  <tr>
    <td>Mt. St. Helens</td>
    <td>Washington</td>
    <td>1980</td>
    <td>Explosive Eruption</td>
  </tr>
</table>

Aquest codi es representa de la manera següent:

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Començarem descomponent l'etiquetatge HTML utilitzat en el codi anterior:

Tingueu en compte que els elements bàsics s'han d'imbricar de la manera següent:

<table>
  <tr>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

Si els ordenem d'una altra manera, el navegador generarà un garbuix considerable i mostrarà la taula d'una manera molt estranya.

19.2. Afegir-hi algunes altres funcions

Ara que ja tenim la taula bàsica, podeu afegir-hi algunes funcions de taula una mica més complexes. En primer lloc hi afegirem un títol i uns encapçalaments de columna per a millorar les dades tant pel que fa a la semàntica com a la llegibilitat per part dels lectors de pantalla. L'etiquetatge de la taula millorada és el següent:

<table>
  <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
  <tr>
    <th>Volcano Name</th>
    <th>Location</th>
    <th>Last Major Eruption</th>
    <th>Type of Eruption</th>
  </tr>
  <tr>
    <td>Mt. Lassen</td>
    <td>California</td>
    <td>1914-17</td>
    <td>Explosive Eruption</td>
  </tr>
  <tr>
    <td>Mt. Hood</td>
    <td>Oregon</td>
    <td>1790s</td>
    <td>Pyroclastic flows and Mudflows</td>
  </tr>
  <tr>
    <td>Mt. St. Helens</td>
    <td>Washington</td>
    <td>1980</td>
    <td>Explosive Eruption</td>
  </tr>
</table>

Aquest codi es representa de la manera següent:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Els elements nous que hem utilitzat són:

19.3. Seguir estructurant la taula

Com a pas final per a acabar d'estructurar la nostra taula, definiré unes seccions d'encapçalament i de cos de la taula, hi afegiré un peu i definiré l'àmbit dels títols de fila i columna. També hi afegiré un atribut de resum per a descriure el contingut de la taula. L'etiquetatge definitiu de la taula és el següent:

<table>
  <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
  <thead>
    <tr>
      <th scope="col">Volcano Name</th>
      <th scope="col">Location</th>
      <th scope="col">Last Major Eruption</th>
      <th scope="col">Type of Eruption</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">Compiled in 2008 by Ms Jen</td>
    </tr>
  </tfoot>  
  <tbody>
    <tr>
      <th scope="row">Mt. Lassen</th>
      <td>California</td>
      <td>1914-17</td>
      <td>Explosive Eruption</td>
    </tr>
    <tr>
      <th scope="row">Mt. Hood</th>
      <td>Oregon</td>
      <td>1790s</td>
      <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
      <th scope="row">Mt. St. Helens</th>
      <td>Washington</td>
      <td>1980</td>
      <td>Explosive Eruption</td>
    </tr>
  </tbody>
</table>

Aquest codi de taula té el següent aspecte en un navegador:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Compiled in 2008 by Ms Jen
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Els nous elements/atributs són els següents:

19.4. El CSS ens ajuda: una taula amb un aspecte millor

Els elements i atributs anteriors són tot el que necessiteu per codificar una bona taula de dades. Ara que ja hem definit l'estructura HTML, passem a veure un CSS molt senzill per a fer que la taula tingui un aspecte encara millor:

body{
  background: #ffffff;
  margin: 0;
  padding: 20px;
  line-height: 1.4em;
  font-family: tahoma, arial, sans-serif;
  font-size: 62.5%;
}
   
table {
  width: 80%;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #333333;
  border-collapse: collapse;
}
   
td, th {
  border-bottom: 1px solid #333333;
  padding: 6px 16px;
  text-align: left;
}
   
th {
  background: #EEEEEE;
}
   
caption {
  background: #E0E0E0;
  margin: 0;
  border: 1px solid #333333;
  border-bottom: none;
  padding: 6px 16px;
  font-weight: bold;
}

Quan ho apliquem a l'etiquetatge definitiu de la nostra taula, l'aspecte que tindrà és el que es pot veure a la figura 1. També podeu comprovar la taula real d'exemple.

Exemple de la taula final

Figura 1. Ara la taula és visualment molt més atractiva.

Arxiu font: "table3.html"

Ooooh...! Molt millor, no? Podeu aplicar els estils que vulgueu a la taula, però l'exemple anterior és un punt de referència a partir del qual podeu començar a treballar. En un apartat aprendreu moltes més coses sobre els estils de les taules; de moment em limitaré a explicar què fa cadascuna de les seccions d'aquest CSS:

Resum

En aquest apartat he explicat tot el que heu de saber per a crear unes taules de dades en HTML molt efectives. Això és tot! Per a acabar us deixaré amb un parell d'idees bàsiques que cal que recordeu:

Preguntes de repàs

  1. Comenceu escrivint el codi d'una taula senzilla amb només els 3 elements de taula principals: table, tr i td. Deseu-la i obriu-la en un navegador.

  2. Igual que en el segon exemple anterior, afegiu-hi un títol, títols de columna i un peu. Com canvia el que podeu veure en el navegador?

  3. Què podeu fer per a que la taula sigui més accessible per als lectors de pantalla i els dispositius portàtils?

  4. Ara creeu un arxiu CSS. Proveu de definir un estil per a les vores, la separació i l'espaiat de cel·la de la taula només amb el CSS i sense fer servir cap atribut de l'etiquetatge HTML. Afegiu-hi un color de fons i definiu l'estil dels tipus de lletra.

Passeu-ho bé!

Lectures complementàries

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.
: Anar a l'índex :