Le tabelle in 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="20" cellspacing="10">
   <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" 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>

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>