back to top

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

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

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à