Proprietà per le tabelle
|
Valori |
|
|
collapse |
|
|
<lunghezza> <lunghezza> |
|
|
top |
|
|
show |
|
|
auto |
|
|
padding |
valore |
Esempi dimostrativi delle funzionalità di alcune proprietà delle tabelle:
· Esempio 1: la proprietà border-collapse
· Esempio 2: la proprietà caption-side
La proprietà border-collapse è utilizzata per eliminare lo spazio tra i bordi delle
diverse celle e tra le celle e il bordo della tabella.
La proprietà border-collapse ammette 2 valori:
· separate (le celle sono separate);
· collapse (le celle sono adiacenti e i bordi collassano).
table{
border-collapse: collapse;
}
td{
border: 1em dotted #ccc;
}
La proprietà border-spacing è utilizzata per impostare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella. Tale spazio può essere impostato tramite misure di lunghezza.
table{
border-spacing: 0.25em 0.5em;
}
In questo esempio lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella è pari a 0.25em 0.5em.
La proprietà border-spacing al momento non è supportata da Internet Explorer 6 e precedenti per Windows.
La proprietà caption-side definisce il lato su cui vogliamo far comparire il titolo
della tabella.
La proprietà caption-side ammette i seguenti
valori:
· top;
· bottom;
·
left;
·
right.
table{
caption-side : bottom;
}
In questo esempio il titolo della tabella apparirà in basso.
La proprietàcaption-side al momento non è supportata da Internet Explorer 6 e precedenti per Windows e da Opera.
La proprietà empty-cells gestisce il trattamento delle celle di tabella senza
contenuto. Agisce solo su quelle che non presentino al loro interno alcun tipo
di markup.
La proprietà empty-cells ammette i seguenti
valori:
· show (mostra i bordi della cella);
· hide (i bordi non vengono mostrati e apparirà solo uno spazio vuoto).
td{
empty-cells: <valore>;
}
La proprietà empty-cells non è supportata da Internet Explorer 6 e precedenti per Windows.
La proprietà table-layout imposta il metodo di layout di una tabella.
La proprietà table-layout ammette i seguenti
valori:
· auto (il layout della tabella viene definito automaticamente dal browser);
· fixed (le regole di presentazione sono quelle impostate dall'autore nel CSS).
table{
table-layout: fixed;
width: 400px;
}
In questo esempio con la proprietà table-layout: fixed; definiamo la larghezza della tabella tramite la proprietà width.