Le tabelle

8 - Le tabelle

Una delle maggiori innovazioni avvenute nella definizione del linguaggio HTML è stata l'introduzione delle tabelle, ovvero di apposite istruzioni (tags) che consentono la formattazione delle informazioni secondo i gusti estetici del programmatore o secondo precisi criteri di leggibilità. Con le tabelle è possibile visualizzare calendari, posizionare immagini in aree dello schermo altrimenti irraggiungibili, migliorare l'aspetto di tutto il sito o creare dei listini prezzi. Qualsiasi esigenza estetica e di formattazione in genere possiate avere, le tabelle vi aiuteranno a risolverla.
Come di consueto, iniziamo con il presentare il tag d'inizio e di fine tabella: <TABLE>...</TABLE>.
Prima d'inoltrarci nella descrizione dei singoli argomenti disponibili, è opportuno chiarire con un esempio grafico a quali elementi ci si riferirà nel corso del testo.

I tre elementi evidenziati trovano posto come argomenti del primo tag <TABLE>, assumendo la forma:

<TABLE BORDER=x CELLPADDING=x CELLSPACING=x>

dove al posto della x troverà posto un numero indicante la dimensione in pixel (=punti dello schermo) di quello specifico attributo. Un valore pari a 0 (zero) in uno qualsiasi degli argomenti, equivale ad eliminare completamente quell'attributo.
Ricordiamo infine che nessuno dei precedenti argomenti risulta essere obbligatorio, pertanto sono tutti da considerare facoltativi.

Ecco di seguito alcuni esempi.

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5>
Ecco una tabella completa con tutti gli attributi. Utilizzatela come riferimento per gli esempi successivi.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=0>
Notare l'assenza di spazio fra le caselle, che risultano praticamente unite.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=5>
Notare l'assenza di spazio fra le scritte all'interno delle caselle e il bordo delle stesse.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=0>
Notare la presenza del solo bordo esterno.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=5>
Notare l'assenza di bordo e la distanza fra le scritte.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0>
Notare l'assenza di bordo e la distanza fra le scritte.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=5>
Notare l'assenza di bordo e la distanza fra le scritte.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Notare l'assenza di bordo e la distanza fra le scritte.

Prova A1	Prova B1
Prova A2	Prova B2

<TABLE BORDER=x CELLPADDING=x CELLSPACING=x>

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5>Ecco una tabella completa con tutti gli attributi. Utilizzatela come riferimento per gli esempi successivi.

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=0> Notare l'assenza di spazio fra le caselle, che risultano praticamente unite.

<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=5>Notare l'assenza di spazio fra le scritte all'interno delle caselle e il bordo delle stesse.

<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=0> Notare la presenza del solo bordo esterno.

<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=5> Notare l'assenza di bordo e la distanza fra le scritte.

<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0> Notare l'assenza di bordo e la distanza fra le scritte.

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=5> Notare l'assenza di bordo e la distanza fra le scritte.

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> Notare l'assenza di bordo e la distanza fra le scritte.