Asbafo
a- a+

Le tabelle


Le tabelle, avendo il proprio tag predefinito<table> e tag distinti per titolo<caption>, intestazioni <th>, per righe<tr> e per celle <td>, accettano unqualunque elemento di stile sia ad esso associato, comeuna formattazione del testo o dei links, colori oimmagini di sfondo, che possono anche essere diversi daquelli 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 dirosso scuro, con sfondo rosa nella quale le scritte, adifferenza della pagina, sono in Arial 14 pixelgrassettate 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 stilenon più all'intera tabella, ma alle singolecelle, 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 è oraapplicato alle quattro celle e la formattazione deltesto, come nel primo esempio, al complesso delle celleche 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 cherichiamerà elementi di stile che abbiamogià esaminato in precedenza. Strutturiamo unfoglio in questo modo, ricordandoci sempre che glielementi di stile comuni ad un unico argomento possonoessere 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 stileassociato ad una tabella per creare un menù"rollover" , cioè un menù nelquale, passando il mouse o cliccando sulle varie vocicambi 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; }A:ACTIVE {text-decoration: underline; }TABLE {width : 180px}TD{border-style : thin; border-; 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; ; 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.asbafo.net">Primo collegamento</a>     </td>  </tr>  <tr>     <td><a href="http:www.asbafo.net">Secondo collegamento</a>     </td>  </tr>  <tr>     <td><a href="http:www.asbafo.net">Terzo collegamento</a>     </td>  </tr>  <tr>     <td><a href="http:www.asbafo.net">Quarto collegamento</a>     </td>  </tr>  <tr>     <td><a href="http:www.asbafo.net">Quinto collegamento</a>     </td>  </tr>     </table>     </body></html>
 
 
 
Nota: come avrai potuto notare, nel foglio di stilesono ripetuti gli elementi degli eventi riferiti ailinks, la prima volta per definire l'aspetto diquelli esterni alla tabella che appariranno del tuttonormali, la seconda per definire l'aspetto diquelli interni che appariranno in un effetto rollover.
 
Con le tabelle ci fermiamo volutamente qui. Cisarebbero moltissimi altri elementi di stile daapplicare 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.

 



Ti potrebbe interessare anche

commenta la notizia