LINGUAGGIO HTML

Titolo: Tabelle

Linguaggio HTML – Tabelle

Introduzione
Le tabelle vengono adoperate nei siti per due ragioni principali. La prima, più ovvia, è quella di
sistemare le informazioni in una tabella. La seconda - meno ovvia - è quella di creare il layout della
pagina servendosi di tabelle nascoste. Alcuni degli aspetti più importanti della progettazione di una
pagina che si possono trattare con l'uso di tabelle sono:
• La divisione della pagina in sezioni separate.
• La creazione di menù.
• La creazione di titoli di pagina.
• L'allineamento di immagini.
• La disposizione del testo in due o più colonne sistemate una accanto all'altra.
L'importanza delle tabelle nella progettazione non deve essere tuttavia sopravvalutata. Ci sono
alcune cose da tenere presenti quando si decide di farne uso. Per esempio, il contenuto della tabella
viene mostrato solo quando l'intera tabella è scaricata. Se le pagine sono molto lunghe, è
consigliabile dividerle in più tabelle in modo che l'utente possa leggerne l'inizio, mentre il resto
della pagina viene caricato.
Attualmente l’uso delle tabelle per impostare il layout di una pagina è fortemente sconsigliato. Le
tabelle dovrebbero essere usate per una sola ragione: raccogliere dati di tipo tabulare. L'uso delle
tabelle impedisce la realizzazione di siti di qualità accessibili, flessibili e funzionali. L’alternativa
alle tabelle è rappresentata dai CSS.

Argomenti trattati
Tag fondamentali per le tabelle
o Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le dimensioni
o Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le dimensioni
o Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella
Proprietà dei bordi della tabella
o Esempio 17: Impostare il colore dei bordi
Allineamenti
o Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto
Altezza delle righe
Raggruppamento di righe/colonne
o Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella
Spazi vuoti tra le celle e tra i bordi delle celle
Sommari e didascalie
o Esempio 20: Vari tipi di didascalie
Gruppi di righe
o Esempio 21: Tabella con righe raggruppate
Elementi deprecati

Tag: table, td, tr, caption, th, thead, tbody, tfoot

1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Tag fondamentali per le tabelle

Una tabella è definita all’interno dei tag <table> e </table>. Le sue dimensioni sono definite con
gli attributi width (larghezza) e height (altezza) e possono essere espresse in pixel o in percentuale
della pagina.

<table width= “500”>

CONTENUTO TABELLA
</table>

In questo esempio di codice la larghezza della tabella viene espressa in pixel (500). Se si sceglie
questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimarrà
invariata, cioè di 500 pixel.
Cosa diversa accade nel momento in cui si sceglie una grandezza in percentuale della pagina:

<table width= “50%”>

CONTENUTO TABELLA
</table>

In questo caso la larghezza della tabella sarà diversa a seconda della risoluzione video di chi ne
esamina il contenuto.
Per esempio chi ha una risoluzione video di 640x480 vedrà un tabella di circa 320 pixel (perchè
abbiamo impostato la tabella di una grandezza pari al 50% della pagina), mentre chi ha una
risoluzione di 800x600 la vedrà di 400 pixel.
Ora diamo uno sguardo al modo in cui deve strutturarsi una tabella. Per fare questo ci serviremo di
alcune immagini.

Come si vede da questa immagine, il tag table genera la tabella mentre con il tag td si definiscono
i campi, cioè le colonne, presenti all'interno di tale tabella. Anche per le colonne è possibile
specificare la larghezza e l’altezza mediante gli stessi attributi di table. Inoltre, quando si crea una
tabella il bordo non è visibile; per visualizzarlo occorre utilizzare l’attributo border e specificare
come suo valore un intero maggiore o uguale a 1, che ne rappresenta lo spessore.
Ecco come il disegno può essere trasformato in codice e quindi in una vera e propria tabella formata
da 1 riga e da 3 colonne.

2
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Esempio 14: Creare una tabella con 1 riga e 3 colonne impostandone le

dimensioni
esempio14.tml
<html>
<head>
<title> Esempio 14 </title>
</head>
<body>
<table border="1" width="300">
<td width="100"> Colonna 1 </td>
<td width="100"> Colonna 2 </td>
<td width="100"> Colonna 3 </td>
</table>
</body>
</html>
La creazione di nuove righe avviene utilizzando il tag tr, come nel seguente esempio, che genera
una tabella con 2 righe e 2 colonne.

Esempio 15: Creare una tabella con 2 riga e 2 colonne impostandone le

