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

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 🙂