Le proprietà CSS per le tabelle ci permettono di definirne il layout con assoluta precisione. In questo articolo tratteremo non solo di tali proprietà, ma anche del modello di tabella CSS e del particolare tipo di layout che caratterizza le tabelle nel modello di formattazione visuale dei CSS.
Il modello di tabella CSS
Il modello di tabella CSS è basato sul modello di tabella HTML 4.0, in cui la struttura di una tabella
segue parallelamente il suo layout visuale. Questo modello viene detto "a supremazia di riga", poichè gli
autori specificano esplicitamente delle righe nel sorgente. Il modello di tabella CSS consiste di tabelle (table),
didascalie (caption), righe (tr), gruppi di riga (tbody), colonne (col),
gruppi di colonna (colgroup) e celle (td, th).
Per quei linguaggi (come XML) che non hanno elementi di tabella predefiniti, gli autori devono usare i seguenti valori della proprietà 'display':
- table
- In HTML:
table. Specifica una tabella di blocco. - inline-table
- In HTML:
table. Specifica una tabella inline. - table-row
- In HTML:
tr. Specifica una riga di celle. - table-row-group
- In HTML:
tbody. Specifica che l'elemento raggruppa una o più righe. - table-header-group
- In HTML:
thead. Specifica che l'elemento raggruppa una o più righe, ma viene visualizzato prima di tutte le altre righe, gruppi di riga e dopo ogni didascalia superiore. - table-footer-group
- In HTML:
tfoot. Specifica che l'elemento raggruppa una o più righe, ma viene visualizzato dopo tutte le altre righe, gruppi di riga e prima di ogni didascalia inferiore. - table-column
- In HTML:
col. Specifica una colonna di celle. - table-column-group
- In HTML:
colgroup. Specifica che l'elemento raggruppa una o più colonne. - table-cell
- In HTML:
td,th. Specifica una cella di tabella. - table-caption
- In HTML:
caption. Specifica una didascalia di tabella.
Colonne
Le seguenti proprietà si applicano alle colonne e ai gruppi di colonna:
- 'border
- Si applica solo se 'border-collapse' è impostato su 'collapse' per la tabella.
- 'background'
- Si applica solo se celle e righe hanno sfondi trasparenti.
- 'width'
- Imposta la larghezza minima per la colonna.
- 'visibility'
- L'unico valore che ha effetto è 'collapse'. In questo caso nessuna cella della colonna viene rappresentata.
La proprietà 'caption-side'
| Valore: | top | bottom | inherit |
|---|---|
| Iniziale: | top |
| Si applica a: | elementi 'table-caption' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica la posizione del box della didascalia rispetto al box della tabella. I valori sono:
- top
- Posiziona il box della didascalia sopra il box della tabella.
- bottom
- Posiziona il box della didascalia sotto il box della tabella.
Questi sono i valori della revisione CSS 2.1. I CSS 2 descrivevano proprietà differenti, che saranno ampliate nei CSS 3. Esempio:
caption {caption-side: bottom; text-align: left}
Per allineare orizzontalmente il contenuto di caption, si usi la proprietà 'text-align'.
La proprietà 'table-layout'
| Valore: | auto | fixed | inherit |
|---|---|
| Iniziale: | auto |
| Si applica a: | elementi 'table' e 'inline-table' |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica il tipo di algoritmo usato per una tabella. I valori sono:
- fixed
- Usa l'algoritmo fisso (1) per il layout di tabella.
- auto
- Usa un algoritmo automatico (2) per il layout di tabella.
Con l'algoritmo fisso (1), il layout della tabella non dipende dal contenuto delle celle, ma solo dalla larghezza della tabella, dalla larghezza delle colonne, e dalla spaziatura tra bordi o celle. La larghezza della tabella può essere specificata con la proprietà 'width'. Un valore di 'auto' implica l'uso dell'algoritmo automatico. La larghezza di ciascuna colonna viene determinata come segue:
Un elemento di colonna con un valore di 'width' diverso da 'auto' imposta la larghezza per quella colonna.
Altrimenti, una cella nella prima riga con larghezza diversa da 'auto' determina la larghezza per quella colonna. Se la cella di estende su più di una colonna, la larghezza viene divisa tra le colonne.
Tutte le restanti colonne si dividono equamente lo spazio orizzontale rimanente (meno bordi o spaziatura tra celle).
Con l'algoritmo automatico (2), la larghezza della tabella viene definita dalla larghezza delle colonne e dei bordi. Le specifiche affermano che i browser possono usare qualsiasi altro algoritmo, anche se i risultati sono diversi. Nella pratica, la larghezza della tabella è determinata dalla quantità di contenuto delle celle.
Esempio:
table {table-layout: fixed; width: 500px}
td {width: 100px}
La proprietà 'border-collapse'
| Valore: | collapse | separate | inherit |
|---|---|
| Iniziale: | separate |
| Si applica a: | elementi 'table' e 'inline-table' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà seleziona un modello di bordi per la tabella. Il valore 'separate' imposta il modello a bordi separati, in cui le celle adiacenti sono separate tra di loro. Il valore 'collapse', invece, seleziona il modello a bordi collassati, in cui le celle adiacenti non sono separate tra di loro e i loro bordi si uniscono per formare un unico bordo. Esempio:
table {border-collapse: collapse; border: 1px solid #000}
La proprietà 'border-spacing'
| Valore: | <length> <length>? | inherit |
|---|---|
| Iniziale: | 0 |
| Si applica a: | elementi 'table' e 'inline-table' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | due lunghezze assolute |
Quando si usa il modello a bordi separati, questa proprietà specifica la distanza che separa i bordi delle celle adiacenti. Se si specifica una sola lunghezza, questa imposta la spaziatura orizzontale e verticale. Con due lunghezze si impostano prima la spaziatura orizzontale e poi quella verticale. I valori non possono essere negativi. Esempio:
table {
border-collapse: separate;
border: 1px solid #000;
border-spacing: 3px 4px
}
Nota: Come impostazione predefinita, tutti i browser applicano una spaziatura di 2px tra i bordi delle celle. In alcuni casi, anche nel modello a bordi collassati appare un valore diverso dallo 0 iniziale, per cui bisogna forzare i browser a non mostrare spazi con la dichiarazione 'border-spacing: 0'.
La proprietà 'empty-cells'
| Valore: | show | hide | inherit |
|---|---|
| Iniziale: | show |
| Si applica a: | elementi 'table-cell' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Nel modello a bordi separati, 'empty-cells' controlla la resa dei bordi e degli sfondi intorno alle celle prive di contenuto visibile. Le celle vuote e le celle con 'visibility: hidden' ricadono in questa categoria. Il valore 'show' mostra i bordi e gli sfondi per queste celle, mentre il valore 'hide' impedisce che questo avvenga. Esempio:
table {empty-cells: hide}
Nota su Internet Explorer per Windows
Internet Explorer 7 (ed inferiori) non supporta nessuno dei valori della proprietà 'display' per le tabelle, eccetto 'table-header-group', ma solo in standard mode. Inoltre non vengono supportate le proprietà 'caption-side', 'border-spacing' ed 'empty-cells'.