|
Home -> Manuali e Tutorials -> Guida CSS -> Tabelle (1/4)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
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 ).
Torna su  | Indice Guida  | Pagina << 15 >>
|
