CSS  »  Guide  »  Guida CSS di base 

Alcune proprietà dei CSS sono destinate alla modifica stilistica delle tabelle. Il supporto, chiariamolo subito, non è uniforme per tutti i browser. Mozilla brilla anche qui per la sua fedeltà agli standard, mentre Explorer Windows cade su parecchi aspetti.

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. Del resto, l'uso di queste proprietà è davvero molto ridotto, dal momento che gli stessi risultati possono essere ottenuti in diversi modi, anche con i tradizionali sistemi incorporati in (X)HTML.

Ad accompagnare la spiegazione teorica questa pagina di esempi e test.

table-layout

Questa proprietà imposta il metodo di layout di una tabella. Non è ereditata. Si applica solo alle tabelle.

Sintassi

<selettore> {table-layout: <valore>;}

Nel caso del valore auto tutto è affidato al meccanismo di rendering dello user agent. 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 stessa cosa si può ottenere in (X)HTML usando sempre l'attributo width:

<table width="400px">

Nella pagina di esempio abbiamo riportato un paio di casi speciali per spiegare meglio il meccanismo di funzionamento. In particolare abbiamo verificato cosa accade se si imposta auto come valore della proprietà width e il comportamento dei vari browser nei casi in cui si stabilisca una larghezza esplicita anche per le celle della tabella.

Esempi

table.tabella1 {table-layout: fixed;}

table {table-layout: auto;}

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

<selettore> {border-collpse: <valore>;}

Esempi

table {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 5px;
}

border-spacing

Imposta lo spazio tra le celle di una tabella. Va usata solo in presenza di un modello di border-collapse settato su separate. Proprietà ereditata e applicabile solo alle tabelle.

Sintassi

<selettore> {border-spacing: <valore>;}

Esempi

Vedi sopra

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, nemmeno il classico   inserito in genere proprio per simulare la presenza di contenuto. Proprietà ereditata.

Sintassi

<selettore> {empty-cells: <valore>;}

caption-side

Le buone norme dell'accessibilità vogliono che una tabella sia sempre preceduta da una sorta di titolo/riassunto. In (X)HTML questa funzione è demandata al tag <CAPTION> di cui riportiamo sotto un esempio di sintassi:

<table>
<caption>Titolo della tabella</caption>
<tr>
<td>...
</table>

La proprietà caption-side definisce il lato su cui vogliamo far comparire tale titolo. È ereditata. La supporta solo Mozilla.

Sintassi

<selettore> {caption-side: <valore>;}

Esempi

table.tabella9 {
  table-layout : fixed;
  width : 300px;
  background : Silver;
  caption-side : bottom;
}

Altri articoli

Altre guide

Altre newsletter