W3 - progettazione e realizzazione di ipertesti per siti Web

6. Tabelle

La tabella è uno dei più diretti, sintetici ed efficienti strumenti per presentare determinati tipi di dati. Le tabelle sono entrate ufficialmente nel linguaggio HTML a partire dalla versione 3.0.

In questo capitolo si introducono tutti i tag che possono essere utilizzati per creare tabelle.

Cos'è una tabella

Una tabella è formata da righe (elementi orizzontali) e colonne (elementi verticali). L'intersezione di una riga con una colonna si chiama cella. Ogni tabella deve avere almeno una riga e almeno una cella. Tutti i dati della tabella sono contenuti nelle sue celle, ad eccezione della didascalia (commento). Le dimensioni di una tabella sono date dal numero di righe e dal numero delle colonne. Quasi tutto quello che può essere inserito in un documento HTML può essere inserito in una cella.

I tag per creare una tabella sono i seguenti:

<table> ... </table>: racchiude la tabella.
<th> ... </th>: definisce le intestazioni della tabella.
<tr> ... </tr>: definisce le righe della tabella.
<td> ... </td>: racchiude i dati della tabella.
<caption> ... </caption> : permette di inserire la didascalia a una tabella.
<tbody> ... </tbody>: identifica la parte scorrevole.
<tfoot> ... </tfoot>: definisce ciò che deve apparire dopo la parte scorrevole della tabella.
<thead> ... </thead>: definisce ciò che appare prima della parte scorrevole.
<colgroup> ... </colgroup>: permette di raggruppare una serie di colonne.
<col>: permette di controllare l'aspetto di una o più colonne della tabella.

Come creare una tabella

Analizziamo ora i singoli tag e gli attributi che possono essere specificati. Tutti i tag di seguito descritti rispettano lo standard HTML 4.01 della W3C.

<table> </table>

Racchiude le righe, le colonne e la didascalia di una tabella. Gli attributi che possono essere specificati sono: align, bgcolor, border, cellspacing, cellpadding, class, frame, dir, id, lang, rules, style, summary, title, width. Analizziamo i singoli attributi:

Attributo	Funzione
align deprecated	specifica il margine lungo il quale allineare la tabella. I valori che può assumere sono: left, center, right.
bgcolor	permette di cambiare il colore dello sfondo del testo all'interno di una tabella. Il nome del colore può essere specificato con il nome standard o con il corrispondente numero esadecimale. Es: bgcolor="white" o bgcolor="#FFFFFF"
border	tale attributo crea una linea attorno alla tabella e alle singole celle. Si deve indicare lo spessore del bordo, ciò viene fatto nel seguente modo: border="2", dove 2 indica lo spessore in pixel.
frame	specifica quali lati del bordo della tabella devono essere visibili. I possibili valori che si possono assegnare a tale attributo sono: box o border, void, above, below, hsides, vsides, lhs, rhs. Naturalmente l'attributo border deve avere valore diverso da "0".
rules	serve per ottenere delle linee continue attorno alla tabella, ma non all'interno o fra le righe o le colonne della tabella. I valori che può assumere sono: none(nessuna linea), all(tutte), rows(solo righe), cols(solo colonne).
cellspacing	consente di impostare la distanza tra le celle e anche fra la cornice della tabella e le celle esterne. I valori assegnabili sono in pixel.
cellpadding	consente di impostare la distanza fra i dati di una cella e la cornice della cella. I valori assegnabili sono in pixel, il valore standard è 1 pixel.
class	serve per assegnare un nome di una classe all'elemento, la tabella.
id	serve per assegnare un nome all'elemento, nel nostro caso alla tabella. Tale nome deve essere univoco all'interno del documento.
dir	specifica la direzione del testo. Può assumere tre valori: LTR (Left-to-right text), RTL (Right-to-left text).
lang	serve per definire la lingua. I possibili valori sono del tipo: en, it, fr,...
style	è stato introdotto per sostituire il modo di definire gli attributi di formattazione. A questo attributo sono associate diverse proprietà. La sintassi generale è style="proprietà1 : valore1; proprietà2 : valore2;..." Esempi di proprietà che tale attributo può assumere sono: float per allineare la tabella, padding che è equivalente cellpadding, border-color per modificare il colore ai bordi della tabella.
summary	tale attributo è stato ideato per gli utenti che si affidano alle prestazioni audio di un pagina Web. Il suo effetto è fornire una breve descrizione della tabella che può essere ascoltata, senza essere visualizzata sullo schermo.
width	tale attributo è utilizzato per modificare la larghezza della tabella. Non è possibile ridurre la larghezza della tabella a un valore inferiore al minimo necessario per presentare le informazioni, è possibile aumentare la larghezza per migliorare la leggibilità. La larghezza può essere espressa in due modi, in pixel(width="200"), o come percentuale della larghezza dello schermo(width="15%"). Questo secondo modo è preferibile in quanto dà una maggior indipendenza dalla risoluzione del monitor.

