HTML/XHTML  »  Guide  »  Guida HTML 

Attributi del tag table



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:

<table width="75%" border="1" cellpadding="10" cellspacing="0">

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

Ultimi articoli HTML/XHTML

L'importanza del codice semantico

Usare i tag (X)HTML nel modo corretto è il primo passo per...

Un'anteprima di HTML 5

Uno sguardo ravvicinato alle principali novità introdotte dalla...

HTML5, XHTML2 e il futuro del web

Un confronto tra le due tecnologie candidate a rimpiazzare HTML 4.01...

Definire metadati con Dublin Core

L'iniziativa Dublin Core punta alla definizione di standard per la...

Addio Embed

Liberiamoci del tag non standard embed! Metodi per usare l'elemento...

Altri articoli

Guide HTML/XHTML

Guida XHTML

XHTML è il nuovo standard per il WEB ed è la transizione verso...

Altre guide

Newsletter @Daily HTML.it

Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Design e Usabilità dei siti

15 Febbraio 2010 a Milano
Disponibilità: 6 Posti

Corso Webmaster base

22 Febbraio 2010 a Milano
Disponibilità: 3 Posti

Nessun corso previsto