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?

Tables make layout possible, divs make it impossible. Tables make for readable, easy to understand code. Divs require loads of hackery and tricks not so easy to understand and even then the results are so so and full of unwanted behaviour. — Anderson, Jul 09 '13 at 11:32
If you're filling this table with DATA? Yea, use tables. Are you using it to LAYOUT your WEBSITE? ***DON'T*** **USE TABLES**! Div's are for website content/layout, tables are an antiquated element that has a sole purpose of laying out numbers/data really nicely. — Mike, Feb 03 '14 at 18:10

score 67 · Accepted Answer · answered Apr 11 '10 at 17:21

67

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 :)

answered Apr 11 '10 at 17:21

Ivo Sabev

5,230
1
26
38

3

and what do you say about responsiveness? because none of the table elements are remotely responsive except adding a horizontal scrollbar – PirateApp Jan 01 '18 at 14:26
2

@PirateApp do you mean responding to different screen sizes? Tables of data can also stretch or have contents wrap with the right styles. If it's an actual table of data - the only thing you should use for - that's what you want.
– MGOwen Jun 19 '19 at 00:58
As somebody who started html in the 90s, tables were the most common way to layout webpages. The problem with these is that they are only rendered once all the content was downloaded – not an issue anymore but on a 56kbps connection it meant pages were often slow to load. Divs, on the other hand, are rendered individually, so content would "stream" into view, as and when each individual div element was loaded. – ThomasHaz Feb 17 '23 at 06:41

score 15 · Answer 2 · answered Apr 11 '10 at 17:21

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.

score 6 · Answer 3 · answered Jan 16 '14 at 19:59

Just throwing in my two cents on the topic of performance. For small (under 100 rows, for example) tables, using DIVs wouldn't make much of a difference performance wise.

If you want to generate very long datasets, on the other hand, you hands down absolutely should use traditional HTML tables.

Brief Explanation:

This all spawned from my company's project, where I wrote a Javascript class to procedurally generate tables for me based on SQL data (it's a reporting kind of module). Anyway, I like DIVs so I wrote it to be DIV-based, much like the OP example.

After some horrendous performance (in IE8 particularly), I decided to re-write it using just tables since it's pretty simple tabular data, overall. Tables are, for whatever reason, about twice as fast on my machine in Chrome. The same is true for Safari.

That said, since I can't provide my work's code, I wrote a little benchmark thinggy that just let's you try either or methodology out. You'll see they're nearly identical, just one uses divs with styling to mimic the standard behavior of a table, and the other is just an old school table.

The only real difference is the type of element being generated, so that's about the only thing I can account for in the time delta. I'm sure it varies by browser, but it seems to me that table elements are just faster.

