Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per le tabelle


Proprietà CSS2

Proprietà per le tabelle

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione delle tabelle.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
border-collapse collapse
separate
5.0 7.0 1.0
border-spacing <lunghezza> <lunghezza> - 6.0 1.0
caption-side top
bottom
left
right
- 6.0 1.0
empty-cells show
hide
- 6.0 1.0
table-layout auto
fixed
5.0 6.0 1.0

Esempi dimostrativi delle funzionalità di alcune proprietà delle tabelle:

torna alla lista completa delle proprietà

border-collapse

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

torna alla tabella

border-spacing

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.

torna alla tabella

caption-side

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.

torna alla tabella

empty-cells

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.

torna alla tabella

table-layout

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.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]