Html 9

Creare e gestire Tabelle HTML
(elemento TABLE)

Cosa imparerai in questa lezione: creare tabelle HTML per gestire dati e formattare il layout di pagina.

Le table sono state concepite come strumenti per la presentazione dati, e introdotte ufficialmente con l'HTML 3, anche se i browser le adottano da molto tempo prima.
Le table 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 e' proprio quello di ricondurre alla definizione originaria le tabelle.
Ma che significa che le table 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 table):

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 inseritele varie <BR> voci delmenu:<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 tabella. Le dimensioni vengono definite con WIDTH (larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:

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 rimarra' invariata, cioe' di 500 pixel.
Cosa diversa accade nel momento in cui si sceglie una grandezza in percentuali della pagina:

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.
Perché venga visualizzata la tabella occorre definire almeno un campo.
<TD>

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>

prova prova prova

<TR>

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>

</TABLE>

CELLSPACING E CELLPADDING

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):

ALIGN
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>