Exista unele situatii cand ai nevoie de o structura tabelara, dar esti obligat s-o faci din DIV-uri (a lucra pentru un tip ca mine poate impune uneori si situatii de-astea aparent absurde 😀 ). Ce faci atunci?

Poi… DACA FOLOSESTI FF, atunci poti sa reproduci structura tabelului, doar ca in loc de

< table >
  < tr >
    < td >
    < / td >
    < td >
    < / td >
  < / tr>
  < tr>
    < td >
    < / td >
    < td >
    < / td >
  < / tr>
< table >

o sa scrii ceva de genul

< div class = " table " >
  < div class = " tr " >
    < div class = " td " > < / div >
    < div class = " td " > < / div >
  < / div >
  < div class = " tr " >
    < div class = " td " > < / div >
    < div class = " td " > < / div >
  < / div >
< / div >

…iar mai departe o sa te asiguri ca definitiile celor trei noi clase vor contine urmatoarele proprietati:

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
De ce? Pentru ca, setand proprietatile astea, latimile coloanelor se vor transmite in sus/jos exact ca intr-un tabel normal.
Dezavantaje:
1. treaba asta nu permite merging-ul (lipirea) de celule… cu alte cuvinte, colspan si rowspan ies din joc la abordarea asta.
2. codul html in mod cert rezulta mai lung
3. alinierea pe verticala este specifica doar celulelor de tabel real, cu abordarea asta deci o sa ai ca default numai valign=top;
4. proprietatile CSS din exemplul asta NU sunt suportate de IEx… nici nu stiu daca asta e un dezavantaj sau un avantaj 😀
Avantaje:
1. un mai bun control asupra celorlalte aspecte de design, prin CSS (nu mai e nevoie sa setezi float-left-uri ca la balamuc pentru div-urile astea, si nu-ti vor mai “sari” din rand din cauza continutului)
2. folosind abordarea cu DIV-uri poti implementa apoi lejer tot felul de minunatii drag&drop din familia AJAX.
O lista completa a proprietatilor CSS din familia TABLE-lor gasesti aici:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

Pentru o documentare completa, mergi aici.