Formattare le tabelle coi CSS: definire cellspacing e cellpadding coi fogli di stile

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