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.
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.
<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>
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="n"
, on n representa el nombre de files.colspan="n"
, on n és el nombre de columnes.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