Imagine this HTML code:
<div>
<div>
<div>
First row, first column
</div>
<div>
First row, second column
</div>
</div>
<div>
<div>
Second row, first column
</div>
<div>
Second row, second column
</div>
</div>
</div>
... that will render something like this:
First row, first column
First row, second column
Second row, first column
Second row, second column
Tabelizing DIVs
By including this JavaScript file:
tiv.js and
Prototype into your page, you can automaticaly create a table from the DIVs.
Click
here to test this on the DIVs above.
(You can click
here to style the cells so you can see the table cells better.)
Flexibility
The cool thing about this table is that it is flexible, like a real <TABLE>.
You can test this feature by changing the text in the textarea below.
(tip: add more rows or type a long word, to stretch the cell)
Progressive loading
The main advantage of using this kind of tables is the fact that, unlike tables, it is visible while loading.
You can click
here to test this feature. It will load a new page that simulates a slow Internet connection.
Bookmark this page:
Del.icio.us,
Digg,
Furl