Come creare tabelle in HTML5 - dummies

Il contenitore di markup primario per le tabelle in HTML è l'elemento della tabella. Cioè, si usa il tag

di apertura per indicare l'inizio di una tabella e si aggiunge il tag di chiusura

per terminarlo.

Inoltre, i blocchi di base per i dati di tabella in HTML sono gli elementi di riga di tabella ( ) e dati di tabella ( ), quando una tabella è composta da tante righe quanti sono elementi (più qualsiasi riga di intestazione o piè di pagina) e tante colonne quante sono il numero massimo di elementi in una determinata riga della tabella.

Tra questi tag di apertura e chiusura, puoi trovare i seguenti elementi in questo ordine molto interessante e prescritto (in altre parole, obbligatorio):

Zero o uno elementi per definire una didascalia per una tabella (se c'è uno di questi elementi, o nessuna didascalia per la tabella se è assente). Se viene utilizzato, un elemento deve seguire immediatamente dopo il tag di apertura

Zero o un gruppo di colonne () elementi per definire i raggruppamenti di colonne per la tabella (se c'è un tale elemento o nessun raggruppamento di colonne se l'elemento è assente). Deve apparire dopo ogni elemento, se uno è presente e prima di uno qualsiasi dei seguenti elementi della tabella.

Zero o un intestazione di tabella () elementi per definire la sezione di intestazione per una tabella (se c'è un tale elemento, o nessuna sezione di intestazione della tabella se l'elemento è assente). Spesso, una prima riga di intestazione della tabella si estende per l'intera larghezza della tabella per identificare l'intera cosa e la prima riga di intestazione è seguita da una seconda riga di intestazioni individuali per ogni colonna della tabella.

Zero o più elementi del corpo della tabella (

) per identificare il contenuto effettivo per la tabella. Una tabella può avere più elementi, quindi è insolito in HTML in quanto una tabella può avere solo una testa ma più corpi!

Zero o un footer tabella () per fornire informazioni per la parte inferiore di una tabella. I browser possono usare

e decidere cosa scorrere (il corpo del tavolo, di solito) e cosa lasciare sempre presente sullo schermo.

Il footer della tabella è un caso speciale quando si tratta di dove può apparire la sequenza di marcatura della tabella. Può sempre apparire per ultimo nella sequenza (come in questa lista), ma può anche apparire subito dopo uno qualsiasi di questi elementi presenti (in questo ordine):, e.

Tuttavia, comparirà prima degli elementi

e . In questo caso speciale, non può apparire anche alla fine del tavolo. Non autorizzato!

Se non c'è un elemento

presente (che normalmente definisce il corpo della tabella in una tabella con un'intestazione di tabella definita ed eventualmente anche una sezione del piè di pagina), l'elemento della riga di tabella ( ) definisce le righe per i dati effettivamente presentati dalla tabella.All'interno di ogni tabella, la riga contiene tutti gli elementi della tabella (

) in quanto vi sono celle in quella riga.

Poiché la sintassi della tabella HTML e l'ordine di markup possono essere complicati e complicati, è ancora più utile del solito eseguire tutto il markup della tabella tramite il servizio di convalida del markup W3C per accertarsi che sia corretto.

La struttura di una tabella HTML è più facile da capire se la rappresentiamo utilizzando solo il markup del contenitore di base, con alcuni commenti illuminanti, come in questo caso:

Struttura di riferimento della tabella di base e sequenza
 Tabella 6-1: Struttura markup HTML e sequenza

 Elemento 
 Descrizione 



 tabella 
 contenitore tabella generale 


 didascalia 
 testo didascalia 


 tbody 
 contenitore corpo tabella 


 t 
 contenitore footer tabella 



 Elemento 
 Descrizione

La figura mostra come un browser visualizza questa tabella. (La voce border = "1" è stata aggiunta all'elemento table per disegnare un contorno attorno al bordo di ogni cella di tabella, il che rende il tavolo un po 'più bello.)