Come creare una tabella con i DIV e il CSS

Vediamo come realizzare una tabella utilizzando solamente i DIV ed il CSS

In molti progetti mi è capitato di dover realizzare un layout a colonne.
In passato veniva utilizzato l’elemento html TABLE, ormai sostituito, per ordine (alcuni dicono per cause SEO e di performance) dall’elemento DIV.

Di seguito una guida su come realizzare una struttura a tabella utilizzando solamente DIV e CSS, in maniera molto semplice.

Per fare questo, non ci serve altro che utilizzare l’attributo CSS display:

• display: table
• display: table-row
• display: table-cell

La funzione display table è supportata da qualsiasi browser (Chrome / Firefox / Safari) e da Internet Explorer dalla versione 8 in poi.

Per realizzare la struttura a tabella iniziamo con il codice CSS:

.tabella {
	display: table;
}
.riga {
	display: table-row;
}
.colonna {
	display: table-cell;
}

Passiamo poi al codice HTML:

<div class="tabella">
	<div class="riga">
		<div class="colonna">Colonna 1</div>
		<div class="colonna">Colonna 2</div>
		<div class="colonna">Colonna 3</div>
	</div>
	<div class="riga">
		<div class="colonna">Colonna 1</div>
		<div class="colonna">Colonna 2</div>
		<div class="colonna">Colonna 3</div>
	</div>
</div>

Il risultato è il seguente: