Utilizzare l'estensione verticale delle celle in una tabella nidificata
Proseguiamo con la costruzione della nostra pagina modello (template) dedicandoci alla zona numero 2 che contiene la navigazione gerarchica e che richiede l'impiego di due tabelle nidificate e di una struttura complessa per almeno una di esse:

Fase 5: costruiamo la prima delle colonne verticali affiancate
proseguiamo dal punto realizzato fino alla fase 4 omettendo per brevità la parte di listato già elencata nell'articolo precedente (fase 4) e costruiamo la terza riga della tabella globale e posizioniamo la prima delle tre celle contenute in tale riga che conterrà le due tabelle nidificate della navigazione gerarchica (zona 2 della figura):
<!-- Segue dal listato già elencato nella fase 4 - omesso -->
<!-- Qui comincia la terza riga della tabella globale quella che ospita le tre colonne centrali della pagina -->
<tr>
<td bgcolor="c7d7ea" valign="top" align="left">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<!-- Prima riga della terza tabella nidificata contenente la navigazione del CD -->
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- Seconda riga della terza tabella nidificata -->
<tr>
<td> </td>
<td colspan="2" class="testoocra"><a href="/corsi/corsi_home.html">CORSI OPENMASTER</a></td>
<td></td>
</tr>
<!-- Terza riga della terza tabella nidificata -->
<tr>
<td> </td>
<td valign="bottom" rowspan="2"><img src="/zzz/q_blu.gif" width="7" height="7"></td>
<td><a href="/corsi/musica/musica_home.htm" class="navigazionemenu6b">MUSICA DIGITALE</a></td>
<td> </td>
</tr>
<!-- Quarta riga della terza tabella nidificata -->
<tr>
<td height="1" colspan="2"><img src="/zzz/pixel.gif" width="1" height="1"></td>
<td bgcolor="#044370" valign="bottom" height="1"><img src="/zzz/pixel.gif" width="1" height="1"></td>
<td height="1"><img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
Vediamo che la prima cella della riga già contiene una tabella nidificata e ha un colore di sfondo che trasferisce a quest'ultima (l'azzurrino che si vede in figura). La tabella nidificata contiene quattro righe con quattro colonne. Alcune delle righe contengono celle che si estendono in orizzontale o in verticale mediante gli attributi rowspan e colspan per creare effetti grafici. Vediamole una per una: la prima riga serve unicamente a creare uno spazio vuoto e non contiene nulla, eccetto quattro celle ciascuna con uno spazio bloccato che serve a impedire che alcuni browser le annullino.
La seconda riga contiene il primo elemento di navigazione "CORSI OPEN MASTER" che si estende sulle due colonne centrali ed è contorniato da una cornice ocra scuro realizzata mediante i fogli di stile (che vedremo più avanti).
La terza riga è più complessa: inizia con una cella vuota per avere poi un'immagine (il pallino quadrato blu identificato con q_blu.gif) che si estende anche sulla riga seguente, dopo di che troviamo il secondo elemento di navigazione "MUSICA DIGITALE" e infine una cella di spaziatura all'estrema destra.
La quarta riga è molto interessante perché sfrutta una cella della tabella per creare un elemento grafico. Innanzi tutto notiamo che la prima cella si estende su due colonne andando a sovrapporsi alla cella superiore, quella che contiene il quadratino blu, che invece scende verso il basso: il risultato è di allineare il quadratino blu alla base della quarta riga pur mantenendolo vincolato al testo nella terza. Segue una cella con sfondo blu impostato mediante <td bgcolor="#044370" che genera la riga di sottolineatura sotto le parole MUSICA DIGITALE. Infine Troviamo la classica cella di spaziatura. L'intera quarta riga è alta solo un pixel, quel tanto che basta da distaccarsi dalle parole nella riga superiore, ma senza aggiungere visibilmente spessore. Data la costruzione molto complessa, ogni cella contiene un'immagine trasparente per mantenere l'assetto stabile.

Fase 6: innestiamo le informazioni di navigazione di secondo livello
la barra di navigazione che stiamo realizzando è concepita per visualizzare il dettaglio delle sotto-sezioni una volta che si seleziona una particolare sezione del CD. Nell'esempio in figura, mostriamo il dettaglio delle sezioni che compongono il corso di Webmaster. Graficamente la sottosezione deve distaccarsi nettamente rispetto al resto della barra di navigazione e deve anche esserne isolata in modo da scomparire quando si passa a una sezione diversa. Realizziamo tale obiettivo innestando una nuova tabella, anch'essa complessa, entro quella che stiamo già costruendo:
<!-- Quinta riga della terza tabella nidificata contenente la navigazione del CD -->
<tr>
<td> </td>
<td rowspan="2" valign="bottom"><img src="/zzz/q_rosso.gif" width="7" height="7"></td>
<td valign="bottom"><a href="/corsi/Webmaster/webmaster_home.html" class="navigazionemenu6bROSSO">WEBMASTER</a></td>
<td> </td>
</tr>
<!-- Sesta riga della terza tabella nidificata -->
<tr>
<td height="1"><img src="/zzz/pixel.gif" width="1" height="1"></td>
<td bgcolor="#ed1c24" valign="bottom" height="1"><img src="/zzz/pixel.gif" width="1" height="1"></td>
<td height="1"><img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
<!-- Settima riga della terza tabella nidificata -->
<tr>
<td width="10"> </td>
<td rowspan="3" valign="bottom"><img src="/zzz/q_blu.gif" width="7" height="7"></td>
<td width="123" valign="bottom">
<!-- Inizio della quarta tabella nidificata contenente la navigazione della sotto-sezione -->
<table width="123" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="bottom"><a href="/corsi/Webmaster/Lezione_1/lezione1.htm" class="navigazionemenu6b">Lezione 1</a> </td>
<td width="9"> </td>
<td width="1" bgcolor="ED1C24"><img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
<tr>
<td align="right" valign="bottom"><a href="/corsi/Webmaster/Lezione_2/lezione2.htm" class="navigazionemenu6b">Lezione 2</a> </td>
<td width="9"> </td>
<td width="1" bgcolor="ED1C24"><img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
... (omissis)
</table>
<!-- Fine della quarta tabella nidificata -->
</td>
<td width="10"> </td>
</tr>
notiamo innanzi tutto il passaggio dal blu al rosso per evidenziare diversamente questa sezione con q_rosso.gif e
bgcolor="ED1C24" all'interno delle singole celle che vengono usate per tracciare una linea orizzontale e diversi segmenti di linee verticali che formano il motivo grafico voluto. Notate anche che il pallino blu collocato mediante l'elemento <td rowspan="3" valign="bottom"><img src="/zzz/q_blu.gif" width="7" height="7"></td> scende fino in fondo alla barra verticale, collocandosi di fianco alla scritta WINDOWS EXPERT. Se contiamo le righe sembrano sette, ma in realtà sei di queste appartengono alla quarta tabella nidificata che dal punto di vista di questo marcatore vale come una riga singola, perciò rispetto a rowspan="2" che abbiamo visto usare prima per lo stesso pallino basta incrementare di uno e inserire rowspan="3".

Per vedere in dettaglio il codice generato in questo esempio, guardate il file Tabella nidificata piena> oppure la sua versione semplificata Tabella nidificata vuota >
|