| CREARE TABELLE <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:
<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 rimarrà invariata, cioè 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 sarà diversa a seconda della risoluzione video di colui, o colei, che ne esamini il contenuto. Per esempio chi ha una risoluzione video di 640x480 vedrà un tabella di circa 320 pixels (perchè abbiamo impostato la tabella di una grandezza pari al 50% della pagina), mentre chi ha una risoluzione di 800x600 la vedrà 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.
Osservando la tabella della figura potete vedere che ha tre righe e due colonne. Le colonne sono indicate all'interno del file HTML nella figura con i tag iniziale <TD> e finale </TD>. Le righe, come vedremo più avanti, sono indicate dai tag iniziali <TR> e finale </TR> i quali precedono i tag delle colonne. Questa semplice tabella ha solamente tre colonne, il codice HTML sarà:
<TABLE BORDER=2 WIDTH=320 HEIGHT=200> <TD WIDTH=200> </TD> <TD WIDTH=220> </TD> <TD WIDTH=200> </TD> </TABLE>
Si è formata una tabella con tre colonne alte 200 pixel, lunghe rispettivamente 200, 220 e 200 pixel. Ora analizziamo un'altra tabella con alcune righe. Per indicare le righe dobbiamo usare i tag >TR> e </TR>.
Per capire meglio come è stata creata la tabella eccovi il codice HTML:
<TABLE BORDER=2 WIDTH=300>
<TR> <TD WIDTH=200 HEIGHT=60> </TD> <TD WIDTH=200> </TD> <TD WIDTH=200> </TD> </TR>
<TR> <TD WIDTH=200 HEIGHT=60> </TD> <TD WIDTH=200> </TD> <TD WIDTH=200> </TD> </TR>
</TABLE>
Lo spazio tra i vari campi di una tabella è definito all'interno del comando con gli attributi CELLSPACING=X e CELLPADDING=X (dove X e' la distanza in pixel): CELLSPACING serve per impostare la spaziatura tra le celle mentre CELLPADDING imposta il rimpimento nelle celle.
<TABLE CELLPADDING=20 CELLSPACING=20> </TABLE>
Per inserire delle parole o immagini in una cella bisogna scrivere all'interno dei tag <TD> e </TD> il testo con il rispettivo tag <FONT> o in caso di un'immagine il tag <IMG>. La posizione del testo o delle immagini all'interno dei vari campi <TD> della tabella può essere modificata in diversi modi: <TABLE WIDTH=300 HEIGHT=200 BORDER=2>
<TD width=200 VALIGN=TOP> prova </TD>
<TD WIDTH=200 VALIGN=BOTTOM> Prova </TD>
<TD WIDTH=200 VALIGN=MIDDLE> Prova </TD>
</TABLE> | | <TABLE WIDTH=300 HEIGHT=200 BORDER=2>
<TD width=200 ALIGN=RIGHT> prova </TD>
<TD WIDTH=200 ALIGN=CENTER> Prova </TD>
<TD WIDTH=200 ALIGN=LEFT> Prova </TD>
</TABLE> | | RIASSUMENDO TAG | FUNZIONI | <TABLE></TABLE> | - Indicano l'inizio e la fine della tabella
- Tutti gli altri tag vanno inseriti tra questi
| <TR></TR> | - Indicano l'inizio e la fine di una riga di tabella
- Le righe sono costituite da celle di dati o di intestazione
| <TH></TH> | - Indicano l'inizio e la fine di una cella di intestazione
- Le celle di intestazione henno testo in grassetto centrato
| <TD></TD> | - Indicano l'inizio e la fine di una cella di dati
- Le celle di dati hanno testo normale allineato a sinistra
| TAG | ATTRIBUTO | ALLINEAMENTO | <TABLE></TABLE> | ALIGN BGCOLOR BORDER CELLSPACING CELLPADDING COLS WIDTH | Controlla l'allineamento della tabella Imposta il colore di sfondo per la tabella Imposta lo spessore del bordo della tabella in pixel Imposta la spaziatura tra le celle Imposta il riempimento nelle celle Imposta il numero di colonne Imposta la larghezza della tabella rispetto a quella della finestra
| Lezione 2 Creare tabelle complesse |