<?phpMonster

Le tabelle HTML… queste sconosciute e, in alcuni casi , totalmente abbandonate dagli sviluppatori web!

Personalmente le reputo mooolto comode e pratiche da gestire.. spiegatemi perchè non devono più esistere nei siti!!

Ad ogni modo ecco una soluzione per avere a disposizione una tabella HTMl creata unicamente con css e div

Qualcuno dirà sicuramente che ho scoperto l’acqua calda… può essere! ma del resto,  se c’è sempre qualcuno più avanti di te, c’è sicuramente qualcuno più indietro di te!

Ecco il trick …

il css sfrutta esclusivamente l’attributo ‘display’ che supporta i valori di

• table     sarà il div che funge da table (tag <table>)
• table-row      sarà il div che fungerà da riga di tabell (tag <tr>)
• table-cell     sarà il div che fungerà da cella (tag <td>)

Ecco quindi il codice css

/*tableless solution to obtain a table structure using divs*/
.table{display:table;border-collapse:collapse;width: 100%}
.table > .table-row {display:table-row}
.table > .table-row > .table-cell{width:auto;display:table-cell;}

ed il codice HTML

<div class="table">
<div class="table-row">
<div class="table-cell">cella 1</div>
<div class="table-cell">cella 2</div>
<div class="table-cell">cella 3</div>
<div class="table-cell">cella 4</div>
</div>
</div>

L’ annidamento dei div rispecchia esattamente quello di una tabella html, ma con una piccola eccezione:  nella tabella DIV non dobbiamo utilizzare l’attributo  ‘colspan’ per ottenere lo stesso effetto che volevamo sulle tabelle HTML standard. Basterà semplicemente giocarsela con lo stile ‘width’ !

Ma non bisogna perder la compatibilità e nel caso specifico di IE7 bisognerà correre ai ripari.

Con questo semplice fix css

<!--[if IE 7]>
<style type="text/css">.table-cell{float: left}</style>
<![endif]-->

si potrà rendere compatibile il nostro layout anche con IE7