dimensioni
esempio15.html
<html>
<head>
<title> Esempio 15 </title>
</head>
<body>
<table border="1" width="300">
<tr>
<td width="150"> Riga 1 Colonna 1 </td>
<td width="150"> Riga 1 Colonna 2 </td>
</tr>
<tr>
<td width="150"> Riga 2 Colonna 1 </td>
<td width="150"> Riga 2 Colonna 2 </td>
</tr>
</table>
</body>
</html>

Impostazione dello sfondo di una tabella

Alcuni attributi dei tag table, tr e td permettono di impostare le caratteristiche di sfondo
rispettivamente di una tabella, di una riga, di una cella. Gli attributi per le celle (td) hanno priorità
rispetto a quelli per le righe (tr). Gli attributi per le righe/celle hanno priorità rispetto agli attributi
impostati per l'intera tabella (table). Gli attributi specificabili sono:
- background = “file immagine”, per impostare un’immagine come sfondo;
- bgcolor= “colore”, per impostare il colore di sfondo;

3
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Esempio 16: Impostare lo sfondo di una tabella, di una riga, di una cella
esempio16.html
<html>
<head>
<title> Esempio 16 </title>
</head>
<body>
<table border="1" width="300" background=”..\Immagini\mare3d.jpeg>
<tr>
<td width="150" bgcolor=”#DDA0DD”>
Riga 1 Colonna 1 Colore plum
</td>
<td width="150" >
Riga 1 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150">
Riga 2 Colonna 2
</td>
</tr>
<tr bgcolor=”#FFD700”>
<td width="150">
Riga 3 Colonna 1 Colore gold
</td>
<td width="150">
Riga 3 Colonna 2 Colore gold
</td>
</tr>

</table>
</body>
</html>

Proprietà dei bordi della tabella

Gli attributi dei tag table, tr e td che permettono di impostare le caratteristiche dei bordi
rispettivamente di una tabella, di una riga, di una cella sono:
- bordercolor = “colore”, per impostare il colore del bordo;
- frame, che a seconda del suo valore modifica la visualizzazione dei bordi; in particolare
void elimina tutti i bordi esterni
above mostra solo il bordo in alto
below mostra solo il bordo in basso
lhs mostra solo il bordo in basso sul lato sinistro
rhs mostra solo il bordo in basso sul lato destro
hsides mostra il bordo solo sui lati orizzontali
vsides mostra il bordo solo sui lati verticali
box mostra il bordo su tutti i lati
border mostra il bordo su tutti i lati come box

4
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Esempio 17: Impostare il colore dei bordi

esempio17.html
<html>
<head>
<title> Esempio 17 </title>
</head>
<body>
<table border="6" width="300" bordercolor=”#FF6347”>
<tr>
<td width="150">
Riga 1 Colonna 1
</td>
<td width="150" >
Riga 1 Colonna 2
</td>
</tr>
</table>
</body>
</html>

Allineamenti
Gli attributi che consentono di allineare una tabella o il contenuto delle righe/celle di una tabella
sono
- align per l’allineamento orizzontale, i cui valori possibili sono left, right, center, justify;
- valign per l’allineamento verticale, i cui possibili valori sono baseline, top, middle,
bottom.

Esempio 18: Impostare l’allineamento di una tabella e del suo contenuto

esempio18.html
<html>
<head>
<title> Esempio 18 </title>
</head>
<body>
<table border="6" width="300" bordercolor=”#FF6347” align=”center”
valign=”middle”>
<tr>
<td width="150" align=”right” valign=”bottom”>
Contenuto allineato a destra orizzontalmente e in
basso verticalmente
</td>
<td width="150" align=”center” valign=”center”>
Contenuto allineato al centro orizzontalmente e
verticalmente
</td>
</tr>
</table>
</body>
</html>

5
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Altezza delle righe

L’attributo height dei tag tr e td consente di impostare l’altezza delle righe/celle. Il suo valore può
essere espresso in pixel o in percentuale.

Raggruppamento di righe/colonne
Il tag td consente di specificare altri due attributi per raggruppare righe o colonne:
- colspan = “n” raggruppa n colonne nella stessa cella;
- rowspan = “n” raggruppa n righe nella stessa cella.

Esempio 19: Impostare lo sfondo di una tabella, di una riga, di una cella
esempio19.html
<html>
<head>
<title> Esempio 19 </title>
</head>
<body>
<table border="1" width="300">
<tr>
<td width="150" colspan=”2”>
Due colonne nella stessa cella
</td>
</tr>
<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150" rowspan=”2”>
Due righe nella stessa cella
</td>
</tr>
<tr>
<td width="150">
Riga 3 Colonna 1
</td>
</tr>

</table>
</body>
</html>

Spazi vuoti tra le celle e tra i bordi delle celle

