Actual table Vs. Div table

Question

This

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

Can be done with this:

<div>
    <div style="display: table-row;">
        <div style="display: table-cell;">Hello</div>
        <div style="display: table-cell;">World</div>
    </div>
</div>

Now, is there any difference between these two in terms of performance and/or render speed or they're just the same?

Answer 1

The table wont be rendered until all its markup has been downloaded. While the individual divs will be rendered as soon as their markup is downloaded. I guess the total time will be the same, but the divs will give a perception of better performance and more responsiveness.

Answer 2

You really shouldn't worry about performances in table rendering. Even if there is one, you won't notice it until there are hundreds (thousands?) of tables to display. Use what you feel is more comfortable for you.

Answer 3

There are many discussions about this and div table usually gets the upper hand because of its flexibility in styling. Here's one link - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

But the cool one that I read so far was the comparison : http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 4

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.

Answer 5

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 6

If you are presenting tabular data, then you should use a table - it, and the related elements, have all the necessary semantics to represent a table of data. A mess of divs has none.

Answer 7

What I feel after reading stuff in above posts, Use Div for page layout and tables for data representation.