Il codice per creare una semplice tabella è il seguente:

Codice HTML

Resa del browser

<table class="bordo" border="1" summary="Esempio di semplice tabella">
<caption>Esempio di tabella</caption>
  <thead>
    <tr>
      <td>n.</td>
      <td>Prodotti</td>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Caffè</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Tè</td>
  </tr>
  </tbody>
</table>

Esempio di tabella
n.	Prodotti
1	Caffè
2	Tè

<tr> Righe della tabella</tr>

Definisce le righe della tabella. Gli attributi principali che possono essere specificati sono: id, class, lang, title, dir, bgcolor, align, char, charoff, valign. Analizziamo i singoli attributi, naturalmente tralasciando quelli già visti in precedenza.

Attributo	Funzione
char	consente di allineare i testi rispetto a un determinato carattere, come la virgola o il punto. Il browser usa come valore di default il simbolo di separazione delle cifre decimali della lingua correntemente impostata dall'attributo lang(per l'inglese è il punto, per l'italiano è la virgola).
charoff	consente di spostare l'allineamento dei testi di un certo numero di caratteri. Il valore che assume è un numero intero.
valign	questo attributo indica la posizione verticale che devono occupare i dati all'interno delle celle di un riga. I valori che può assumere sono: center(centrato), top(in alto), bottom(in basso), baseline(allinea i dati con la parte inferiore della prima riga di testo in qualsiasi altra cella della riga).

<td> </td> e <th> </th>

I tag <td> </td> e <th> </th> racchiudono rispettivamente i dati e le intestazioni di una tabella. <td> sta per Table Data mentre <th> sta per Table Header. Gli attributi principali che si possono specificare sono: abbr, align, axis, scope, rowspan, colspan, headers, height, width.

Attributo	Funzione
abbr	consente di associare delle abbreviazioni ai contenuti delle celle. Il W3C prevede che queste abbreviazioni saranno utilizzate nelle pagine Web audio, per le quali appositi sintentizzatori vocali pronuncieranno le sigle abbreviate prima che sia visualizzato il contenuto delle celle. Attualmente nessun browser supporta questo attributo.
axis	è utilizzato per includere una cella in una tabella di categorie concettuali che possono essere considerate come assi in uno spazio a n dimensioni.Attualmente nessun browser supporta questo attributo.
headers	specifica l'elenco delle intestazioni delle colonne di una tabella. Il W3C prevede che anche questo attributo sarà utilizzato nelle pagine Web audio. Attualmente nessun browser supporta questo attributo.
scope	è stato introdotto come alternativa a headers quando si progettano delle tabelle semplici. Attualmente nessun browser supporta questo attributo.
rowspan	serve per creare una cella che occupa due o più righe. Il valore assegnato a tale attributo indica il numero di righe che dovranno essere occupate da una cella.
colspan	serve per creare una cella che occupa due o più colonne. Il valore assegnato a tale attributo indica il numero di colonne che dovranno essere occupate da una cella.
height deprecated	tale attributo è utilizzato per modificare l'altezza della colonna. Non è possibile ridurre l'altezza della colonna a un valore inferiore al minimo necessario per presentare le informazioni. L'altezza può essere espressa in due modi, in pixel(width="200"), o come percentuale della larghezza della tabella(width="15%").
width deprecated	ha le stesse funzionalità dell'attributo height, esso però agisce sulla larghezza.

