Sfruttare l'innesto di una tabella nell'altra per creare layout molto articolati
Nei siti graficamente più ricchi capita spesso di non riuscire a ricostruire il layout utilizzando tabelle consecutive anche complesse. L'unica soluzione diventa quella di incapsulare una tabella nell'altra al fine di ottenere la massima flessibilità di progettazione. Vediamo come comporre una delle pagine contenute in questo corso.
Cominciamo dal realizzare la zona numero 1 nel nostro layout di esempio, quella che contiene il logo e la navigazione globale del nostro CD:

Fase 1: impostiamo la tabella globale
definiamo una tabella larga quanto l'intera pagina che pensiamo tarata per un video con una risoluzione di 800 x 600 pixel. Azzeriamo i bordi e gli spazi tra le celle impostando gli attributi border="0" cellspacing="0" cellpadding="0":
<table width="762" border="0" cellspacing="0" cellpadding="0">
</table>
Fase 2: inseriamo il logo
aggiungiamo la prima riga e la prima cella di contenuto alla nostra tabella globale e utilizziamola per incapsulare una tabella nidificata che conterrà il logo e gli altri elementi della banda orizzontale superiore:
<table width="762" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
!-- Qui inizia la prima tabella nidificata che contiene la barra orizzontale del logo -->
<table width="762" border="0" cellspacing="0" cellpadding="0" height="72" bgcolor="#034da2">
<tr>
<td height="55" colspan="2" align="left" valign="top"><a href="/index.html"><img src="../../../zzz/pcopenlogo.gif" width="168" height="55" border="0"></a></td>
<td width="92"> </td>
<td width="480"> </td>
<td width="20"> </td>
</tr>
notiamo che la cella che contiene la nostra tabella nidificata è stata espansa su tre colonne (colspan="3") perché già sappiamo dal nostro progetto grafico che le righe successive della tabella globale conterranno tre celle ciascuna. La tabella nidificata è larga quanto la tabella primaria, inoltre abbiamo specificato un'altezza in pixel perché già sappiamo lo spazio che vogliamo riservare alla banda orizzontale del logo. Infine abbiamo aggiunto con colore di sfondo (blu) con l'attributo: bgcolor="#034da2". Notiamo che la prima cella della nuova tabella contiene il logo e le altre celle attribuiscono la divisione degli spazi in colonne che ci servirà per piazzare gli elementi successivi nella barra orizzontale.

Fase 3: aggiungiamo la seconda tabella nidificata
creiamo una seconda riga nella tabella che abbiamo appena inserito e aggiungiamo quattro celle di cui la terza contiene la seconda tabella nidificata:
<table width="762" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<!-- Qui inizia la prima tabella nidificata che contiene la barra orizzontale del logo -->
<table width="762" border="0" cellspacing="0" cellpadding="0" height="72" bgcolor="#034da2">
<tr>
<td height="55" colspan="2" align="left" valign="top"><a href="/index.html"><img src="../../../zzz/pcopenlogo.gif" width="168" height="55" border="0"></a></td>
<td width="92"> </td>
<td width="480"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="61" height="17" bgcolor="#ed1c24"> </td>
<td height="17" colspan="2" align="left" valign="middle" class="altri"> gennaio 2003</td>
<td height="17" width="480" valign="middle" align="right">
<!-- Qui inizia la seconda tabella nidificata che contiene la navigazione globale -->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr align="right">
<td width="200"></td>
<td><a href="/Index.html" class="nav_testata">HOME</a></td>
<td class="altri"> | </td>
<td><a href="/indice/pcodescsez.html" class="nav_testata">INDICE</a></td>
<td class="altri"> | </td>
<td><a href="/corsi/corsi_home.html" class="nav_testata">CORSI</a></td>
<td class="altri"> | </td>
<td><a href="/dizionario/descsez.htm" class="nav_testata">DIZIONARIO</a></td>
<td class="altri"> | </td>
<td><a href="http://www.abbonamenti.agepe.it" class="nav_testata">ABBONAMENTI</a></td>
<td class="altri"> | </td>
<td><a href="http://www.pcopen.it" class="nav_testata">SITO</a></td>
<td class="altri"> | </td>
<td><a href="/guida/Index.html" class="nav_testata">HELP</a></td>
</tr>
</table>
<!-- Qui termina la seconda tabella nidificata -->
vediamo che la prima cella della seconda riga della tabella contenente il logo ha un colore di sfondo rosso per adattarsi alla sezione del logo che contiene la parola PC, segue la dicitura "gennaio 2003" e quindi la seconda tabella che contiene a sua volta una riga con tutte le celle necessarie per gli elementi di navigazione globale: Home, indice, eccetera, ciascuno collocato in una propria cella che li tiene al loro posto.

Fase 4: chiudiamo la barra del logo
la nostra tabella del logo è completa e può essere chiusa ponendo fine anche la prima cella e la prima riga della tabella globale in cui è incapsulata. Aggiungiamo a questo punto una seconda riga nella tabella globale che abbia unicamente lo scopo di staccare la zona del logo dal resto della pagina e fissare le dimensioni delle colonne che seguiranno:
<!-- Qui termina la seconda tabella nidificata -->
</td>
<td height="17" width="20"> </td>
</tr> <tr>
<td height="1"></td>
<td width="107"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- Qui termina la prima tabella nidificata -->
</td>
</tr>
<!-- Qui inizia la seconda riga della tabella globale -->
<tr>
<td width="150" height="15" bgcolor="#FFFFFF">
<img src="/zzz/pixel.gif" width="1" height="1"></td>
<td width="410" height="15" bgcolor="#FFFFFF">
<img src="/zzz/pixel.gif" width="1" height="1"></td>
<td width="202" height="15" bgcolor="#FFFFFF">
<img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
le tabelle nidificate vanno chiuse prima di chiudere la cella che le contiene. La seconda tabella viene quindi chiusa prima di chiudere la prima perché è contenuta in quest'ultima, dopo di che si chiude la cella della tabella globale che le contiene entrambe. Notate che la seconda riga della tabella globale non contiene tabelle nidificate, bensì tre immagini trasparenti che bloccano alle dimensioni volute le tre colonne che seguono.
Per vedere in dettaglio il codice generato in questo esempio, guardate il file Tabella nidificata piena> oppure la sua versione semplificata Tabella nidificata vuota >
|