Le tabelle rappresentano uno degli strumenti più utilizzati e potenti nella formattazione dei documenti HTML.
Gli elementi fondamentali per definire la struttura di una tabella sono:
- TABLE, che indica l' inizio e la fine di una tabella, caratterizzato dai tag <TABLE> e </TABLE>;
- TR, che indica l'inizio di una nuova riga, caratterizzato dai tag <TR> e </TR>;
- TD, che indica l'inizio di una nuova cella all'interno di una riga, caratterizzato dai tag <TD> e </TD>;
Esempio :
Per creare una tabella a larghezza fissa bisognerà imporre altezza e larghezza in pixel, aggiungendo attributi width e height.
Come per le immagini, border ci serve a determinare il bordo della nostra tabella, se inserirlo, se diminuirlo, aumentarlo etc...
Di default il bordo è pari a 1.
Se ivece lo impostiamo con valore = 0, il bordo non verrà visualizzato.
Esempio:
Mentre per creare una tabella a larghezza dinamica bisognera' imporre altezza e larghezza in % Esempio:
Di solito la larghezza e l'altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga.
L'altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.
Per dare ordine alle nostre tabelle sono stati introdotti questi attributi opzionali:
- <caption> è l?intestazione, il titolo
- <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
- <tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella