Homepage -> Guida CSS (Fogli di Stile)


MIGLIORARE LE TABELLE CON I CSS



Le tabelle hanno un tag HTML predefinito <TABLE> e tags distinti per il titolo della tabella <CAPTION>, per le intestazioni <TH>, per le righe <TR> e per le singole celle <TD>. E' possibile quindi definire degli stili generali per la tabella, ma anche degli stili generali per la sola cella o riga o colonna che sia.

Supponiamo di voler dare un bordo solido e colorato alla tabella, di voler assegnare un colore diverso da quello della pagina allo sfondo della tabella e di voler assegnare un font particolare, diverso da quello usato nella pagina.

Possiamo quindi una classe .TABLE così definita:


<html>
<head>

<style type = "text/css">
.TABLE {
  background-color : "#999999";
  border : medium solid #B2B2B2;
  font-family : Arial, Helvetica, sans-serif;
  font-size : "14px";
  color : "white";
  font : bold }
</style>

</head>
<body>
<TABLE class = "TABLE" border = "0" width = "300" height = "100" align = "center">
  <TR>
   <TD> I cella </TD>
   <TD> II cella </TD>
  </TR>
  <TR>
   <TD> III cella </TD>
   <TD> IV cella </TD>
  </TR>
</TABLE>
</body>
</html>


si otterebbe il seguente risultato:


I cella II cella
III cella IV cella


Se non avessi usato una classe, lo stesso stile sarebbe applicato a tutte le tabelle della pagina web in questione.

Se applicassi, invece, lo stesso stile al TD, o comunque definissi una classe simile .TD, otterrei:


I cella II cella
III cella IV cella


Questo è un altro esempio:


Questa è una cella di una Tabella, ottenuta usando il seguente codice nel Tag TABLE:

style = "border:3px dotted width"



Altri possibili valori sono:


style = "border:3px dashed width"
style = "border:3px solid width"
style = "border:3px double width"
style = "border:3px groove width"
style = "border:3px ridge width"
style = "border:3px inset width"
style = "border:3px outset width"
style = "border-style: solid dashed dotted solid"
style = "border-style: solid dashed none dashed"
style = "border-style: solid; border-color: red green blue yellow"



Ecco invece altri esempi più complessi:


1 2 3
4 5 6
7 8 9
10 11 12
13 14 15


Il cui codice è il seguente: vedi.

-----------------------------------------



.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 }



ELENCO DEI VINI IN CANTINA
bordo verde=grande quantità
bordo arancio=scarse giacenze
Rossi Bianchi
Dolcetto Vermentino
Cabernasco Albana
Sangiovese
Cannonau Pinot
Brunello di Montalcino Fiano di Avellino
Barolo Lamezia Greco


La figura sottostante può aiutare meglio a capire il codice sovrastante e che cosa sia il Caption di una tabella:





N.B.: se uno specifico tag con campo più ristretto ha elementi di stile differenti da quelli del tag gerarchicamente superiore, prevalgono sempre i primi ( esempio stili sul TD prevalgono su quelli del TABLE ).





Layout di una Tabella

Questa tabella presenta il table-layout uguale a fixed:

table.tabella1 {
table-layout : fixed;
width : 300px;
background : Silver;
}



cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9


Tutti i browser impostano, come da noi voluto, la larghezza della tabella a 300px.
Proviamo ora ad impostare la proprietà width su auto. Se visualizzate la pagina noterete le clamorose differenze di interpetazione. Mozilla e Opera sono corretti. Explorer no.



table.tabella2 {
table-layout : fixed;
width : auto;
background : Silver;
}


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9


Ed ora proviamo table-layout impostato su auto. Se un browser onora la specifica questa tabella dovrebbe essere uguale alla precedente.



table.tabella3 {
table-layout : auto;
background : Silver;
}


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9



Ora vediamo cosa accade se oltre a impostare una larghezza per la tabella, impostiamo anche quella per le celle sull'elemento TD.


table.tabella4 {
table-layout : fixed;
width : 300px;
background : Silver;
}

table.tabella4 td {
width : 150px;
background : Silver;
}


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9



La proprietà width di 300px viene superata, perchè se le celle sono di 150px la larghezza complessiva sarà di 450px.
Ora applichiamo la larghezza solo ad una cella:



table.tabella5 {
table-layout : fixed;
width : 300px;
background : Silver;
}

.cella {
width : 150px;
background : Silver;
}


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9



Tutto come previsto. La prima cella (e quindi la prima colonna) si prende 150px, le altre due si dividono lo spazio rimanente.


Meccanismo del border collapse

Iniziamo a verificare il supporto del border collapse. Per prima cosa impostiamo il valore separate e definiamo uno spazio di 5 pixel tra i bordi con la proprietà border-spacing.


table.tabella6 {
table-layout : fixed;
width : 300px;
background : Silver;
border-collapse : separate;
border-spacing : 5px;
padding: 10px;
}
table.tabella6 td {
border: 2px solid black;
}


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9


Questa è invece una prova del valore collapse. Non dovrebbero esserci spazi tra le celle. E le celle condividono lo stesso bordo.


cella 1 cella 2 cella 3
cella 4 cella 5 cella 6
cella 7 cella 8 cella 9



Vediamo ora come sia possibile lasciare vuota una cella, senza far comparire anche il bordo; basta lasciare vuota la cella in questione (<TD></TD>) ed aggiungere nello stile della tabella la seguente caratteristica:   empty-cells : hide;:


table.tabella8 {
table-layout : fixed;
width : 300px;
background : Silver;
border-collapse : separate;
border-spacing : 10px;
empty-cells : hide;
}

table.tabella8 td {
border: 2px solid black;
}


cella 1 cella 2 cella 3
cella 4 cella 6
cella 7 cella 8 cella 9



Di seguito riporto una serie di links a layout di Tabelle già modificate con particolari stili css (negli esempi sono previsti stili anche per le Intestazioni, Links, Footer, TH):



Menù Rollover

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.


<style>
.TABLE {background-color : "#FFD5D5"; border : medium
   solid #A52A2A; font-family : Arial, Helvetica, sans-
   serif; font-size : "14px"; color : "#FF3333";
   font : bold }
.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>



Primo link
Secondo link


Ecco un altro esempio:


Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6




Tabella con lo Scroll

Ecco un esempio di tabella con sroll, ottenuta semplicemente usando i CSS:



 
Row1
Row2
Row3
Row4
Row5
Column1 Column2 Column3 Column4 Column5 Column6 Column7 Column8 Column9 Column10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10