Le tabelle in HTML

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 ... ... ...