Impostare la presentazione delle tabelle con i CSS

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

Esempi.

Approfondimenti

• Assegnare stili ad una tabella
• Evidenziare la riga di una tabella al passaggio del mouse
• Visualizzare una tabella con il colore delle colonne alternato