HTML Tabelle

Le tabelle HTML permettono agli sviluppatori web di rappresentare i dati come testi, immagini, link in righe e colonne.

Le tabelle HTML vengono create con il tag <table> in cui il tag <tr> consente di aggiungere righe ed il tag <td> consente di creare campi.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

In cui border è un attributo del tag <table> ed è usato per inserire un bordo in tutta la tabella. Se non vuoi far mostrare il bordo, basterà impostare border="0".

Intestazioni Tabella

Le intestazioni di una tabella possono essere impostate tramite il tag <th>. Questo tag dev' essere inserito al posto del tag <td>, che serve a rappresentare una cella. In genere le intestazioni si inseriscono nella prima riga di una tabella, ma è possibile inserirle in qualsiasi altra riga.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

Gli Attributi Cellpadding e Cellspacing

Ci sono due attributi chiamati cellpadding e cellspacing che permettono di impostare uno spazio intorno alle celle di una tabella. L' attributo cellspacing definisce lo spazio fra le celle, mentre cellpadding rappresenta la distanza fra il bordo della cella ed il suo contenuto.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

Gli Attributi Colspan e Rowspan

Per unire due o più colonne si può utilizzare l' attributo colspan. Allo stesso modo può essere utilizzato l' attributo rowspan per unire due o più righe.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Sfondi Tabelle

Lo sfondo in una tabella può essere inserito in due modi:

Attributo bgcolor - Si può impostare il colore per tutta la tabella o sono in una cella.
Attributo background - Si può impostare un immagine di sfondo per tutta la tabella o sono in una cella.

Tramite l' attributo bordercolor è possibile impostare un colore per il bordo.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

A seguire un esempio di utilizzo dell' attributo background. In questo caso useremo un immagine presente nella cartella /images.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Produrrà il seguente risultato. L' immagine di sfondo non viene applicata all' intestazione.

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Altezza e Larghezza Tabella

Si può impostare la larghezza e l' altezza di una tabella tramite gli attributi width e height. Possono essere indicati in pixel o in valori percentuali.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Etichetta Tabella

Il tag caption fornisce un titolo o una spiegazione per la tabella e viene mostrato appena sopra la tabella. Questo tag è stato deprecato nelle nuove versioni di HTML/XHTML.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

This is the caption
row 1, column 1	row 1, columnn 2
row 2, column 1	row 2, columnn 2

Intestazione, Corpo, e Piè di Pagina

Le tabelle possono essere divise in tre porzioni: una testata (header), un corpo (body), ed un piè di pagina (foot). L' head ed il foot hanno un funzionamento simile all' intestazione ed il piè di pagina di un documento word, ossia si ripetono in ogni pagina, mentre il contenuto della tabella cambia.

I tre elementi che separano head, body, e foot in una tabella sono:

<thead> - per creare un intestazione della tabella.
<tbody> - per indicare il corpo della tabella.
<tfoot> - per creare un piè di pagina per la tabella.

Una tabella può contenere diversi elementi <tbody> per indicare diverse pagine o gruppi di dati. È consigliato inserire i tag <thead> e <tfoot> prima del tag <tbody>

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Produrrà il seguente risultato:

This is the head of the table
This is the foot of the table
Cell 1	Cell 2	Cell 3	Cell 4

Tabelle Innestate

Si può inserire una tabella all' interno di un' altra. Oltre che le tabelle puoi utilizzare tutti i tag interni di una tabella come ad esempio <td>.

Esempio

A seguire un esempio in cui vi è una tabella all' interno di un altra.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>Name</th>
   <th>Salary</th>
   </tr>
   <tr>
   <td>Ramesh Raman</td>
   <td>5000</td>
   </tr>
   <tr>
   <td>Shabbir Hussein</td>
   <td>7000</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>

Produrrà il seguente risultato:

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000