Tabelle, gestione di cellpadding e cellspacing coi CSS

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Quante tabelle usi nel tuo sito? Molte, a prescindere dal fatto che il design delle tue pagine sia o meno table-less. Per cui, ogni volta che crei una tabella, quante volte devi ripetere i comandi cellpadding e cellspacing impostandoli (presumibilmente) a zero? Molte, altrettante quante sono le tabelle che compongono le pagine del tuo sito.

Grazie ai fogli di stile possiamo risparmiare codice: vediamo dunque come gestire cellpadding e cellspacing coi CSS, evitando quindi da ora in poi di dover scrivere ogni volta:

<table cellpadding="0" cellspacing="0">

bensì, semplicemente:

<table>

Vediamo un esempio di codice HTML:

<table>
    <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
        <td>Cella 3</td>
    </tr>
    <tr>
        <td>Cella 4</td>
        <td>Cella 5</td>
        <td>Cella 6</td>
    </tr>
</table>
<div>Testo sotto alla tabella...</div>

Abbiamo creato una tabella con sei celle, tre in orizzontale su due righe, aggiungendo sotto un testo che sposteremo di "tot" pixel più in basso, in modo da non "attaccare" gli elementi e rispettare le spaziature del nostro sito.

Vediamo come gestire il tutto coi CSS:

table { border-collapse: collapse; border-spacing: 0; margin-bottom: 10px; }
td { padding: 0; }

Impostiamo alla tabella gli attributi border-collapse e border-spacing (impostando, rispettivamente, i valori collapse e zero a numero), quindi gestiamo il margine inferiore.

In seconda battuta, gestiamo il padding delle singole celle a zero. Nulla ci impedisce di assegnare una classe a determinate celle che desideriamo abbiano spaziatura interna.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (43.222)

:: Referenze dei fogli di stile Css (41.354)

:: Menu ad effetto mouseover con i Css (38.148)

:: Effetti sui link con i Css (27.364)

:: Testo verticale coi Css (19.214)

:: Angoli smussati in un box coi Css (18.509)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.734)

:: Box con effetto ombra con i CSS3 (15.453)

:: Stilizzare i form Html con i Css (15.219)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (14.888)

IN EVIDENZA
DOWNLOAD