HTML BASE LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI 1
<TABLE> gestire Tabelle 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: <TABLE WIDTH=500> 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%> 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. Consideriamo la necessita' di generare una tabella composta da 2 righe e 3 colonne: ogni riga è composta quindi da 3 celle. Analizziamo lo schema riportato qui sotto: si intuisce la funzione dei vari tag di una tabella: <TABLE> Apre e chiude la tabella all inidizio e alla fine <TR></TR> Apre e chiude ogni singola riga della tabella <TD></TD> Apre e chiude ogni singola cella della tabella Ecco come il disegno puo' essere trasformato in codice e quindi in una vera e propria tabella: 2
<TABLE BORDER=1 WIDTH=300> <TR> >Cella1</TD> >Cella2</TD> >Cella3</TD> </TR> <TR> >Cella4</TD> >Cella5</TD> >Cella6</TD> </TR> Cella1 Cella2 Cella3 Cella1 Cella1 Cella6 Il bordo della tabella viene disegnato col BORDER=1 all interno del tag <TABLE>. Si consiglia quando si vuole impostare una tabella di lasciare sempre il BORDER=1 in modo da poter vedere la struttura della tabella. Successivamente se non si vuole visualizzare il bordo basterà cambiare in BORDER=0: il risultato sarà identico, ma l utente non vedrà i bordi della tabella e delle celle: Lo spazio tra le varie celle di una può essere modificato all'interno del comando <TABLE> con CELLSPACING=X (dove X e' la distanza in pixel). Lo spazio invece tra i bordi di una cella e l inizio del relativo contenuto viene modificato con CELLPADDING=X (dove X e' la distanza in pixel). 3
<TABLE CELLPADDING=10 CELLSPACING=10 border=1> In questo caso verranno lasciati 10 pixel tra una cella e l altra e 10 pixel di margine (superiore e sinistro) in ogni cella: La posizione del testo o delle immagini all'interno delle celle <TD> della tabella puo' essere modicata in diversi modi: <TABLE WIDTH=300 HEIGHT=200> <TD width=100 VALIGN=TOP> prova VALIGN=BOTTOM> Prova VALIGN=MIDDLE> Prova 4
<TABLE WIDTH=300 HEIGHT=200> <TD width=100 ALIGN=RIGHT> ALIGN=CENTER> Prova Prova Prova ALIGN=LEFT> 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"> BGCOLOR="yellow"> BGCOLOR="gray"> prova Prova Prova 5
<TABLE WIDTH=300 HEIGHT=230> <TD width=100 BACKGROUND="sfondo15.jpg"> BACKGROUND="sfondo26.jpg"> BACKGROUND="sfondo61.jpg"> <ROWSPAN> <COLSPAN> Sono attributi del comando <TD> e servono per assegnare ad una singola cella dimensioni rispetto ad altre celle. ROWSPAN indica che la cella dovrà prendere lo spazio di N righe delle cella a fianco. COLSPAN indica che la cella dovrà prendere lo spazio di N colonne delle celle inferiori Ad esempio: <table width="300" cellspacing="2" cellpadding="2" border="1"> <td bgcolor="red" rowspan="2" > cella 1 </td> <td> cella 2</td> cella 1 <td> cella 3</td> </table> cella 2 cella 3 <table width="300" cellspacing="2" cellpadding="2" border="1"> <td bgcolor="red" colspan="2" >cella 1</td> <td> cella 2</td> <td> cella 3</td> </table> cella 1 cella 2 cella 3 6