Tabelle e CSS

Proprietà table-layout

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

Larghezza anche alle celle

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.

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.

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

Empty-cells

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

Caption-side

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

Tabella 9
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.