HTML/XHTML  »  Guide  »  Guida HTML 

Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>



Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine HTML, che si sono riempite di <tr> e di <td>.

Per portare un po’ di ordine in questo caos nelle specifiche sono stati introdotti dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella.

Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:

 <caption>

è l’intestazione, il titolo con un commento esplicativo sulla tabella

<thead> è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle
<tfoot> è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme
<tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella

<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe (“row group”).

Da notare che – contrariamente a quello che si potrebbe pensare – il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. L’idea di base è che il browser nell’eseguire il rendering del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità.

Un’altra particolarità è che le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato.

Ecco comunque uno schema che riassume la struttura delle tabelle secondo l’HTML 4:

Figura 1. Elementi della tabella
Elementi della tabella

A questa pagina è possibile visualizzare un esempio.

Ultimi articoli HTML/XHTML

Inserire video nelle pagine Web con HTML5

Codec, compatibilità dei browser, tools, codice e best practices per...

LungoJS: semantica HTML5 per il mobile

Realizzare layout per dispositivi mobili tenendo conto della...

Web storage, i cookies secondo HTML5

Come rendere persistenti i dati con HTML5

HTML5, section o article? ...E il div?

Cerchiamo di fare chiarezza sull'uso di questi due nuovi elementi e...

HTML5, la validazione del codice

Gli strumenti per verificare l'aderenza agli standard di pagine e...

Altri articoli

Guide HTML/XHTML

Guida HTML5

Una guida per conoscere e applicare da subito le novità introdotte...

Guida XHTML

XHTML è il nuovo standard per il WEB ed è la transizione verso...

Altre guide

Newsletter @Daily HTML.it

Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti