|
|
|
Le tabelleLe tabelle, avendo il proprio tag predefinito <table> e tag distinti per titolo <caption>, intestazioni <th>, per righe <tr> e per celle <td>, accettano un qualunque elemento di stile sia ad esso associato, come una formattazione del testo o dei links, colori o immagini di sfondo, che possono anche essere diversi da quelli del normale paragrafo indicato con il tag <p>. Vediamo come assegnare gli elementi di stile che già conosciamo ad una tabella o ad una sua parte. Supponiamo di: voler dare un bordo solido e colorato alla tabella; voler assegnare un colore diverso da quello della pagina allo sfondo della tabella; voler assegnare un font particolare, diverso da quello usato nella pagina. Utilizzeremo questo foglio di stile: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000 } TABLE { background-color : #FFD5D5; border : medium solid #A52A2A; font-family : Arial, Helvetica, sans-serif; font-size : 14px; color : #FF3333; font : bold } </style> </head> <body> <p>Questa è una scritta normale fuori dalla tabella</p> <table border="0" width="300" align="center"> <tr> <td>Questa è la prima cella della tabella</td> <td>Questa è la seconda cella della tabella</td> </tr> <tr> <td>Questa è la terza cella della tabella</td> <td>Questa è la quarta cella della tabella</td> </tr> </table> </body> </html>
Come risultato, applicando il foglio di stile al tag <table>, avremo ottenuto una tabella bordata di rosso scuro, con sfondo rosa nella quale le scritte, a differenza della pagina, sono in Arial 14 pixel grassettate ed in rosso. Come si può vedere l'elemento di stile è stato applicato alla tabella nel suo intero complesso, senza preoccuparsi della divisione in quattro celle. Proviamo allora ad applicare lo stesso foglio di stile non più all'intera tabella, ma alle singole celle, cioè al tag <TD>. Ecco l'esempio: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000 } TD { background-color : #FFD5D5; border : medium solid #A52A2A; font-family : Arial, Helvetica, sans-serif; font-size : 14px; color : #FF3333; font : bold } </style> </head> <body> <p>Questa è una scritta normale fuori dalla tabella</p> <table border="0" width="300" align="center"> <tr> <td>Questa è la prima cella della tabella</td> <td>Questa è la seconda cella della tabella</td> </tr> <tr> <td>Questa è la terza cella della tabella</td> <td>Questa è la quarta cella della tabella</td> </tr> </table> </body> </html>
Come avrai potuto vedere il bordo è ora applicato alle quattro celle e la formattazione del testo, come nel primo esempio, al complesso delle celle che formano la tabella. E' importante apprendere questo concetto per capire a quale parte della tabella applicare un certo elemento di stile per ottenere l'aspetto finale che si desidera. Premesso ciò, vediamo un esempio complesso che richiamerà elementi di stile che abbiamo già esaminato in precedenza. Strutturiamo un foglio in questo modo, ricordandoci sempre che gli elementi di stile comuni ad un unico argomento possono essere raggruppati tra loro: <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000 } TABLE {background-color: white;border: medium solid Red; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: green; font: bold} CAPTION { background:#0000FF; color:#FFFFFF; text-align: center; padding-bottom:10px; font-weight:bold} th { border-bottom: yellow 3px solid; text-align:center; font-weight:bold; font-size:25px; padding-top:5px; padding-bottom:5px } td { background:#000000; text-align:left; font-style:italic; color:yellow} td.green {background:green; border: 10px inset lime} td.purple { background:#FF8C00; border: 10px inset orange} </style> </head> <body> <p>Questa è una scritta normale fuori dalla tabella</p> <table align="center" border="1" width="500" cellpadding="5" cellspacing="0"> <caption>ELENCO DEI VINI IN CANTINA<br> bordo verde=grande quantità<br> bordo arancio=scarse giacenze</caption> <tr> <th>Rossi</th> <th>Bianchi</th> </tr> <tr> <td class="green" width="50%">Dolcetto</td> <td width="50%">Vermentino</td> </tr> <tr> <td class="green">Cabernasco</td> <td>Albana</td> </tr> <tr> <td>Sangiovese</td> <td class="purple" >Vernaccia</td> </tr> <tr> <td class="purple">Cannonau</td> <td>Pinot</td> </tr> <tr> <td class="purple">Brunello di Montalcino</td> <td>Fiano di Avellino</td> </tr> <tr> <td class="green">Barolo</td> <td class="purple">Lamezia Greco</td> </tr> </table> </body> </html>
Se sei stato attento avrai notato come vi siano delle (apparenti) incongruenze. Nell'elemento TABLE abbiamo, tra l'altro, stabilito che lo sfondo della tabella dovesse essere bianco (white) ed il carattere dovesse essere un Arial 14 punti, normale, grassettato e di colore verde. L'interno delle celle, al di là di quelle che abbiamo modificato grazie alle classi "green" e "purple", appare invece con lo sfondo di colore nero e con le scritte in grassetto, corsivo e di colore giallo. Ebbene ciò è avvenuto perché lo stile che abbiamo associato alla singola cella nel tag <td> prevede appunto td { background:#000000; text-align:left; font-style:italic; color:yellow;} e quindi colore di sfondo nero (background:#000000), allineamento del testo a sinistra (text-align:left), stile del carattere corsivo (font-style:italic) e colore della scritta in giallo (color:yellow). Ciò sta a significare che, se uno specifico tag con campo più ristretto ha elementi di stile differenti da quelli del tag gerarchicamente superiore, prevalgono sempre i primi. Questo è fondamentale nell'uso dei fogli di stile. Se non avvenisse questo, tutto il testo, i colori, gli sfondi, i link e tutti gli altri elementi di una pagina HTML sarebbero sempre quelli definiti dall'elemento di stile assegnato a BODY, gerarchicamente superiore a tutto il resto, che è invece la formattazione generale della pagina in assenza di ulteriori istruzioni. Non a caso, sempre esaminando il precedente esempio, nella singola cella il carattere è grassettato: non essendoci contrasto con gli elementi di stile assegnati alle celle, subentrano quelli del tag gerarchicamente superiore, nel nostro caso TABLE che difatti prevede la grassettatura del testo (font: bold). Vediamo ora come utilizzare un foglio di stile associato ad una tabella per creare un menù "rollover", cioè un menù nel quale, passando il mouse o cliccando sulle varie voci cambi l'aspetto del link. <html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000 } A:LINK { text-decoration: underline; color: blue} A:VISITED { text-decoration: underline; color: Fuchsia} A:HOVER {text-decoration: underline; color: red} A:ACTIVE {text-decoration: underline; color: red} TABLE {width : 180px} TD{border-style : thin; border-color:red; text-align : center; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 13px; background-color : yellow; background-position : 100%;} TD A:LINK {text-decoration: none; color: black} TD A:VISITED {text-decoration: none; color: black} TD A:HOVER {text-decoration: none; font-weight : bold; color: aqua; background-color : Blue} TD A:ACTIVE {text-decoration: none; color: red; background-color: Yellow} </style> </head> <body> <p>Questa è una scritta normale fuori dalla tabella con un <a href="test.html" target="_blank">LINK</a></p> <table border="2" cellpadding="3" cellspacing="0"> <tr> <td><a href="http:www.mircoweb.altervista.org">Primo collegamento</a> </td> </tr> <tr> <td><a href="http:www.mircoweb.altervista.org">Secondo collegamento</a> </td> </tr> <tr> <td><a href="http:www.mircoweb.altervista.org">Terzo collegamento</a> </td> </tr> <tr> <td><a href="http:www.mircoweb.altervista.org">Quarto collegamento</a> </td> </tr> <tr> <td><a href="http:www.mircoweb.altervista.org">Quinto collegamento</a> </td> </tr> </table> </body> </html>
Come avrai potuto notare, nel foglio di stile sono ripetuti gli elementi degli eventi riferiti ai links, la prima volta per definire l'aspetto di quelli esterni alla tabella che appariranno del tutto normali, la seconda per definire l'aspetto di quelli interni che appariranno in un effetto rollover. Con le tabelle ci fermiamo volutamente qui. Ci sarebbero moltissimi altri elementi di stile da applicare alle tabelle, ma non ne faremo menzione, perché ti lascerebbero senz'altro confuso, credici. Se vorrai approfondire l'argomento, una volta diventato padrone dei fogli di stile, potrai approdare a manuali per webmasters professionisti cercandoli semplicemente nel web. |
segnala ad un amico |
|
|
