Table Tutor- Lezione 5

Adesso proviamo semplicemente a pistolare un po' con tags e attributi per vedere quello che succede.

Ecco una breve lista non numerata:

Ingredienti per la torta di mele

Fin qui tutto tranquillo, ma come facciamo a spostarla da un lato?

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella

Perché vogliamo che stia accanto all'immagine di...     una torta di mele!

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella
Ma certo! possiamo utilizzare una tabella per fare questo!

Quando stiamo studiando o costruendo una tabella è sempre più facile lavorare con i bordi in evidenza.

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella
Costruiamo quest'affare un passo alla volta. Non è per nulla difficile!

Iniziamo col piccolo Ed.

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

Ed

Mettiamo la lista al posto di Ed.

<TABLE BORDER=3>
<TR>

<TD>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>

</TR>
</TABLE>

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella
Ricorda, se non ci sono altre istruzioni, la tabella verrà fuori grande quel tanto che basta a contenere i dati. Per cui, in questo caso, gli attributi di dimensione non sono strettamente necessari.

Ora espanderemo la tabella in modo da coprire l'intera dimensione della finestra del browser.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>

</TR>
</TABLE>

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella
Non è meraviglioso?

Ora aggiungiamo un altra cella. Vogliamo che la cella di sinistra sia leggermente più piccola di quella di destra.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%></TD>

<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>

</TR>
</TABLE>

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella

Ora sarebbe bene copiarsi applepie.gif nella directory di lavoro.
Metti l'immagine nella prima cella.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>

</TR>
</TABLE>

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella

Ora ci è rimasto solo da allineare l'immagine col resto della tabella ed eliminare i bordi.

<TABLE BORDER=0 WIDTH=100%>
<TR>

<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>

</TR>
</TABLE>

Ingredienti per la torta di mele
  • Mele
  • Farina
  • Zucchero
  • Cannella
Et voilà!

<--BACK        NEXT--> 







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