aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Tabelle nidificate consecutive

 

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:


Clicca per ingrandire

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">&nbsp;</td>
<td colspan="2" height="25" width="381">
<h1>Costruire layout fluidi e statici</h1>
</td>
</tr>

<tr>
<td width="9">&nbsp;</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">&nbsp;</td>
<td width="84"><a href="1_tabella_come_elemento_strutturale_2.htm" class="navigazionemenu4">&lt; Precedente</a></td>
<td width="237">&nbsp;</td>
<td width="81"><a href="2_costruire_layout_fluidi_statici_2.htm" class="navigazionemenu4">Prossimo &gt;</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 >

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
1. La tabella come elemento strutturale
  1. Stabilità delle dimensioni
2. Progettare layout fluidi e statici
3. Costruire template con le tabelle di layout
  1. Tabelle e celle fluide
  2. Tabelle miste
  3. Tabelle consecutive
4. Template con struttura complessa
  1. Tabelle complesse
5. Template con tabelle nidificate
  1. Tabelle nidificate in cascata
  2. Tabelle nidificate complesse
  3. Tabelle nidificate cosecutive
6. Esercizi
  1. Esploriamo i tag delle tabelle
  2. Tabelle semplici con HTML-Kit
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits