Questa tabella presenta il table-layout uguale a fixed.
Codice:
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 onorano la larghezza impostata a 300px.
Ora iniziano i problemi. Proviamo a impostare la proprietà width su auto. Se visualizzate la pagina noterete le clamorose differenze di interpetazione. Mozilla e Opera sono corretti. Explorer no.
Codice:
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.
Codice:
table.tabella2 {
table-layout : auto;
background : Silver;
}
cella 1 | cella 2 | cella 3 |
cella 4 | cella 5 | cella 6 |
cella 7 | cella 8 | cella 9 |
Qui vediamo cosa accade se oltre a impostare una larghezza per la tabella, impostiamo anche quella per le celle sull'elemento TD.
Codice:
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 un'altra prova, applichiamo la larghezza solo ad una cella.
Codice:
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.
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.
Codice:
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 ta 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 |
Test della proprietà empty-cells.
Codice:
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;
}
La cella centrale dovrebbe apparire, vuota, senza nemmeno il bordo.
cella 1 | cella 2 | cella 3 |
cella 4 | cella 6 | |
cella 7 | cella 8 | cella 9 |
Ultima prova per la proprietà caption-side.
Codice:
table.tabella9 {
table-layout : fixed;
width : 300px;
background : Silver;
caption-side : bottom;
}
table.tabella9 td {
border: 2px solid black;
}
cella 1 | cella 2 | cella 3 |
cella 4 | cella 5 | cella 6 |
cella 7 | cella 8 | cella 9 |
Il titolo della tabella impostato con il tag <caption> dovrebbe essere sul lato inferiore.