Estructura de les taules

En una taula s'ha de separar les capçaleres de les files del cos de la taula amb el contingut, per tal que els navegadors ho sàpiguen. D'aquesta manera, separant les diferents parts de la taula:

els navegadors donaran el format a la taula separant el cos de la capçalera. Així el cos, en cas que la taula sigui molt llarga, es podrà desplaçar de manera independent de l'encapçalament o del peu de la taula.

Calendari d'articles del bloc
Octubre 2007
Nombre total d'articles: 8
Setmana dilluns dimarts dimecres dijous divendres dissabte diumenge
primera 1 2 3 4 5 6 7
segona 8 9 10 11 12 13 14
tercera 15 16 17 18 19 20 21
quarta 22 23 24 25 26 27 28
cinquena 29 30 31

De la mateixa manera, si es volen imprimir taules amb gran quantitat de dades i que resulten molt llargues, l'encapçalament de la taula i la informació del peu de pàgina es repetiran a cadascuna de les pàgines que contenen les dades de taula.

Etiquetes

<table> </table>

Les etiquetes d'inici <table> i final </table>, inclouran totes les files i columnes necessàries amb les dades corresponents. És imprescindible tancar la taula amb l'etiqueta final.

<table> 
   <!-- contingut de la taula -->
</table>
summary

Aquest atribut opcional de l'element table dona una breu descripció del contingut, propòsit i estructura de la taula. La visió de conjunt proporcionada per l'atribut summary és especialment útil per a lectors de pantalla.

L'atribut summary també es pot incloure en un paràgraf abans de la taula.

<table summary=""> 
   <!-- contingut de la taula -->
</table>
<caption> ... </caption>

Comprén una o més frases que solen resumir la importància de la taula, els gràfics, il·lustracions, fotografies, etc.

Tot el que queda emmarcat dintre d'aquesta etiqueta serà el títol de la taula.

<table summary=""> 
   <caption> </caption> 
   <!-- contingut de la taula -->  
</table>
<thead> <tfoot> <tbody>

Aquestes etiquetes permeten agrupar les files en una taula. Quan es crea una taula, es pot voler tenir una fila d'encapçalament, algunes files amb dades, i una fila al peu de la taula. Aquesta divisió permet als navegadors presentar el cos de la taula movent-se independentment de l'encapçalament o del peu de pàgina. Quan s'imprimeixen taules llargues, l'encapçalament de taula i la informació del peu de pàgina es poden repetir a cada pàgina que conté dades de taula.

Si s'inclouen els elements de thead, tfoot i tbody, s'hauran d'utilitzar tots tres elements. Cal que apareguin en aquest ordre: <thead>, <tfoot> i <tbody>, de manera que els navegadors puguin renderitzar el peu abans de rebre totes les dades de la taula. Aquestes etiquetes s'han d'utilitzar dins de l'element de taula, <table>.

<table summary=""> 
   <caption></caption> 
   <thead></thead> 
   <tfoot></tfoot> 
   <tbody></tbody> 
       <!-- contingut de la taula --> 
</table>
<thead> </thead>

Defineix un grup de files d'encapçalament en una taula. En explícitament agrupar les files d'encapçalament amb l'etiqueta <thead>, els autors capaciten als navegadors a incloure l'encapçalament a cada pàgina d'una taula impresa, en diverses pàgines als navegadors, i així com la possibilitat d'atorgar un encapçalament estàtic a una taula llarga que es mou.

<tfoot> </tfoot>

Aquesta etiqueta defineix les files que apareixeran al final de la taula. Les files corresponents a l'etiqueta <tfoot> s'indiquen abans que l'etiqueta <tbody> en una taula HTML, de manera que el navegador les pugui renderitzar més de pressa. Els navegadors visuals generalment mostren les files de tfoot al final de la taula, sense tenir en compte on apareixen en el codi HTML.

les files <tfoot> no s'han d'incloure com notes a peu de pàgina ja que això pot generar confusió en els navegadors lineals.

<tbody> </tbody>

Aquesta etiqueta s'utilitza per definir la secció de dades de la taula. Es poden definir seccions específiques a la taula, creant diferents parts etiquetades cada una amb <tbody>. Cada secció pot tenir un disseny propi. Un <tbody> estàndard normalment defineix tots els elements de la taula excepte les files d'encapçalament o peu de pàgina.

El <tbody> ha de tenir una etiqueta <tr> dins!

<table summary=""> <caption></caption> <thead></thead> <tfoot></tfoot> <tbody></tbody> 
</table>
<tr> </tr>

L'etiqueta tr, Table Row permet inserir files a la taula. La taula tindrà tantes files com vegades aparegui aquesta etiqueta entre <table> i </table>. La instrucció d'inici de tr, <tr>, marca l'inici de la línia, la instrucció de fi, </tr>, marca el final. Entre l'inici i final de la línia cal inserir les cel·les de la taula.

<th> </th>

Aquest és el primer dels dos tipus de cel·les existents en el llenguatge HTML. El nom de l'etiqueta prové de l'anglès Table Header, és a dir, Capçalera de taula. De la mateixa manera que a qualsevol altra etiqueta, el començament i l'acabament venen determinats per una instrucció d'inici, <th>, i una de final, </th>. Entre el començament i el final s'insereix el text que, en general, es mostrarà amb unes característiques específiques: negreta, subrratllat, centrat, etc.

<td> </td>

Aquest és el segon tipus de cel·la de les taules HTML. El nom de l'etiqueta td, Table Data, de l'anglès Dades de Taula, fa pensar que las seva funció serà introduir totes les dades que es vulgui a les cel·les definides d'aquesta manera. De fet, podem inserir qualsevol element d'HTML com llistes, imatges, text formatat i, fins i tot, d'altres taules. La diferència amb la cel·la anterior <th> és molt poca, i l'existència separada només té sentit si considerem el caràcter descrptiu de l'HTML. A la pràctica, la diferència principal és que el text dels encapçalaments de la taula apareixerà ressaltat i centrat i el de les cel·les normals <td> no.

<table summary=""> <caption></caption> <thead></thead> <tfoot></tfoot> 
<tbody> 
<tr> 
<th></th> <th></th> <th></th> <th></th> <th></th> 
</tr> 
<tr> 
<th></th> <td></td> <td></td> 
</tr>
</tbody>
</table>

Atributs específics

rowspan i colspan

Les cel·les d'una taula es poden estendre en la fila o la columna. Per això s'utilitzen els atributs colspani rowspan de les etiquetes <th> i <td>:

Rowspan
estén una cel·la en diverses files. El format que s'utilitza: rowspan="n", on n representa el nombre de files.
Colspan
estén una cel·la diverses columnmes. El format d'escriptura que s'utilitza: colspan="n", on n és el nombre de columnes.

abbr = text [CS]

Aquest atribut sol usar-se per proporcionar d'una forma abreujada el contingut de la cel·la i, quan sigui convenien, pot ser interpretat pels programes adequats en lloc del contingut de la cel·la mateix. Els noms abreviats haurien de ser curts ja que la interpretació pot repetir-se diverses vegades. Per exemple, un sintetitzador de veu pot interpretar les capçaleres abreviades relatives a una cel·la en particular abans que el contingut mateix de la cel·la.

Aquest és un atribut que és sensible a les lletres majúscules, per exemple el programes interpreten diferent a i A

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0