# HTML/Tabelle

HTML
Copertina Tutti i moduli · Sviluppo
* IntroduzioneHTML/Introduzione
* FondamentiHTML/Fondamenti
* IntestazioneHTML/Intestazione
* Formattare il testoHTML/Formattare il testo
* Organizzare il testoHTML/Organizzare il testo
* LinksHTML/Links
* ImmaginiHTML/Immagini
* TabelleHTML/Tabelle
* SfondoHTML/Sfondo
* MultimediaHTML/Multimedia
* ModuliHTML/Moduli
* FramesHTML/Frames
* EntitàHTML/Entità
* Includere altri linguaggiHTML/Includere altri linguaggi
* VerificatoriHTML/Verificatori
* Evoluzione del markupHTML/Evoluzione del markup
* EserciziHTML/Esercizi
Modifica il sommario
Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>. È tra questi due tag che si devono inserire colonne e righe, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). È importante notare come è sempre una riga ad includere una colonna: cioè il tag <td> è sempre incluso in un tag <tr>.
Se si vuole indicare al browser di creare una cella che faccia da intestazione ad una colonna (solitamente renderizzata con il contenuto in neretto e centrato) si può usare il tag <th> (Table Header), ideato appositamente per questo tipo di funzione.
Anche se essi sono attualmente deprecati in quanto contengono informazioni di stile, è possibile aggiungere a colonne e righe attributi quali align (alignment) e valign (Vertical alignment); per modificare la dimensione semantica di una colonna si utilizza l'attributo colspan (Column span), mentre rowspan è l'equivalente per le righe.
* align: allinea il testo della cella a destra (right), sinistra (left) e centrato (center).
* valign: allinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom), e in mezzo (middle)
* colspan: quante colonne pesa una singola <td>
* rowspan: quante righe pesa una singola <td>
Le celle e le colonne supportano anche gli attributi height e width.
Vi è un tag interessante che è <caption> che permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align pertanto si posizionerà o sopra o sotto la tabella secondo il valore specificato in tale attributo.

### Attributi delle tabelle

| Attributo | Significato |
| border | Stabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente). |
| width | Stabilisce la larghezza della tabella |
| height | Stabilisce la lunghezza della tabella |
| cellspacing | Stabilisce la spaziatura tra le celle |
| cellpadding | Stabilisce la spaziatura tra il testo e la cella che lo contiene |
Esempio di tabella:
Il risultato sarà:
Questa è una tabella di esempio :
| Intestazione 1 | Intestazione 2 |
| Cella 1 colonna 1 testo centrato | Cella 1 colonna 2 allineata sopra |
| Cella 2 colonna 1 | Cella 2 colonna 2 |

## Tabelle preformattate

È possibile creare delle tabelle anche attraverso spazi e senza l'ausilio del tag <table>: ci si può servire infatti del tag <pre> che, come abbiamo detto in precedenza, dirà all'interprete di visualizzare il testo così com'è stato scritto all'interno del documento HTML, pertanto con i medesimi spazi e a capo. L'inconveniente è che il testo all'interno del tag <pre> verrà visualizzato monospaziato, scelta esteticamente non ottimale, e sarà inoltre meno gestibile in termini di modifiche successive. Ecco un esempio di tabella preformattata:
Il risultato sarà: