Web Design Roma Home

Attributi del tag table

Scritto da Federico Albani

Per quel che riguarda il tag <table>, i seguenti attributi che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto:

border	(che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel)
cellspacing	specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri
cellpadding	indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata – ha effetto su tutti i lati della cella.

I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come segue:

figura

Con questa sintassi ad esempio si imposta una tabella con bordo di 1 pixel, senza spazio tra le celle e con il contenuto che è distanziato dai bordi della cella di 10 pixel:

come si può vedere nell’esempio.

per quel che riguarda l’attributo border, a partire da Internet Explorer 4 e da Netscape Navigator 6 è possibile modificare l’aspetto dei bordi esterni della tabella (tramite l’attributo frames) e delle righe fra le celle (tramite l’attributo rules).

Vediamo quali sono i possibili valori e i relativi esempi:

esempio

spiegazione

<table border="1" frame="above">

(nelle pagine di esempio qui a fianco le righe interne tra le celle sono state azzerate per facilitare la comprensione, dunque ci troveremo nella situazione in cui rules="none")

Il bordo della tabella è presente:

void: in nessun lato. È il valore di default
above: solo nel lato superiore
below: solo nel lato inferiore
hsides: solo nei lati superiore e inferiore
vsides: solo a sinistra e a destra
lhs: solo nel lato sinistro (left-hand side)
rhs:solo nel lato destro (right hand side).
box: in tutti e quattro i lati
border: in tutti e quattro i lati

<table border="1" rules="rows">

(nelle pagine di esempio qui a fianco i bordi esterni della tabella sono stati azzerati per facilitare la comprensione, dunque ci troveremo nella situazione in cui frame="void")

Le righe interne alle celle sono presenti:

none: da nessuna parte. È il valore di default
groups: le righe separano i gruppi (siano essi gruppi di righe: <thead>, <tfoot>, <tbody> - o gruppi di colonne: <colgroup>)
rows:le righe separano i vari <tr>
cols:le righe separano le colonne
all:le righe separano tanto i <tr>, quanto le colonne