CSS display:table;

Una particolare regola CSS che permette di visualizzare dei box DIV con disposizione tabellare, probabilmente la soluzione definitiva per rimpiazzare le tabelle TABLE; senza un particolare posizionamento grazie alle varie regole display:table— le div con questa proprietà assumono automaticamente una disposizione tabellare…

La regola display table si divide in 8 differenti regole come table-row, table-column, table-header ecc…
Questo link su w3School approfondisce la regola display.

Mah…con piccole prove si può velocemente testare la regola e notare quanto sia più versatile e stabile di una TABLE, eppure sarebbe troppo bello rimpiazzare definitivamente le tabelle; infatti display:table non è supportato da IE fino alla versione 7, il supporto è stato poi introdotto dalla versione 8, per safari e firefox nessun problema (ecco la pagina che evidenzia il supporto cross-browser della regola).

Vediamo un esempio di codice:

<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>
<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>

.riga {width:300px;height:auto;display:table-row;}
.colonna{width:100px;height:40px;display:table-column;}

In questo caso visualizzeremo una tabella formata da 2 righe e 3 colonne per un totale di 6 celle.