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