Utilizzare l'allineamento spontaneo verticale delle tabelle nidificate all'interno di una cella
Concludiamo l'esplorazione del nostro modello con la zona 3, quella dedicata al testo e ai link di collegamento diretto con l'articolo precedente e successivo della lezione:

Fase 7: costruiamo lo spazio per il testo
proseguiamo dal punto realizzato fino alla fase 6 costruendo la prossima cella della terza riga, la più importante, della nostra tabella globale 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):
<!-- Qui comincia la seconda cella della terza riga della tabella globale, cioè la riga che contiene la parte centrale della pagina-->
<td align="center" valign="top">
<!-- Qui inizia la quinta tabella nidificata destinata a contenere il testo-->
<table width="390" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9"> </td>
<td colspan="2" height="25" width="381">
<h1>Costruire layout fluidi e statici</h1>
</td>
</tr>
<tr>
<td width="9"> </td>
<td width="361" class="testo3">
<p class="testo">Scegliere la corretta configurazione delle tabelle di struttura per la pagina</p>
<p>Fortunatamente i browser moderni ..
</p>
</td>
<td width="20"></td>
</tr>
<tr>
<td height="3" colspan="3" bgcolor="#044370" width="390"><img src="/zzz/pixel.gif" width="1" height="1"></td>
</tr>
</table>
<!-- Fine della quinta tabella nidificata -->
Abbiamo collocato il testo in una tabella dedicata (la quinta delle tabelle nidificate), la cui larghezza è bloccata dalla ultima riga che contiene anche la riga blu di chiusura della zona del testo.
Fase 7: costruiamo lo spazio per i link Prossimo e Precedente
Aggiungiamo una seconda tabella immediatamente consecutiva alla precedente e nidificata all'interno della stessa cella per contenere i link all'articolo Precedente e Successivo:
<!-- Inizio della sesta tabella nidificata immediatamente consecutiva alla quinta -->
<table width="410" border="0" cellspacing="0" cellpadding="0" height="10">
<tr>
<td width="8"> </td>
<td width="84"><a href="1_tabella_come_elemento_strutturale_2.htm" class="navigazionemenu4">< Precedente</a></td>
<td width="237"> </td>
<td width="81"><a href="2_costruire_layout_fluidi_statici_2.htm" class="navigazionemenu4">Prossimo ></a></td>
</tr>
</table>
<!-- Fine della sesta tabella nidificata -->
</td>
<!-- Fine della seconda cella della terza riga della tabella globale, quella che tiene in posizione tutti gli elementi al centro della pagina>
Proseguendo nell'esame della pagina riportata sul CD noterete che la terza cella della terza riga della tabella globale contiene le ultime due tabelle nidificate (zona 4 della nostra immagine) anch'esse consecutive come quelle viste sopra.
Per vedere in dettaglio il codice generato in questo esempio, guardate il file Tabella nidificata piena> oppure la sua versione semplificata Tabella nidificata vuota >
|