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