c--- o--- d--- i--- c--- e
creare tables
Le tables sono state concepite come strumenti per la presentazione dati, e sono state introdotte ufficialmente con l'HTML 3, anche se i browser le adottano da molto tempo prima.
Le tables in un certo senso sono state snaturate, visto che il loro principale uso attuale e' quello di creare il layout della pagina, cioe' di impostarne la formattazione. Uno degli scopi dell'HTML 4 (cougar) e' proprio quello di ricondurre alla definizione originaria le tabelle.
Ma che significa che le tables sono usate per creare il layout della pagina?
Per rispondere a tale domanda consideriamo un esempio in cui abbiamo necessita' di creare un menu a sinistra della pagina su una colonna, e lasciare il resto della pagina per la descrizione delle varie voci del menu (lascieremo il bordo per rendere visibile la presenza della tables):
Qui vanno inserite le varie
voci del menu:
voce 01
voce 02
voce 03
voce 04
voce 05
|
Qui invece va inserito
il testo che si visualizza
al richiamo delle varie
voci del menu
|
Ecco il codice con cui e' stata generata questa tabella:
<TABLE BORDER=1 WIDTH=100%>
<TD WIDTH=30%>
<FONT SIZE=2 COLOR="#800000" FACE="ARIAL">Qui vanno inserite le varie<BR>voci del menu:<BR><BR>
<B>voce 01<BR>
voce 02<BR>
voce 03<BR>
voce 04<BR>
voce 05</B></FONT>
</TD>
<TD WIDTH=70%>
<FONT SIZE=2 COLOR="#0000A0" FACE="ARIAL">Qui invece va inserito
il testo che si visualizza
al richiamo delle varie
voci del menu</FONT>
</TD>
</TABLE>
La larghezza e l'altezza complessiva di una tabella viene indicata all'interno dell'attributo <TABLE>, il quale appunto e' quello che deve aprire e chiudere una table. Le dimensioni vengono definite con WIDTH (larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:
<TABLE WIDTH=500>
</TABLE>
In questo esempio di codice la larghezza della tabella viene espressa in pixel, in questo caso 500. Se si sceglie questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimmarra' invariata, cioe' di 500 pixel.
Cosa diversa accade nel momento in cui si sceglie una grandezza in percentuali della pagina:
<TABLE WIDTH=50%>
</TABLE>
In questo caso la larghezza della tabella sara' diversa a seconda della risoluzione video di colui, o colei, che ne esamini il contenuto.
Per esempio chi ha una risoluzione video di 640x480 vedra' un tabella di circa 320 pixels (perche' abbiamo impostato la tabella di una grandezza pari al 50% della pagina), mentre chi ha una risoluzione di 800x600 la vedra' di 400 pixel.
A mio avviso e' meglio mantenere il controllo assoluto sulla grandezza delle tabelle adottando una misurazione in pixel piuttosto che in percentuali.
Ora diamo uno sguardo al modo in cui deve strutturarsi una tabella. Per fare questo ci serviremo di alcune immagini:
Come si vede da questa immagine, l'attributo <TABLE> genera la tabella mentre con <TD> si definiscono i campi presenti all'interno di tale tabella.
Ecco come il disegno puo' essere trasformato in codice e quindi in una vera e propria tabella:
<TABLE BORDER=1 WIDTH=300>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TABLE>
Consideriamo nel prossimo esempio la necessita' di generare una tabella di questo tipo:
Come si nota abbiamo introdotto un nuovo comando <TR> che e' una sorta di "a capo" all'interno della tabella.
Ecco come il disegno puo' essere trasformato in codice e quindi in una vera e propria tabella:
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TR>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TR>
</TABLE>
|
prova
|
prova
|
prova
|
|
prova
|
prova
|
prova
|
Lo spazio tra i vari campi di una tabella e' definito all'interno del comando </TABLE> con CELLSPACING=X e CELLPADDING=X (dove X e' la distanza in pixel):
<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>
La posizione del testo o delle immagini all'interno dei vari campi <TD> della tabella puo' essere modicata in diversi modi:
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 VALIGN=TOP>
prova
</TD>
<TD WIDTH=100 VALIGN=BOTTOM>
Prova
</TD>
<TD WIDTH=100 VALIGN=MIDDLE>
Prova
</TD>
</TABLE>
|
|
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 ALIGN=RIGHT>
prova
</TD>
<TD WIDTH=100 ALIGN=CENTER>
Prova
</TD>
<TD WIDTH=100 ALIGN=LEFT>
Prova
</TD>
</TABLE>
|
|
Ogni campo puo' avere un colore di background diverso dagli altri ed addirittura uno sfondo come delle normali pagine web (gli sfondi possono essere sostituiti da GIF animate):
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="red">
prova
</TD>
<TD WIDTH=100 BGCOLOR="yellow">
Prova
</TD>
<TD WIDTH=100 BGCOLOR="gray">
Prova
</TD>
</TABLE>
|
|
<TABLE WIDTH=300 HEIGHT=230>
<TD width=100 BACKGROUND="sfondo15.jpg">
prova
</TD>
<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
Prova
</TD>
<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
Prova
</TD>
</TABLE>
|
|
Guida al linguaggio e alla programmazione HTML di Massimiliano Valente - 1998
|
|