Vediamo il codice per creare una tabella utilizzando tali tag e i loro attributi:

Codice HTML

Resa del browser

<table class="bordo" border="1" summary="Esempio di tabella">
  <thead>
    <tr>
      <th>n.</th>
      <th>Prodotti</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Caffè</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Tè</td>
  </tr>
  </tbody>
</table>

n.	Prodotti
1	Caffè
2	Tè

<table class="bordo" border="1" summary="Esempio di tabella">
  <thead>
    <tr>
      <th colspan="2">Prodotti</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Caffè</td>
    <td>Tè</td>
  </tr>
  </tbody>
</table>

Prodotti
Caffè	Tè

<table class="bordo" border="1" summary="Esempio di tabella">
    <tr>
      <th rowspan="2" width="150">Prodotti</th>
      <td width="50">Caffè</td>
    </tr>
    <tr>
      <td width="50">Tè</td>
    </tr>
</table>

Prodotti	Caffè
Prodotti	Tè

Scorrimento delle tabelle

Per risolvere i problemi di visualizzazione delle tabelle, la specifica del HTML 4.0 ha introdotto i seguenti tag: <thead>, <tbody>, <tfoot>. Questi tag permettono di tenere fisse parti della tabella, <thead> e <tfoot>, e di poter scorrere le altre.

Attualmente però nessun browser supporta questi tag.

<thead>Header di una tabella</thead>

Questo tag permette di definire l'header della tabella. Definisce un'intestazione fissa, è questa caratteristica che lo distingue da <th>.Deve essere specificato prima del corpo della tabella( <tbody>).

<tfoot>Footer di una tabella</tfoot>

Questo tag definisce il footer della tabella, definisce una serie di etichette fisse che appaiono in fono alla tabelle. Deve essere specificato prima del corpo della tabella( <tbody>).

<tbody>Body di una tabella</tbody>

Il corpo della tabella viene definito con tale tag. Serve a definire quali righe della tabella dovranno scorrere se la tabella è più dell'area disponibile nella finestra del browser.

Vediamo il codice per creare una tabella utilizzando <thead>, <tbody>, <tfoot> .

Codice HTML

Resa del browser

<table class="bordo" border="1" summary="Esempio di tabella">
<caption>
         Visibile con : Mozilla 0.9.9 - Internet Explorer  </caption>
  <thead>
    <tr>
      <th>n.</th>
      <th>Prodotti</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>n.</th>
      <th>Prodotti</th>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>1</td>
    <td>Caffè</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Tè</td>
  </tr>
  </tbody>
</table>

Visibile con: Mozilla 0.9.9 - Internet Explorer
n.	Prodotti
n.	Prodotti
1	Caffè
2	Tè

Esercizi

1. Qual è il metodo consigliato per definire la larghezza di una tabella?

2. Quali sono i tag necessari per costruire una tabella?

3. Create una pagina Web che contenga una tabella con i dati statistici relativi ai vostri atleti preferiti. Inserite le immagini di tali atleti nella tabella.

4. Create una tabella per illustrare l'effetto dei quattro valori possibili dell'attributo valign sui contenuti della stessa. Impostate almeno due larghezze diverse per le colonne.

5. Create una tabella in cui una riga è condivisa da più colonne e una tabella in cui una colonna è condivisa da più righe. In una cella a vostra scelta inserite un'immagine di dimensione massima, cioè della stessa dimensione della cella.(Naturalmente non usare le dimensioni in pixel).`