TABELLE - Il tag <TABLE>

Abbiamo giÓ detto che sono i TAGs fondamentali ed accennato al primo attributo: il BORDER. Iniziamo proprio da questo e vediamo in dettaglio cosa ci consente di fare.

Mediante il "border" impostiamo lo spessore (in pixels) del bordo esterno della tabella. Se lo poniamo uguale ad 1 il risultato Ŕ quello che avete visto nel primo esempio, se, per˛, lo poniamo uguale a 10 il risultato Ŕ il seguente (una specie di effetto rilievo):

1 2
3 4


...ma date un'occhiata a quello che succede se pongo come valore zero al border:

1 2
3 4


...oplÓ! La tabella Ŕ diventata invisibile! Questo "stratagemma" Ŕ molto utile e vi consente, con un pizzico di ingegno e fantasia, di creare delle pagine veramente ordinate e carine.

WIDTH ed HEIGHT sono due attributi di fondamentale importanza in quanto definiscono, rispettivamente, la larghezza e l'altezza dell'intera tabella.
Possiamo impostare le dimensioni in due modi:

  • In percentuale. In questo caso si riesce a specificare la larghezza, o l'altezza, della tabella in proporzione alla parte di schermo visibile.

  • In pixels. Molto pi¨ efficace della precedente perchŔ valori espressi in pixels sono totalmente indipendenti dalle diverse risoluzioni adottate.


WIDTH ed HEIGHT sono anche attributi del TAG <TD>, nel quale, ovviamente specificano larghezza ed altezza della cella, e non dell'intera tabella.

Ecco due esempi eloquenti:



PRIMO ESEMPIO


In questa tabella il valore Ŕ espresso in percentuale...






SECONDO ESEMPIO


...mentre in questa Ŕ espresso in pixels.


A differenza del border che, lo ricordiamo, ci serve per definire lo spessore del bordo di una tabella, il CellSpacing Ŕ quel parametro che ci consente di determinare lo spazio tra cella e cella.
Questi due esempi mettono in evidenza le variazioni che apporta un valore pari a zero ed un valore pari a 10 dati al suddetto parametro.




CellSpacing pari a zero

1 2
3 4
CellSpacing pari a 10
1 2
3 4


Ovviamente ponendo al border valore zero tutto lo "scheletro" della tabella sparirÓ lasciando inalterata la distanza scelta tra le celle.

Mentre il CellSpacing definisce la distanza tra cella e cella, il CellPadding viene usato per definire "l'imbottitura" (traduzione letterale di "padding", poco elegante ma univoca) di vuoto, espressa in pixels, che andrÓ a circondare il contenuto della cella. Negli esempi sono utilizzati valori pari a zero ed a 10:



CellPadding pari a zero

1 2
3 4
CellPadding pari a 10
1 2
3 4





<< una semplice tabellaá i tags <TD> e <TR> >>
CorsoHTML
di Francesco Ricca