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:
|
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%"> </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 (è 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.
Ultimi articoli HTML/XHTML
Inserire video nelle pagine Web con HTML5Codec, compatibilità dei browser, tools, codice e best practices per... |
LungoJS: semantica HTML5 per il mobileRealizzare layout per dispositivi mobili tenendo conto della... |
Web storage, i cookies secondo HTML5Come rendere persistenti i dati con HTML5 |
HTML5, section o article? ...E il div?Cerchiamo di fare chiarezza sull'uso di questi due nuovi elementi e... |
HTML5, la validazione del codiceGli strumenti per verificare l'aderenza agli standard di pagine e... |
Guide HTML/XHTML
Guida HTML5Una guida per conoscere e applicare da subito le novità introdotte... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
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
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |