Formattazione tabelle CSS

Formattazione delle tabelle con i CSS

I CSS permettono di modificare l'aspetto delle tabelle e dei dati. Le impostazioni principali riguardano:

Bordi delle tabelle

border - La proprietà CSS border permette un maggior controllo dei bordi rispetto alla proprietà border dell'HTML. Ad esempio, attraverso i CSS possiamo impostare uno stile diverso per ogni cella.

La proprietà CSS border è supportata solo dagli elementi: table, td, th e caption.

.td {
border: thin dotted #000000;
}

.td1 {
border: thin dotted #339900;
}

.td2 {
border: thin dotted #FF0000;

}

1	2
3	4

border-collapse - Normalmente i bordi tra le singole celle e tra le celle e il bordo della tabella sono separati da uno spazio vuoto.

La proprietà border-collaps permette di eliminare questo spazio, accetta i valori: separate e collapse.

.bordi_collassati {
border-collapse:separate
}

1	2
3	4

Bordi delle celle separati

.bordi_collassati {
border-collapse:collapse
}

1	2
3	4

Bordi delle celle collassati

border-spacing - La proprierà border-spacing imposta la distanza tra i bordi delle celle. Accetta due valori: il primo regola la distanza orizzontale ed il secondo la distanza verticale.

.spazio bordi{
border-spacing: 5px 10px
}

1	2
3	4

Spazio orizzontale 5px, spazio verticale 10px

.bordi_collassati {
border-spacing: 10px 5px
}

1	2
3	4

Spazio orizzontale 10px, spazio verticale 5px

Colore di sfondo

background - La proprietà background imposta il colore delle singole celle, righe, e dell'intera tabella

.singola_cella { background:#FF0000
}

1	2
3	4

.singola_riga { background:#FF0000
}

1	2
3	4

.intera_tabella { background:#FF0000
}

1	2
3	4

Dimensioni e spazi tra le celle

Larghezza - La proprietà width imposta la larghezza minima della tabella.

.larghezza {
width: 150px;
}

1	2
3	4

Il valore di width può essere espresso in px (pixel) oppure come come percentuale (es. 50%).

padding - La proprietà padding imposta lo spazio tra i bordi e i dati contenuti nella cella.

.senza_padding {
}

1	2
3	4

Senza padding

.con_padding {
padding:8px
}

1	2
3	4

Padding assegnato all'elemento <table>

.con_padding {
padding:8px
}

1	2
3	4

Padding assegnato ai singoli <td>

Celle Vuote

empty-cells - I CSS permettono di nascondere le celle vuote. La proprietà acceta i valori hide e show.

.celle_vuote_mostra {
empty-cells:show
}

1
2	3

.celle_vuote_nascondi {
empty-cells:hide
}

1
2	4