Alcune proprietà dei CSS sono destinate alla modifica stilistica delle tabelle. Nell'analisi delle proprietà ci limiteremo all'enunciazione dei concetti di base, tralasciando la miriade di regole particolari e spesso complesse che ne governano il comportamento.
La proprietà table-layout
Questa proprietà imposta il metodo di layout di una tabella. Non è ereditata. Si applica solo alle tabelle.
Sintassi ed esempi
selettore {table-layout: valore;}I valori della prorpietà possono essere i seguenti:
auto: il layout della tabella viene definito automaticamente dal browser;fixed: le regole di presentazione sono quelle impostate dall'autore nel CSS.
Nel caso del valore auto, tutto è affidato al meccanismo di rendering del browser. Usando invece fixed possiamo innanzitutto definire la larghezza della tabella tramite la proprietà width. Volendo creare una tabella di 400px, quindi, scriveremo questa regola:
table {
table-layout: fixed;
width: 400px;
}La proprietà border-collapse
Attraverso questa proprietà possiamo stabilire in che modo trattare i bordi e gli spazi tra le celle di una tabella. Si applica solo alle tabelle ed è ereditata.
Sintassi ed esempi
selettore {border-collpse: valore;}Si può usare uno tra questi due valori:
collapse: se viene impostato un bordo, le celle della tabella lo condividono;separate: se viene impostato un bordo, ogni cella ha il suo, separato dalle altre; lo spazio tra le celle e tra i bordi si imposta con la proprietàborder-spacing.
table {
border: 2px solid black;
border-collapse: separate;
border-spacing: 5px;
}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. Proprietà ereditata.
Sintassi ed esempi
selettore {empty-cells: valore;}Anche in questo caso due i valori possibili:
show: mostra i bordi della cella;hide: i bordi non vengono mostrati e apparirà solo uno spazio vuoto.
La proprietà caption-side
Le buone norme dell'accessibilità vogliono che una tabella sia sempre preceduta da una sorta di titolo/riassunto. In HTML questa funzione è demandata al tag <caption>. Ecco un esempio di:
<table>
<caption>Titolo della tabella</caption>
<tr>
<td>...
</table>La proprietà caption-side definisce il lato su cui vogliamo far comparire tale titolo. È ereditata.
Sintassi ed esempi
selettore {caption-side: valore;}I valori che possono essere impostati fanno riferimenti ai quattro lati della tabella:
top: caption sul lato superiore;right: caption sul lato destro;bottom: caption sul lato inferiore;left: caption sul lato sinistro.
table {
table-layout : fixed;
width : 300px;
background : Silver;
caption-side : bottom;
}