Le tabelle Html

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Html

La formattazione di una pagina Html trae il suo massimo beneficio tramite l'utilizzo delle tabelle, un insieme di celle sulla falsa riga del noto programma Microsoft Excel, questa tecnica permette di creare template anche piuttosto complessi.

Per non girare intorno alle parole facciamoci subito un'idea di cosa sia una tabella, copiate dogmaticamente questo codice all'interno di una pagina Html:

<table align="center" width="300" border="1">
   <tr>
      <td align="center" width="150">Cella # 1</td>
      <td align="center" width="150">Cella # 2</td>
   </tr>
   <tr>
      <td align="center" width="150">Cella # 3</td>
      <td align="center" width="150">Cella # 4</td>
   </tr>
</table>
Questo è quanto ne risulterà:

Cella # 1 Cella # 2
Cella # 3 Cella # 4

Una tabella viene generata mediante l'utilizzo di una serie di Tag, il principale dei quali è <table> con relativa chiusura finale </table>, gli altri sono Tag "accessori", nel senso che nulla significherebbero se non inclusi in una serie di istruzioni <table> e </table>, si tratta dei Tag <tr> e </tr>, e <td> che ha come chiusura opzionale (ma consigliata) </td>.

Iniziamo ad esaminare <table>, i suoi possibili attributi sono:

bgcolor - stabilisce il colore di sfondo della tabella, per default è trasparente, si adatta cioè al colore di sfondo della pagina
width - stabilisce la larghezza della tabella, è possibile esprimerla sia in con numeri interi che in percentuale (%)
height - stabilisce l'altezza, poco utilizzato in quanto la tabella sarà alta tot in base al contenuto
align - permette di allineare la tabella al centro, a sinistra (per default) oppure a destra rispetto alla finestra del browser
border - stabilisce il bordo della tabella, per default è zero, è quindi, in caso, inutile stabilirlo
bordercolor - stabilisce il colore del bordo della tabella, per default è grigio
cellpadding - stabilisce la distanza tra i lati interni di una cella e gli elementi Html contenuti in essa
cellspacing - stabilisce la distanza tra le celle

Abbiamo già incontrato i primi sei attributi elencati già in precedenza nel corso del manuale, essendo essi adattabili ad altri elementi Html, mentre gli ultimi due, cellpadding e cellspacing, sono proprietari delle tabelle e si utilizzano esclusivamente all'interno del Tag <table>, proviamo a comprenderne meglio il significato aggiungendoli al codice precedente assegnandogli valori differenti a seconda dei casi:
<table align="center" width="300" border="1" cellpadding="30" cellspacing="20">
   <tr>
      <td align="center" width="150">Cella # 1</td>
      <td align="center" width="150">Cella # 2</td>
   </tr>
   <tr>
      <td align="center" width="150">Cella # 3</td>
      <td align="center" width="150">Cella # 4</td>
   </tr>
</table>
Ecco il risultato:

Cella # 1 Cella # 2
Cella # 3 Cella # 4

Potremmo invece impostare a zero (0) entrambi i valori ottenendo un effetto totalmente diverso dal precedente ed altrettanto utile a seconda delle occasioni:

Cella # 1 Cella # 2
Cella # 3 Cella # 4

L'utilizzo delle tabelle nel Web è davvero massiccio, basta consultare il codice sorgente di questa pagina per farsi un'idea di quante occorrenze dei Tag <table>, <tr> e <td> sono prensenti, consiglio dunque di prestare particolare attenzione a questa lezione, lo scopo sarà, oltre a quello di comprendere la struttura e la tecnica di creazione di una tabella, anche quello di imparare ad utilizzarle al meglio per la costruzione di pagine anche di una certa complessità.

Il codice presentato in questi esempi, già nella sua formattazione mostra una chiara gerarchia che intercorre tra i Tag utilizzati, possiamo dunque stabilire che ogni <tr> permette di definire una serie di celle <td> in orizzontale, per impostare una serie di celle in verticale sarà dunque necessario assegnare una singole cella <td> per ogni coppia di istruzioni <tr> e </tr>.

