Tabelle in HTML

Edoardo Midali

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>