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%">
</td>
</tr>
</table>
visualizzazione:
|
background |
codice:
<table width="75%" border="1"
align="center" bgcolor="#00FF00">
<tr>
<td width="50%"
background="tabelle/sfondo.gif">
<font
color="#FFFFFF">prova</font>
</td>
<td width="50%">
</td>
</tr>
</table>
visualizzazione:
|
|
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 utilizzare
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%"> </td>
</tr>
</table>
che dà:
nowrap
Grazie all’attributo nowrap 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 nowrap>
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è:
Dunque è opportuno riempire sempre le celle con qualcosa, sia pure un
(è 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. Ecco alcuni link interessanti: i
margini, il
padding, i
bordi, lo
sfondo.