Impostiamo una tabella con tre celle in orizzontale, utilizziamo dunque questo codice:
<table align="center" border="1">
   <tr>
      <td>Cella # 1</td>
      <td>Cella # 2</td>
      <td>Cella # 3</td>
   </tr>
</table>
il risultato

Cella # 1 Cella # 2 Cella # 3

mentre per impostarle in verticale il codice sarà
<table align="center" border="1">
   <tr>
      <td>Cella # 1</td>
   </tr>
   <tr>
      <td>Cella # 2</td>
   </tr>
   <tr>
      <td>Cella # 3</td>
   </tr>
</table>
il risultato

Cella # 1
Cella # 2
Cella # 3

Il Tag <tr> non è dotato di particolari attributi, supponiamo di avere una tabella, magari di una certa complessità, che vogliamo colorare impostando il colore cella per cella per differenziare parti dedicate ad un argomento piuttosto che ad un altro, quindi non agiremo direttamente sul colore di tutta la tabella, bensì su singola cella, ma ipotizziamo di aver anche bisogno che una serie di celle vicine siano di uno stesso colore, per cui il codice risulterebbe
<table align="center" border="1">
   <tr>
      <td bgcolor="#FF0000">Cella # 1</td>
      <td bgcolor="#FF0000">Cella # 2</td>
      <td bgcolor="#FF0000">Cella # 3</td>
   </tr>
</table>
è dunque semplice intuire come possa tornare più comodo "colorare" direttamente il <tr>
<table align="center" border="1">
   <tr bgcolor="#FF0000">
      <td>Cella # 1</td>
      <td>Cella # 2</td>
      <td>Cella # 3</td>
   </tr>
</table>
Il fulcro della gestione di una tabella è senza dubbio l'elemento "cella" <td> che presenta gli stessi attributi del Tag <table> (ad eccezione di cellpadding e cellspacing), in più ci sono quattro altri attributi, tre dei quali proprietari di questo Tag, esaminiamoli:

valign - vertical align - serve ad impostare l'allineamento verticale del contenuto di una cella

Ipotizziamo di avere tre celle in orizzontale e che il contenuto di una di queste celle sia maggiore (in altezza) del contenuto delle altre, il contenuto di queste si posizionerebbe a metà cella in verticale, effetto che può risultare tremendamente scomodo ed antiestetico in taluni casi, ad esempio in un sito impostato integralmente in tabelle, vediamo un esempio:
<table align="center" border="1">
   <tr>
      <td>Cella # 1<br>...<br>...<br>...</td>
      <td>Cella # 2</td>
      <td>Cella # 3</td>
   </tr>
</table>
il risultato

Cella # 1
...
...
...
Cella # 2 Cella # 3

Vediamo dunque come impostare il contenuto di una cella sempre al suo inizio in senso verticale
<table align="center" border="1">
   <tr>
      <td valign="top">Cella # 1<br>...<br>...<br>...</td>
      <td valign="top">Cella # 2</td>
      <td valign="top">Cella # 3</td>
   </tr>
</table>
il risultato

Cella # 1
...
...
...
Cella # 2 Cella # 3

I possibili valori di valign sono middle (centrato, di default), top (inizio cella) e bottom (fine cella).

Gli altri tre attributi del Tag <td> accennati in precedenza sono:

nowrap - impedisce al contenuto di una cella di andare a capo

<td nowrap>Questo testo non andrà a capo</td>
colspan - unisce due o più celle in orizzontale
rowspan - unisce due o più celle in verticale.

Per sua natura una cella DEVE formare un quadrilatero, non si può pensare di creare quindi una tabella composta da un numero dispari di celle, o meglio, con ad esempio una sola cella nella parte superiore con due celle in quella inferiore... tutte e tre della stessa grandezza! il codice proposto di sotto contiene dunque un ERRORE:
<table align="center" border="1">
   <tr>
      <td>Cella # 1</td>
   </tr>
   <tr>
      <td>Cella # 2</td>
      <td>Cella # 3</td>
   </tr>
