Table Tutor- Lezione 2
Bene, abbiamo visto che questo...
<TABLE>
<TR>
<TD>Ed</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 del tuo browser. Se sventuratamente il tuo browser non ha un bottone per la ricarica, procuratene un altro.
<TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
E se facessimo il bordo un po' più grosso?
<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
E se lo facessimo ENORME?
<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
E se lo levassimo di mezzo?
<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Come puoi vedere il default è bordo nullo.
Per ora lavoriamo con un bordo non troppo largo.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Se non viene specificata alcuna dimensione la tabella verrà visualizzata grande quel tanto che basta.
<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
In ogni caso non è difficile specificare la grandezza della tabella.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Che ne dici di questa?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Per adesso leviamoci dalle scatole gli amici di Ed.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Riduciamo la dimensione della tabella al 50% della dimensione totale della finestra del Browser.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Proviamo a specificare una dimensione di 50 invece che il 50%.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ora 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Ed</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>Ed</TD>
</TR>
</TABLE>
Mi viene in mente una cosa che disse Steven Wright...
"L'altro giorno passeggiavo con il cane attorno al mio palazzo... sul cornicione. C'è chi è spaventato dall'altezza. Io no, a me è l'ampiezza che mi spaventa. "
E' possibile controllare il punto della cella in cui appariranno i dati.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Ed</TD>
</TR>
</TABLE>
Come vedi 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>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</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 ed.gif. Copiatela nella directory in cui stai lavorando (quella dove c'è tables1.html per intendersi). Sostituisci Ed con un Tag di immagine.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></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
NEXT-->
