Table Tutor- Lezione 6

Sarà mica possibile mettere una tabella dentro una tabella??
Proviamo subito. Iniziamo col piccolo Ed.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed


Ingrandiamo di un tocco la tabella.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed


Sostituiamo Ed con un Ed completo di tabella.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Ed
Mica male vero?


Possiamo centrare facilmente la nostra seconda tabella.

<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</CENTER>

Ed

Ecco una situazione in cui una tabella è in grado di risolvere un problema che si incontra di frequente.
Mettiamo che tu abbia avuto la brillante idea di fare una GIF animata. Ma il disegno che vuoi utilizzare è grossotto. Ora una GIF animata è di fatto costituita da una sequenza di immagini visualizzate una dopo l'altra, rabbrividisci al solo pensiero della dimensione complessiva della tua GIF animata. I navigatori non saranno troppo contenti di vedersi arrivare via modem un mattone da 700k ad intasargli tutto. E non è finita qui, probabilmente il loro browser si troverà ad annaspare per visualizzare una sequenza di tali dimensioni.
La risposta? falla a pezzi e visualizzala come tabella.

Ecco un esempio:

Netscape vs. Microsoft?
Artwork by Boris Vallejo




Ecco la stessa tabella con CELLSPACING attivo.

Netscape vs. Microsoft?
La sola parte della figura che viene animata sono gli occhi.

Ecco il codice HTML per la tabella. (Il titolo <CAPTION> è stato aggiunto solo per mio divertimento. Non è necessario e non ha alcun effetto sul resto del contenuto della tabella)

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape vs. Microsoft?</EM></STRONG></FONT></CAPTION>

<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>

</TABLE>


Ecco lo schema.

dragon4.gif

dragon3.gif
dragon5.gif
anidrag.gif

dragon2.gif


Bene, questo è tutto per quel che concerne i Tags di tabella. Que sta è la fine del mio tutorial, ma, siccome non mi riuscirà mai di sottolineare a sufficenza l'importanza delle tabelle nella creazione di pagine di buona qualità, ho pensato di aggiungere qualche altro esempio. Prova a riprodurli per conto tuo.

<--BACK        NEXT-->

Introduzione Lezione 1 Lezione 2 Lezione 3 Lezione 4 Lezione 5 Lezione 6 Lezione 7 Indice