<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
    var table = document.createElement('table');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
         var row = document.createElement('tr');
         for(var b = 0; b < NUM_CELLS; b++)
         {
             var cell = document.createElement('td');
             cell.innerHTML = 'cell';
             row.appendChild(cell);
         }
         table.appendChild(row);
     }
}
else
{
    var table = document.createElement('div');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
        var row = document.createElement('div');
        row.setAttribute('style','display: table-row; padding: 2px;')
        for(var b = 0; b < NUM_CELLS; b++)
        {
            var cell = document.createElement('div');
            cell.setAttribute('style','display: table-cell; padding: 2px');
            cell.innerHTML = 'cell';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + ' seconds' );
</script>

the reason could be the `setAttribute` calls. Can you make a test that injects HTML? Also note you're measuring the creation speed, not the rendering speed. — John Dvorak, Jan 16 '14 at 20:03
Do you have any reason to believe that "injecting" the HTML would be somehow faster than just manipulating the DOM directly? Also, you'll note, I append the nodes as I make them, so you could probably say it measures both creation and rendering? — Dan H, Jan 17 '14 at 00:16
" I append the nodes as I make them" - this slows down things quite substantially. Instead, you should build the table first, _then_ append it to the document. Otherwise, each change that affects the document causes the browser to recalculate the layout _again_. What is the time difference if you build the table / faux-table first, then append it to the document once it's done? — John Dvorak, Jan 17 '14 at 05:53
No measurable difference that I can tell. The biggest difference in speed is indeed setAttribute. In futility, I tried changing it to direct assignment as opposed to setAttribute (so for example cell.style.display = 'table-cell';) and there's seemingly no difference. If I don't assign any styles to the DIVs it executes as fast as the tables -- which is expected since it's just creating tags like the table. On the other hand, if you don't apply styling to the divs it doesn't reproduce the table effect. — Dan H, Jan 17 '14 at 06:31
Hmm... another thought: if you set a `style` attribute as a string, it has to parse the whole value as CSS. Try setting `style.display` (to a string) and `style.padding` (in pixels if a number) instead. — John Dvorak, Jan 17 '14 at 06:34

score 6 · Answer 4 · edited Mar 02 '17 at 18:55

6

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

edited Mar 02 '17 at 18:55

Lawrence Dol

63,018
25
139
189

answered Apr 11 '10 at 17:20

Hanseh

717
4
17

3

I cannot access the link in this post, and would like to, as I am new to this topic and would like to use the ```div```-oriented techniques being discussed. Is there another reference I can use? – mherzog Mar 22 '21 at 14:37

deweydb · Answer 5 · 2013-03-17T13:00:38.447

4

I wanted to mention that if you use a table structure instead of div than users can hold CMD (or ALT in windows) to select a certain area of data from the table to copy. That data also pastes very easily into excel and other similar workbook programs.

edited Mar 17 '13 at 13:00

answered Mar 11 '13 at 14:45

deweydb

2,238
2
30
37

score 4 · Answer 6 · answered Apr 11 '10 at 17:17

4

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.

answered Apr 11 '10 at 17:17

Midhat

17,454
22
87
114

11

That is not true if `table-layout` is set to `fixed`. – Thomas Apr 11 '10 at 17:26
Legacy code I guess, even the smallest change in layout of website like Google is hard. People say - If it works don't change it. – Ivo Sabev Apr 11 '10 at 17:31
4

That is browser-dependent. Firefox will render the table progressively but IE will not. http://blogs.msdn.com/ie/archive/2005/02/10/370721.aspx – Dor Apr 11 '10 at 18:03
And how about the ``, `` and `` tags? I read somewhere that rendering of tables is being improved because modern browsers recognized and rendered first `` and `` contents – Ivaylo Slavov Feb 22 '12 at 11:00
1

@IvayloSlavov `thead` and `tfoot` are used mainly for printing where they are supposed to be displayed on the top and bottom of each page (if the table in concern is longer than one page). – tomasz86 Jul 09 '16 at 16:07

score 3 · Answer 7 · answered Apr 11 '10 at 17:18

3

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.

answered Apr 11 '10 at 17:18

mingos

23,778
12
70
107

score 3 · Answer 8 · answered Dec 15 '15 at 21:26

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.

Jay · Answer 9 · 2022-11-16T14:14:55.683

I know this is a really old thread. But it is the #1 result on google when people search "div vs table". I just want to add my 2 cents.

I am an old school PHP coder. I always tended to use table tr td when outputting data (particularly from sql). It seemed completely logical to render rows of sql data in rows of an HTML table. But I have recently changed my mind.

I now recommend div's because: 1. Table's just aren't flexible (at all). div's are completely flexible and customizable. 2. Flexbox (flex) makes it super easy to control layout in CSS (direction, wrap, etc). Layout rows of data in a column and individual data in a row - done!

Tables look like tables. Div's can appear however you want them to appear. Not to mention the issues with '<a href' links in a table. You won't experience any of that weirdness in a div. I was very slow to accept change. But IMHO div's are definitely the way to go.

score 1 · Answer 10 · answered Apr 11 '10 at 17:25

1

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.

answered Apr 11 '10 at 17:25

Grant Palin

4,546
3
36
55

score 0 · Answer 11 · answered May 08 '23 at 22:41

Yes, there is! If you are Ignoring SEO performance, div tag will render more quickly, around 30%, and that's critical for files with thousands of tables, tds, trs and ths

Check out this article that talks about Important differences between standard HTML tables and div tables

Actual table Vs. Div table

11 Answers11

Linked