Come funzionano i valori delle tabelle per la proprietà  CSS display

I valori delle tabelle per la proprietà  CSS display risalgono ai CSS 2, ma solo recentemente sono divenuti popolari grazie al supporto di Internet Explorer introdotto dalla versione 8. Tuttavia questi valori sono poco conosciuti e ancora oggi per costruire griglie si utilizza ancora la sola proprietà  float. Vediamo in dettaglio questi valori.

La prima cosa da tenere presente è che quando si utilizzano questi valori si crea un contesto di formattazione tabellare. In altre parole, i browser applicheranno tutte le regole previste dalle specifiche per le tabelle CSS.

Creare una tabella da un div è semplice:

#wrapper {
    display: table;
}

Ora il nostro elemento non è più di blocco ma è una tabella. Possiamo quindi usare la proprietà  table-layout per definire come verranno calcolate le dimensioni degli elementi (il valore predefinito è auto):

#wrapper {
    display: table;
    table-layout: fixed;
}

In una griglia ci sono ovviamente le righe, che corrispondono alle righe di una tabella. Per questo scopo possiamo utilizzare il valore table-row:

#wrapper div.grid-line {
    display: table-row;
}

Questo valore è fondamentale perchè funge da wrapper per i blocchi all'interno delle righe che, nel nostro caso, diventeranno delle celle grazie al valore table-cell:

#wrapper div.box {
    display: table-cell;
    width: 33.3%;
    padding: 0 1em 1em 0;
}

Il problema con le celle è la spaziatura. Infatti le celle di una tabella non hanno margini. Si può ovviare utilizzando la proprietà  border-spacing sulla tabella:

#wrapper {
    border-collapse: separate; /* default/richiesto */
    border-spacing: 0 1em 1em 0;
}

Nelle celle possiamo gestire l'allineamento verticale degli elementi usando la proprietà  vertical-align:

#wrapper div.box {
    vertical-align: middle;
}

Da tenere presente un fatto importante: il layout di una tabella determina la gestione della larghezza delle sue celle. Il valore auto determina una larghezza elastica che si adatta al contenuto, mentre il valore fixed forza i browser ad adattare il contenuto ad una larghezza specificata.