Convertire le tabelle HTML in CSS

Tramite questo articolo desideriamo spiegare come realizzare una tabella mediante codice CSS e senza l'ausilio dell'attributo table.

Foglio di stile

.table {
   width: 860px;
   border: 1px solid #ccc;
   text-align: center;
   margin-bottom: 20px;
   height: auto;
   overflow: hidden;
}
.tr {
   clear: both;
   background: url("table_background");
}
.td_left {
   width: 50%;
   float: left;
}
.td_right {
   width: 50%;
   float: left;
}

È importante notare che quando una cella contiene una maggiore quantità di contenuti rispetto a quella corrispondente nella colonna accanto, non è possibile avere due .td con la stessa altezza, come invece si otterrebbe usando le tabelle HTML.
Per fare in modo di avere una sfondo lineare, che suddivida perfettamente le due colonne, è quindi necessario assegnare uno sfondo al div .tr.

Codice html

<div class="table">
	<div class="tr">
		<div class="td_left">
	      <h2>Titolo della colonna 1</h2>
		</div>
	   <div class="td_right">
	      <h2>Titolo della colonna 2</h2>
	   </div>
	</div>
	<div class="tr">
		<div class="td_left">
	      <p>Il contenuto della prima colonna, riga 1.</p>
		</div>
	   <div class="td_right">
	      <p>Il contenuto della seconda colonna, riga 1.</p>
	   </div>
	</div>
	<div class="tr">
		<div class="td_left">
	      <p>Il contenuto della prima colonna, riga 2.</p>
		</div>
	   <div class="td_right">
	      <p>Il contenuto della seconda colonna, riga 2.</p>
	   </div>
	</div>
</div>