|
Home -> Manuali e Tutorials -> Guida CSS -> Tabelle (2/4)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
MIGLIORARE LE TABELLE CON I CSS
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 |
Torna su  | Indice Guida  | Pagina << 16 >>
|
