SERVIZI
sms pazzi
invia sms gratis
chat room
leahcim chat
forum
contattami
meteo
gioca
screen mates
roms wow!!
emulatori
giochi PC
simulatore NASA
immagini divertenti

WEBMASTER
guida html
inserisci chat
inserisci form
contatori
spazio web
news
generatore tag META
ftp

GUADAGNA
con un sito
con banner
con un cellulare
ricevendo e-mail

HACKER
mail anonime

Aggiungi ai preferiti
Diego Web startpage

inserisci la ricerca

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>
prova Prova
Prova

<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>
prova Prova Prova

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