Attributi del tag table

Ringraziamento particolare a HTML.IT che mi ha fornito online queste pagine.

 

 

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

Attributi di <table>,<tr>,<td>

I seguenti attributi invece hanno invece valore per tutti gli elementi della tabella (<table>, <tr>, <td>), li presenteremo quindi in un medesimo contesto.

Dimensioni

Abbiamo già esaminato gli attributi width e height che determinano la larghezza e l’altezza (in pixel o in percentuale) di tabelle, righe o celle.

Lo sfondo

Possiamo assegnare un colore di sfondo tramite l’attributo bgcolor, oppure un’immagine tramite background, come abbiamo già visto a proposito del tag <body>.

Vediamo un esempio:

  bgcolor

codice:

<table width="75%" border="1" align="center" bgcolor="#00FF00">

 <tr>
  <td width="50%" bgcolor="#FF0000">
   <font color="#FFFFFF">prova</font>
  </td>
  <td width="50%">&nbsp;
  </td>
 </tr>

</table>

visualizzazione:

prova  
background

codice:

<table width="75%" border="1" align="center" bgcolor="#00FF00">

 <tr>
  <td width="50%" background="sfondo.gif">
   <font color="#FFFFFF">prova</font>
  </td>
  <td width="50%">&nbsp;
  </td>
 </tr>

</table>

visualizzazione:

prova  

Come già nel <body> l'immagine di sfondo viene ripetuta, ed è possibile specificare entrambi gli attributi (bgcolor e background) all’interno dello stesso tag:

<td width="50%" bgcolor=”#0000FF” background="tabelle/sfondo.gif">

L’allineamento

L’attributo align, se riferito al tag <table>, sposta la tabella rispettivamente a sinistra (align=”left” – è così di default), a destra (align=”right”), o al centro (align=”center”) del documento. Es:

<table align=”right”>

Se riferito a <tr> o a <td> è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra. Es:

<td align=”right”>
contenuto
</td>

Allo stesso modo valign è utile per l’allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo – è il valore di default), bottom (in basso), baseline (alla linea di base). Es:

<td height=”100” valign=”middle”>
contenuto
</td>

Colori dei bordi

Per i bordi esistono gli attributi bordercolor, bordercolorlight, bordercolordark. Ad esempio:

<table border="2" bordercolor="blue" bordercolorlight="#00CCFF" bordercolordark="#000099">

Questi attributi - che consentono di creare degli effetti bellissimi - sono visualizzati correttamente soltanto da Internet Explorer, mentre con gli altri browser (Mozilla, Opera) verranno visualizzati in modo parziale se non scorretto.

In realtà il modo corretto per attribuire un colore al bordo è quello di usare i CSS.

Ci sono tuttavia delle soluzioni - utilizzate dagli sviluppatori sin dall’HTML 3 – che permettono di mostrare un filetto colorato attorno alle tabelle. La tecnica di solito è quella di lasciar trasparire il colore di sfondo attraverso lo spazio fra le celle. Vediamo un esempio:

<table width="450" bgcolor="#00CCFF" cellpadding="10" cellspacing="1">

  <tr bgcolor="FFFFFF">
    <td width="50%"><b>contenuto</b></td>
    <td width="50%">&nbsp;</td>
  </tr>

</table>

che dà:

contenuto  

Grazie all’attributo si può far sì che il contenuto di una cella non vada a capo, a meno che non lo forziamo espressamente con un <br> (è un “break”, cioè un’ "interruzione"):

<table width="100" border="1">
 <tr>
  <td >
   Se non lo vogliamo non va a capo.<br>
   Qui va a capo.
  </td>
 </tr>
</table>

cioè:

Se non lo vogliamo non va a capo.
Qui va a capo.

Approfondimenti

Da notare che quando una cella non viene riempita con un qualsiasi elemento non tutti i browser visualizzeranno i bordi allo stesso modo:

<table width="200" border="1">
 <tr>
  <td width="50%">
  </td>
  <td width="50%">contenuto
  </td>
 </tr>
</table>

cioè:

contenuto

Dunque è opportuno riempire sempre le celle con qualcosa, sia pure un &nbsp; (è la notazione per indicare un “non-breaking space”, cioè uno "spazio che non va a capo"), o un <br>. Attenzione che questi caratteri speciali prendono le dimensioni del tag <font> all’interno di cui sono contenuti.

Con Netscape 4 per ottenere la visualizzazione desiderata è spesso necessario introdurre una gif trasparente di 1 pixel x 1 pixel (detta “shim”) come sfondo della cella.

Ovviamente per ottenere il layout desiderato di bordi e tabelle sarebbe più opportuno utilizzare i fogli di stile su caratteristiche come i margini, il padding, i bordi, lo sfondo.