6. Taules

 

Índex

Estructura bàsica: TABLE, TR i TD

Una taula és bàsicament una quadrícula. Els elements de la quadrícula s'anomenen cel·les. En sentit horitzontal, les cel·les s'agrupen en files i en sentit vertical en columnes.

Les taules queden delimitades per les etiquetes <table>...</table>. Les files s'indiquen amb les etiquetes <tr>...</tr>. I les cel·les de cada fila s'indiquen amb <td>...</td>:

Exemple

En principi totes les files han de tenir el mateix nombre de cel·les. Cal tenir molta cura a encloure correctament els elements més petits dins els més grans i que el conjunt sigui coherent; altrament la interpretació que en farien els navegadors és imprevisible.

 

Encapçalament de la taula i de les columnes: CAPTION i TH

Sovint les taules tenen un títol; aquest s'indica amb l'element CAPTION:

L'element CAPTION ocupa una fila sencera i va obligatòriament al capdamunt de la taula.

La cel·la superior de cada columna acostuma a contenir un títol que n'expressa el contingut. En aquest cas, a la primera fila es fan servir els elements TH. Els navegadors solen presentar-los en negreta i centrats en la cel·la:

Exemple

 

Combinació de cel·les

Sovint cal combinar dues o més cel·les en una de sola, de manera que la cel·la resultant ocupi tot l'espai que correspondria al conjunt. Aixó es pot fer en un sentit horizontal o vertical. S'aconsegueix amb les propietats colspan=n i rowspan=n, respectivament, essent n el nombre de cel·les combinades.

Cal tenir cura que les especificacions posteriors a un colspan o a un rowspan s'adiguin a l'existència d'aquests. Per exemple, si una taula té quatre columnes i en la segona hi ha un colspan="2", a continuació passarem ja a especificar la quarta, ja que la tercera és prolongació de la segona; si una taula té diverses files i en una cel·la d'una determinada fila hi ha un rowspan="3", en les dues files següents ens abstindrem d'especificar res per a l'espai corresponent a la cel·la superior estesa cap avall.

Exemple

 

Columnes

Cal notar que en l'estructura descrita inicialment les columnes són una simple acumulació de cel·les: la taula té files i les files tenen cel·les, i prou. Això significa que si cal establir una propietat per a una columna, cal atribuir-la a totes les cel·les que la componen, una a una. Però amb les etiquetes <colgroup> i <col> podem, amb una sola especificació, fixar la propietat de tota una columna.

L'estructura bàsica, situada immediatament abans de les cel·les afectades - i per tant darrrera <caption>, si hi ha aquest element -, és la següent:

Cal tenir present que les especificacions per al text contingut no es poden fer així, i que en cas de conflicte entre especificacions a files i a columnes, prevalen les primeres.

Exemple

 

Blocs de files (THEAD, TBODY i TFOOT)

Les files es poden agrupar en tres blocs, THEAD, TBODY i TFOOT.

 

Taules dins de taules

Una cel·la d'una taula pot contenir, al seu torn, una taula sencera. Si mantenim les vores invisibles (que és l'opció per defecte), aquesta mena d'estructures són un procediment excel·lent com a suport dels elements d'un document una mica complex.

La construcció d'aquestes estructures complexes purament a mà és feixuga: aquest és un dels casos en què és gairebé obligat l'ús d'un editor; un cop obtingut el que volem en suprimim, si cal, les especificacions que no interessin.

Exemple

 

 

Vores

 

Per aconseguir la visibilitat de les vores d'una taula, podem fer servir l'especificació següent a HEAD:

  • table { border-collapse: collapse }
  • td { border: solid thin color }

Més endavant analitzarem les infinites possibilitats que ofereixen aquesta mena d'especificacions.

Exemple