Tutor- Lezione 2
Bene, abbiamo visto che questo...
<TABLE>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
...ci visualizza questo:
Prima di tutto facciamolo somigliare di più ad una tabella e diamogli un bordo. Ogni volta che ti trovi a fare una modifica e vuoi vedere come è venuta, puoi premere il bottone di Ricarica o Aggiorna del tuo browser.
<TABLE BORDER>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Come puoi vedere il default dell'istruzione "table border" è border=1.
E se facessimo il bordo un po' più grosso?
<TABLE ;BORDER=5>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
E se lo facessimo ENORME?
<TABLE BORDER=25>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
E se lo levassimo di mezzo?
<TABLE>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Come puoi vedere il default dell'istruzione "table" è border=0, quindi nullo.
Per ora lavoriamo con un bordo non troppo largo.
<TABLE BORDER=3>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Se non viene specificata alcuna dimensione la tabella verrà visualizzata grande quel tanto che basta.
<TABLE BORDER=3>
<TR>
<TD>Tom, Mauro e Paolo</TD>
</TR>
</TABLE>
In ogni caso non è difficile specificare la grandezza della tabella.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Tom, Mauro e Paolo</TD>
</TR>
</TABLE>
Che ne dici di questa?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Tom, Mauro e Paolo</TD>
</TR>
</TABLE>
Per adesso togliamo gli amici di Tom.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Riduciamo la dimensione della tabella al 50% della dimensione totale della finestra del Browser.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Proviamo a specificare una dimensione di 50 invece che il 50%.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Ora 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
Come puoi vedere ci sono due modi di specificare la dimensione di un tabella. Ciascuno dei due ha la sua utilità ma discuteremo un'altra volta i criteri per la scelta di uno dei due.
Potremmo essere anche interessati all' altezza.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Tom</TD>
</TR>
</TABLE>
E' possibile controllare il punto della cella in cui appariranno i dati.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Tom</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Tom</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Tom</TD>
</TR>
</TABLE>
Il valore di default è ALIGN=LEFT. Se ancora non lo sai ti ricordo che il valore di default è il valore che viene assunto dal browser se non gliene viene specificato nessuno in particolare.
E'anche possibile controllare la visualizzazione verticale all'interno di una cella.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Tom</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Tom</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Tom</TD>
</TR>
</TABLE>
Per default i dati vanno nel mezzo.
Adesso vi mostrerò qualcosa di diverso. Le immagini possono essere incasellate e manipolate come facenti parte di dati di una tabella.
Nella directory che contiene questo documento si trova una piccola immagine chiamata tom.gif. Copiala nella directory in cui stai lavorando (quella dove c'è table.htm per intendersi). Sostituisci Tom con un Tag di immagine.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="tom.gif" WIDTH=50 HEIGHT=51></TD>
</TR>
</TABLE>
Questo ritengo anche che sia il momento più adatto per ricordarti che è buona norma includere gli attributi di altezza e larghezza in tutti i tuoi tag di immagine. Senza scendere in dettaglio, farlo rende la vita più facile al browser e ti evita sorprese sgradite.
<--BACK
SEGUIMI-->
