HTML permette di gestire delle tabelle all’interno di un documento utilizzando il tag <table>. Anche questo elemento può essere ampiamente personalizzato con l’uso dei fogli di stile CSS. In questa guida introduttiva vedremo le proprietà dei CSS che possono essere utilizzate nella gestione delle tabelle.
Uso dei CSS con le tabella
Il tag <table> è stato introdotto fin dagli albori di HTML e per un lungo periodo ha trovato impiego anche come strumento di impaginazione dei contenuti. Con l’introduzione dei fogli di stile CSS e del box model in particolare questo genere di utilizzo è ormai desueto e le tabelle trovano impiego quasi esclusivamente per la presentazione di dati ed informazioni in forma, appunto, tabellare.
In un foglio di stile CSS la parte dedicata alle tabella avrà quindi una struttura di questo tipo:
table {
proprietà-1: valore-1;
proprietà-2: valore-2;
...
}
Come al solito quindi andremo a definire una o più proprietà ciascuna delle quali associata ad uno dei suoi possibili valori.
Proprietà CSS per le tabelle
I fogli di stile CSS prevedono 5 diverse proprietà associate specificamente alla tabelle:
- border-collapse: definisce il modello per i bordi delle celle e della tabella nel suo insieme.
- border-spacing: interviene sulla spaziatura dei bordi.
- caption-side: definisce la posizione del titolo da assegnare ad una tabella.
- empty-cells: definisce il comportamento grafico della tabella per le celle vuote.
- table-layout: imposta il layout della tabella con dimensioni che possono essere fisse o proporzionali.
Alle tabelle è inoltre possibile attribuire proprietà generali dei fogli di stile. Ad esempio la proprietà background-color può essere utilizzata in una tabella per definire il colore dello sfondo.