WMPortal
a- a+

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
                                        <table border=1 width=50%>
<td>
In questa tabella il valore è espresso in percentuale...
</td>
</table>


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


 





SECONDO ESEMPIO
                                        <table border=1 width=300>
<td>
...mentre in questa è espresso in pixels.
</td>
</table>


...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.




                                        <table border=1 cellspacing=0>
<td>1</td>
<td>2</td>
<tr>
<td>3</td>
<td>4</td>
</table>
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:
 



                                        <table border=1 CellPadding=0>
<td>1</td>
<td>2</td>
<tr>
<td>3</td>
<td>4</td>
</table>
CellPadding pari a zero

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


 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?