Tables: The Next Evolution in CSS Layout is Now

After reading an excellent article at Vitamin about using CSS tables and how it will be next evolution for design once IE 8 is released. But I think we already should start using it, because with the help of jQuery, we can easily modify the DOM to emulate the CSS tables in IE 7 and below.

The trick is to replace the CSS table elements to real table elements for IE, which can be very easily done and the results are amazing. See my example.

Actually the code convert the elements to tables is the following:

$(document).ready(
function() {
// check for ie (it would be better to check for IE version too in the future)
if( jQuery.browser.msie){
// update the cells....
$('#container > div > div').each(
 function(){
   $(this).replaceWith('<td class="'+$(this).attr('class')+'">'+$(this).html()+'</td>')
 }
);
// update the rows
$('#container > div').each(
 function(){
   $(this).replaceWith('<tr>'+$(this).html()+'</tr>')
 }
);
$('#container').replaceWith('<table id="container_table">'+$('#container').html()+'</table>');
}
}
);

What the code actually does is converting the div elements containing the display: table-cell to td elements and the same for row (to tr elements) and finally the container div to a table.

To be honest, I am amazed with the results myself and for now on I will start using this technique for all my projects.

See below for the screenshots (as you notice, they all look the same)

Firefox:


Safari:


IE 7:


Of course what I have done here is a quick test whether it was possible. The code I have presented is just an idea and it can be optimized and generalized for common use.

Good luck on using the CSS tables!