Tabelle in HTML
Le tabelle HTML permettono agli sviluppatori web di organizzare i dati in righe e colonne.
Compagnia | Contatto | Città |
---|---|---|
Ditta A | Mario Rossi | Milano |
Ditta B | Luca Verdi | Firenze |
Ditta C | Anna Neri | Napoli |
Celle della tabella
Ogni cella della tabella è definita con il tag <td>
e </td>
, dove “td” sta per “table data” (dati di tabella).
Tutto ciò che si trova tra <td>
e </td>
costituisce il contenuto della cella della tabella.
<table> <tr> <td>Emilio</td> <td>Luca</td> <td>Leonardo</td> </tr></table>
Note: Una cella di tabella può contenere tutti i tipi di elementi HTML: testo, immagini, liste, link, altre tabelle, ecc.
Righe della tabella
Ogni riga della tabella inizia con il tag <tr>
e termina con il tag </tr>
, dove “tr” sta per “table row” (riga della tabella).
<table> <tr> <td>Emilio</td> <td>Luca</td> <td>Leonardo</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr></table>
È possibile avere quante righe si desidera in una tabella; assicurarsi solo che il numero di celle sia lo stesso in ogni riga.
Intestazioni di tabella
A volte si desidera che le celle siano celle di intestazione della tabella. In questi casi utilizzare il tag <th>
invece del tag <td>
, dove “th” sta per “table header” (intestazione di tabella).
<table> <tr> <th>Persona 1</th> <th>Persona 2</th> <th>Persona 3</th> </tr> <tr> <td>Emilio</td> <td>Luca</td> <td>Leonardo</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr></table>
Per impostazione predefinita, il testo negli elementi <th>
è in grassetto e centrato, ma è possibile cambiarlo con CSS.
Intestazioni di tabella verticali
Per utilizzare la prima colonna come intestazioni di tabella, definire il primo elemento di ogni riga come elemento <th>
:
<table> <tr> <th>Nome</th> <td>Luca</td> <td>Anna</td> </tr> <tr> <th>Cognome</th> <td>Rossi</td> <td>Neri</td> </tr> <tr> <th>Età</th> <td>24</td> <td>60</td> </tr></table>
Didascalia della tabella
È possibile aggiungere una didascalia che funge da intestazione per l’intera tabella.
Per aggiungere una didascalia a una tabella, utilizzare il tag <caption>
:
<table style="width:100%"> <caption> Risparmi mensili </caption> <tr> <th>Mese</th> <th>Risparmio</th> </tr> <tr> <td>Gennaio</td> <td>250 €</td> </tr> <tr> <td>Febbraio</td> <td>60 €</td> </tr></table>
Tabella HTML - Colspan
Le tabelle HTML possono avere celle che si estendono su più righe e/o colonne. Per far sì che una cella si estenda su più colonne, utilizzare l’attributo colspan:
<table> <tr> <th colspan="2">Nome</th> <th>Età</th> </tr> <tr> <td>Luca</td> <td>Rossi</td> <td>24</td> </tr> <tr> <td>Anna</td> <td>Neri</td> <td>60</td> </tr></table>
Tabella HTML - Rowspan
Per far sì che una cella si estenda su più righe, utilizzare l’attributo rowspan:
<table> <tr> <th>Nome</th> <td>Luca</td> </tr> <tr> <th rowspan="2">Telefono</th> <td>389-1234</td> </tr> <tr> <td>392-8745</td> </tr></table>