zoe romano 3 December 2000 23:07 INTRODUZIONE : le tabelle (tables)

Le tabelle (tables) vengono adoperate nei siti per due ragioni principali

·         La prima, più ovvia, è quella di sistemare le informazioni in una tabella.
·         La seconda - meno ovvia - è quella di creare il layout della pagina servendosi di tabelle nascoste.

L'uso delle tabelle per dividere la pagina in diverse sezioni è uno strumento estremamente efficace.
Quasi tutti i siti più grandi sulla rete si servono di tabelle nascoste per strutturare le pagine.

Gli aspetti più importanti della progettazione di una pagina che si possono trattare con l'uso di tabelle sono:
·         La divisione della pagina in sezioni separate.
Una tabella invisibile è una risorsa eccellente per questo scopo.

·         La creazione di menù.
In genere con un colore per la voce principale e un altro per i link che seguono nelle righe successive.

·         L'inserimento di form field interattivi.
Generalmente un'area grigia contenente un'opzione di ricerca.

·         La creazione di titoli di pagina rapidamente scaricabili.
Una tabella colorata con un testo viene scaricata in un batter d'occhio rispetto ad un banner anche semplicissimo.

·         L'allineamento di immagini che sono state tagliate in parti più piccole.

·         La disposizione del testo in due o più colonne sistemate una accanto all'altra.

L'importanza delle tabelle nella progettazione non deve essere tuttavia sopravvalutata. Ci sono alcune cose da tenere presenti quando si decide di farne uso.

La più importante è che il contenuto della tabella viene mostrato solo quando l'intera tabella è scaricata. Se hai pagine molto lunghe, ti consigliamo di dividerle in più tabelle - in modo che l'utente possa leggerne l'inizio, mentre il resto della pagina viene scaricato.

Ora andiamo avanti per esaminare le diverse tecniche...

Tabelle HTML :
TAG FONDAMENTALI

Le tabelle sono definite con il tag <table> .

Per inserire una tabella sulla tua pagina devi semplicemente aggiungere questi tag nel punto in cui vuoi metterla.

<table> </table>

La tabella qui sopra non può funzionare, perché non ha né righe né colonne.




ROWS:

Per inserire le righe nella tua tabella, adopera i tag <tr> e </tr> .

Esempio:

<table> <tr>Questa è la prima riga.</tr> <tr>Questa è la seconda riga.</tr> </table>

Risultato:

Questa è la prima riga.
Questa è la seconda riga.

COLONNE:

Puoi dividere le righe in colonne con i tag <td> e </td> :

Esempio:

<table> <tr> <td>Prima riga, sinistra.</td> <td>Prima riga, destra.</td> </tr> <tr> <td>Seconda riga, sinistra.</td> <td>Seconda riga, destra.</td> </tr> </table>

Risultato:

Prima riga, sinistra.	Prima riga, destra.
Seconda riga, sinistra.	Seconda riga, destra.

Questa pagina ti ha mostrato i punti essenziali delle tabelle. Devi sapere che esistono diverse opzioni per personalizzare le tue tabelle.
Le prossime pagine sono dedicate ai diversi attributi per i tag <table> , <tr> e <td> .



Tabelle HTML :
TAG PER LE TABELLE

Le seguenti proprietà possono essere aggiunte al tag <table> :

Proprietà	Descrizione
align= left center right	Tabella allineata a sinistra Tabella al centro Tabella allineata a destra
background=nomefile.gif o .jpg	immagine inserita dietro alla tabella
bgcolor=#rrggbb	colore dello sfondo
border=n	spessore del bordo
bordercolor=#rrggbb	colore del bordo
bordercolordark=#rrggbb	ombra del bordo
cellpadding=n	spazio tra le celle
cellspacing=n	distanza tra cella e contenuto
nowrap	impedisce l'interruzione di riga, anche se il contenuto è più grande della finestra del browser.
valign= top bottom	allinea il contenuto con il lato superiore della cella allinea il contenuto con il lato inferiore della cella
width= n,n n,n%	ampiezza minima della tabella in pixel ampiezza minima in percentuale rispetto alla misura della finestra

Nota:
Le proprietà della tabella si intendono per l'intera tabella.
Se determinate proprietà sono destinate alle singole celle, avranno priorità rispetto agli attributi fissati per l'intera pagina.

---

---

Tabelle HTML :
I TAG ROW/CELL

Questi attributi si possono aggiungere ai tag <tr> e <td> .

PROPRIETA'	DESCRIZIONE
align= left right center	allinea il contenuto a sinistra nelle celle allinea il contenuto a destra nelle celle allinea il contenuto al centro delle celle
background=nomefile.gif o .jpg	definisce un'immagine di sfondo per le celle
bgcolor=#rrggbb	definisce un colore di sfondo per le celle
bordercolor=#rrggbb	definisce il colore del bordo delle celle
bordercolordark=#rrggbb	definisce il colore per l'ombra del bordo delle celle
valign= top middle bottom	allinea al lato superiore delle celle allinea al centro delle celle allinea al lato inferiore delle celle
width= n n%	specifica l'ampiezza minima delle celle in pixel specifica l'ampiezza minima delle celle in percentuale rispetto all'ampiezza della tabella
height= n n%	altezza minima delle celle in pixel altezza minima delle celle in percentuale rispetto all'altezza della tabella

Questi attributi sono validi soltanto per i tag <td> .

PROPRIETA'	DESCRIZIONE
colspan=n	numero delle colonne nella cella
nowrap	impedisce l'interruzione di riga, anche se il contenuto della cella è più grande della finestra del browser.
rowspan=n	numero delle righe nella cella

Nota:
Gli attributi per le colonne (tag <td>) hanno priorità rispetto a quelli per le righe (tag <tr>).

Gli attributi per le celle (tag <tr> o <td>) hanno priorità rispetto agli attributi per l'intera tabella (tag <table>).