</table>
questo è quanto ne risulterebbe

Cella # 1
Cella # 2 Cella # 3

Viene comunque generato un quadrilatero con un pezzo erroneamente mancante, è necessario creare una struttura con un numero pari di celle... ma allora non è possibile in nessun caso avere una tabella con un numero dispari di celle?

Si, è possibile.

Ci torna in aiuto l'attributo colspan che viene incluso nella prima cella, il suo impiego è atto a creare virtualmente due celle e ad unirle, vediamo il codice corretto con il relativo risultato finale:
<table align="center" border="1">
   <tr>
      <td colspan="2">Cella # 1</td>
   </tr>
   <tr>
      <td>Cella # 2</td>
      <td>Cella # 3</td>
   </tr>
</table>
Cella # 1
Cella # 2 Cella # 3

Il valore numerico assegnato a colspan è identificativo per il numero di celle sottostanti, se fossero state cinque celle sotto la cella "unica", il suo valore sarebbe stato colspan="5"

Cella unica (colspan="5")
Cella # 1 Cella # 2 Cella # 3 Cella # 4 Cella # 5

Allo stesso modo si comporta rowspan, per però unire celle in verticale, vediamo un esempio:

<table align="center" border="1"> <tr> <td rowspan="2">Cella # 1</td> <td>Cella # 2</td> </tr> <tr> <td>Cella # 3</td> </tr> </table>

il risultato

Cella # 1 Cella # 2
Cella # 3

Il meccanismo in questo caso è leggermente più contorto e non immediato come il precedente, il mio consiglio è quello di effettuare centinaia prove, specialmente con quest'ultimo metodo di formattazione delle tabelle che, a dire il vero, è il meno utilizzato.

Formattazione di un'intera pagina in tabelle

L'utilizzo delle tabelle, come predetto, è molto diffuso tra i designer per la realizzazione delle strutture delle pagine, in questo scorcio della lezione riprendiamo in considerazione uno degli esempi finora esaminati ed immaginiamolo come struttura di una pagina:

*LOGO*
MENU

Link
Link
Link
Link
Link
Corpo della pagina, quest'area sarà dedicata agli effettivi contenuti della pagina, è stato utilizzato uno dei codici già presentati ed è stato lievemente ritoccato...

... vi lascio come esercizio il compito di ricostruirlo e migliorarlo fino a raggiungere gli effetti desiderati!

Ultimi ritocchi...

Esistono altri elementi facenti parte della famiglia delle tabelle Html, esaminiamoli:

<tbody> - definisce il corpo di una tabella, ad esempio

<table align="center" border="1">
   <tbody>
      <tr>
         <td>Cella # 1</td>
         <td>Cella # 2</td>
         <td>Cella # 3</td>
      </tr>
   </tbody>
</table>
<thead> - si comporta come il <tr>, utilizzato per definire aree di intestazione
<th> - si comporta come il <td>, utilizzato per definire le singole intestazioni di una cella evidenziando il testo.

Un esempio:
<table align="center" border="1">
   <thead>
      <th>Intestazione # 1</th>
      <th>Intestazione # 2</th>
   </thead>
   <tr>
      <td>Cella # 1 ... ... ...</td>
      <td>Cella # 2 ... ... ...</td>
   </tr>
</table>
il risultato

Intestazione # 1 Intestazione # 2
Cella # 1 ... ... ... Cella # 2 ... ... ...

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (32.978)

:: Formattazione del testo in Html (25.041)

:: Referenze dei Tag Html (18.963)

:: Creare tabelle con i bordi curvi (17.800)

:: Guida XHTML (16.237)

:: Struttura di un file Html (14.800)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.524)

:: Inserire le immagini in una pagina Html (10.901)

:: Sovrapporre un'immagine ad un layer senza posizionamento assoluto (10.705)

:: Ritorno a capo nei button di form Html (9.527)

IN EVIDENZA
DOWNLOAD