back to top

Gestire i bordi delle tabelle con i CSS

In questo post vorrei ritornare su un concetto basilare dei CSS, ovvero la stilizzazione delle tabelle o, più precisamente, l’aggiunta di bordi alla tabella ed alla celle. Frequentando alcuni forum di settore, infatti, mi sono accorto che la questione è tutt’altro che elementare per molti neofiti dei fogli di stile e quindi ho deciso di scrivere questo semplice post nella speranza che aiuti a far chiarezza.

In HTML il "problema" può essere risolto molto semplicemente impostando il valore "1" (o altro numero maggiore di "1") l’attributo "border" del tag <table> (prassi deprecata dopo l’avvento di HTML5). Coi CSS la procedura è leggermente più complicata. Vediamo di seguito il pocedimento che, per semplicità, ho suddiviso in tre step:

1) Nel primo esempio applichiamo il seguente codice:

table {
  border: medium solid #00f;
}
Applico il bordo alla tabella

Come potete vedere, applicando la regola di bordo al selettore di tabella table si aggiunge un bordo al confine della tabella. Le celle interne no hanno, invece, alcun bordo.

2) Nel secondo esempio applichiamo la proprietà border ai selettori td e th:

table {
  border: medium solid #00f;
}
th, td {
  border: medium solid #00f;
}
Applico il bordo a tabella e celle

Gurdando l’immagine potete notare che ogni cella ha il proprio bordo che risulta essere "separato" da quello delle celle adiacenti.

3) Nel terzo esempio correggiamo questo aspetto; applicando la proprietà border-collapse (con valore collapse) al selettore di tabella possiamo imporre alle celle di condividere i bordi:

table {
    border: medium solid #00f;
    border-collapse: collapse;
}
th, td {
    border: medium solid #00f;
}
Applico la proprietà border-collapse di CSS

Nota: la proprietà border-collapse: collapse ha una resa grafica leggermente differente da browser a browser; in Firefox, ad esempio, il bordo risulta più sottile rispetto a Chrome e Safari.

Altri contenuti interessanti

Pubblicità

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicità