Actual table Vs. Div table

Question

This

    

        
Hello
        
World
    

Can

Answer 1

In my opinion, the only reason to use divs are for styling and adjusting the layout based on browser size. If it isn't broke, don't fix it. Divs are easier to style though with css.

Tables: pros- you can get a very complicated layout exactly how you want it. More reliable. cons- tables get a little weird sometimes with complicated css styling. not good for responsible websites.

Divs: can adjust based on browser input, more flexible and easier to style.

Answer 2

It is semantically incorrect to simulate data tables with divs and in general irrelevant to performance as rendering is instant. The bottle neck comes from JavaScript or extremely long pages with a lot of nested elements which usually in the old days is 100 nested tables for creating layouts.

Use tables for what they are meant to and div's for what they are meant to. The display table-row and cell properties are to utilize div layouts more then creating tables for data representations. Look at them as a layout columns and rows same as those you can find in a newspaper or a magazine.

Performance wise you have couple of more bytes with the div example, lol :)

Answer 3

In first instance, I wouldn't worry about performance, but more about semantics. If it's tabular data, use a <table>. If it are just block elements representing a layout element, use <div>.

If you really, really worry about performance, then the answer would still depend on the client used. MSIE for example is known to be slow in table rendering. You should at least test yourself in different browsers.

If this worriness is caused by large data, then I'd consider to introduce paging/filtering of the data you're about to show.