Una delle questioni più dibattute nell’utilizzo (di base) dei CSS consiste nel definire, attraverso i fogli di stile, l’aspetto di una tabella HTML e, più precisamente, come sostituire l’utilizzo degli attributi cellpadding e cellspacing del tag table.
Iniziamo col ricordare qual’è il compito di questi due attributi:
- cellpadding: definisce il padding interno ad una cella, cioè la distanza che separa l’effettivo contenuto della cella dal suo perimetro;
- cellspacing: definisce la distanza che separa le diverse celle tra di loro.
Se vogliamo agire su questi aspetti utilizzando esclusivamente i CSS dobbiamo stilizzare sia il tabìg table che i tag td e th.
Simulare cellspacing coi CSS
Per quanto riguarda il tag table faremo ricorso a due proprietà dei CSS che ci consentiranno di soppiantare l’attributo cellspacing. Le proprietà CSS cui faremo ricorso sono:
- border-spacing
- border-collapse
Se vogliamo replicare l’effetto di:
<table cellspacing="0" ... >utilizzeremo il seguente stile:
table {
border-spacing: 0;
border-collapse: collapse;
}Se, invece, vogliamo impostare uno spazio tra le diverse celle (in pratica cellspacing maggiore di zero) utilizzeremo il seguente stile:
table {
border-spacing: 10px;
border-collapse: separate;
}Simulare cellpadding coi CSS
Vediamo ora come sopperire all’utilizzo dell’attributo cellpadding. Per farlo andremo a stilizzare gli elementi cella della nostra tabella cioè i tag td e th. Se vogliamo riprodurre l’effetto di:
<table cellpadding="0" ... >useremo il seguente stile:
table td, table th {
padding: 0;
}Qualora invece volessimo impostare un padding interno alle celle della nostra tabella non dovremo fare altro che assegnare all’attributo padding un valore positivo, ad esempio:
table td, table th {
padding: 10px;
}