Esistono altri due attributi del tag table che permettono di specificare la quantità di spazio vuoto da
lasciare tra le celle e tra i bordi delle celle. Nel dettaglio:
cellspacing = “intero positivo” specifica la quantità di spazio
vuoto da lasciare tra le singole celle di dati di una tabella; il
valore di default è 2.

6
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

cellpadding = “intero positivo” specifica la quantità

di spazio vuoto lasciato tra i bordi delle celle di una
tabella e il dato vero e proprio in esse contenuto; il
valore di default è 2.

Sommari, didascalie e intestazioni

Il tag caption consente di assegnare ad ogni tabella una didascalia. caption deve essere inserito
all’interno della tabella, subito dopo il tag table.
<table>
<caption>
DIDASCALIA TABELLA
</caption>
CONTENUTO TABELLA
</table>
Il tag caption può specificare la posizione della didascalia rispetto alla tabella mediante l’attributo
align, che può assumere i valori top, bottom, left, right.
Se si desidera fornire una descrizione più lunga e dettagliata della tabella, a beneficio soprattutto di
quei browser non grafici che fanno uso di programmi vocali o con sistema Braille, si può utilizzare
l’attributo summary del tag table.
<table summary = “descrizione dettagliata”>
CONTENUTO TABELLA
</table>

7
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

Per utilizzare le celle come intestazioni si può utilizzare il tag th al posto di td. Il contenuto delle
celle intestazione è formattato automaticamente in neretto e centrato.

Esempio 20: Vari tipi di didascalie

esempio20.html
<html>
<head>
<title> Esempio 20 </title>
</head>
<body>
<table border="1" width="300" summary="Una tabella che mostra
come si possono utilizzare le didascalie">
<caption align="top">
Tabella con didascalia allineata al top
</caption>
<tr>
<th width="150" >
Intestazione
</th>
<th width="150" >
Intestazione
</th>
</tr>
<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150">
Riga 2 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 3 Colonna 1
</td>
<td width="150">
Riga 3 Colonna 2
</td>
</tr>
</table>
<br>
<table border="1" width="300">
<caption align="left">
Tabella con didascalia allineata a sinistra
</caption>
<tr>
<td width="150" >
Riga 1 Colonna 1
</td>
<td width="150" >
Riga 1 Colonna 2
</td>
</tr>

8
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150">
Riga 2 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 3 Colonna 1
</td>
<td width="150">
Riga 3 Colonna 2
</td>
</tr>
</table>
</body>
</html>

Gruppi di righe
In html vi è la possibilità di distinguere all’interno di una tabella gruppi di righe che formano
l’intestazione (HEAD) della tabella - la sua parte iniziale, il corpo (BODY) della tabella - la sua parte
centrale - e il piede (FOOT) della tabella - la sua parte finale. I tag thead, tbody e tfoot
consentono di raggruppare le righe di una tabella nel modo suddetto.

<table>
<caption>
DIDASCALIA TABELLA
</caption>
<thead>
INTESTAZIONE DELLA TABELLA
</thead>
<tfoot>
PIEDE DELLA TABELLA
</tfoot>
<tbody>
CORPO DELLA TABELLA
</tbody>
</table>

Esempio 21: Tabella con righe raggruppate

esempio21.html
<html>
<head>
<title> Esempio 21 </title>
</head>
<body>
9
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

<table border="1" width="300" summary="Una tabella che mostra

come si possono utilizzare le didascalie">
<caption align="top">
Tabella con didascalia allineata al top
</caption>
<tr>
<th width="150" >
Intestazione
</th>
<th width="150" >
Intestazione
</th>
</tr>
<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150">
Riga 2 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 3 Colonna 1
</td>
<td width="150">
Riga 3 Colonna 2
</td>
</tr>
</table>
<br>
<table border="1" width="300">
<caption align="left">
Tabella con didascalia allineata a sinistra
</caption>
<tr>
<td width="150" >
Riga 1 Colonna 1
</td>
<td width="150" >
Riga 1 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 2 Colonna 1
</td>
<td width="150">
Riga 2 Colonna 2
</td>
</tr>
<tr>
<td width="150">
Riga 3 Colonna 1
</td>
10
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titolo: Tabelle

<td width="150">
Riga 3 Colonna 2
</td>
</tr>
</table>
</body>
</html>

Elementi deprecati (specifica HTML 4.01 del W3C)

Attributi del tag table
bgcolor
align
Attributi dei tag td,th
width
bgcolor
Attributi del tag tr
bgcolor
Attributi del tag caption
align

Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della
licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second
Street, Suite 300, San Francisco, California, 94105, USA.

11
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008