DIVs vs tables

Which are faster?

[gcan]

More and more websites are using DIVs instead of tables, but it looks like websites with tables are loading much faster than websites with DIVs.

What do you think about it?

[Marshall]

This is a frequently discussed issue here. My personal opinion: it's not <div> vs <table> but what they contain insofar as speed is concerned. If you site has a lot of images, swf files, or the like, it is going to be slower no matter which layout method you use.

Marshall

[gcan]

Marshall,

Thank you for your answer.

2 big portals in my country changed their layout from <tables> to <divs>. Now it looks that these portals are loading much slower as before when they had <tables>.

I was thinking about changing layouts of my websites to <divs> because I have heard that in this case websites load much faster. All my projects are made with tables. To test this issue I made a dublicate of one of my websites using <divs> instead of <tables>. The same effect - new version is loading not so fast as original website with tables. Yes, this website contains a lot of images, but version with tables starts to load inmediately. When I try to open <div> version, it looks that this website "thinks" some time and then starts to load.

[phranque]

do you mean that it loads the page faster or do you mean that it starts rendering the page sooner?

[Marshall]

After reading posts and making posts here for nearly 7 years, I have to make this disclaimer: tables are not for the purpose of making a page layout. They are for the purpose of presenting data. That being said, tables versus divisions arguments generally revolve around this fact.

The only way to make a speed comparison table vs div would be to do a page with a table with one row and three cells, each cell containing one word. Then do a page with 3 div's floated in a row each with the same word used in the table cells. I seriously doubt you will see any difference in speed or rendering times.

The issue here has to do with how browsers render the page some do it better and faster than others. This, I believe, is the bottom line problem. However, tables are pretty cut-'n-dry. But divisions degrade better on smaller screens especially when they are floated. There is also the accessibility issue, but that's a whole other discussion.

There really is no right or wrong way. I always say whatever works for you. I find it funny though that when pages are generated through scripts like .asp or .php, they use tables. I am not saying divisions cannot be done this way, but more often than not, they use tables. From this, draw your own conclusion.

I can say this - the more you embed tables within tables or divisions within divisions, it will slow things down.

Marshall

[gcan]

phranque, probably pages with <divs> don't load faster when they start loading, but as I wrote in my previous post it looks like the browser "thinks" some time before starting to load content with <divs" layout.

Marshall, what do you mean with "bottom line problem"?

[dbdev]

If i am not mistaken, the difference is that a table has to load in it's entirety prior to displaying in the browser.

I'd like to say this year-over-year debate of tables versus divs is getting old.

THERE IS NO DIFFERENCE TO THE END USER.

Page load times have soooo many variables that come into play... divs and tables is just one small part. There are plenty of factors on both the server side and the client side that effect page load times, every time a page is loaded/called.

Use what you are comfortable with. Check your analytics. Are the majority of your visitors on cable/dsl? Then who cares about tables versus divs. Yes it mattered in the dial up day but thats done now. Besides a person on dial up rarely says "gee, this loads slow"... everything loads slow to them.

All this malarky about right and wrong ways is just that... focus more on usability and mine data from your analytics... look at your top percentiles for browser and bandwidth usage. If YOUR visitors are all on IE or FF with 75% on cable or dsl; this whole thing becomes a moote point.

Too many folks want to be authors of the "right way to design a website"... what a load...

/rant

[Marshall]

Marshall, what do you mean with "bottom line problem"?

That browser render differently. In the "old days," browsers were less compliant and making things cross-browser friendly was a real challenge. Using tables was (and still is) the easiest solution to this problem.

But dbdev is right, whatever works for you and your visitors is what matters - not what I or anyone else thinks.

Marshall

[rocknbil]

The argued logic is this:

If a table is the main structure of a page, the entire table from <table> to </table> must render before it displays. If this table is heavy with image elements, you may see a noticeable difference in page rendering.

If your layout uses divs and css, the elements load top-down and become visible before the entire page renders.

I haven't seen this in practice to a noticeable degree, but one thing I do know, a non-table layout generally contains a lot less data to transfer. The problem is this is often offset by bloated css. Finding a balance is precarious at best.

[kaled]

The algorithms required to render the regular structure of a table are certainly going to be simpler than for a freeform arrangement of divs that have been styled with float-this and float-that, etc. to create something similar.

CPUs are extraordinarily powerful these days so I would not expect there to be a significant difference in rendering speed once all the data has been loaded. However, the regular (and therefore predictable) structure of tables may be advantageous when rendering incomplete data.

I see nothing wrong with using tables to display data in a tabular fashion. In my humble opinion, those people who think tables are for dummies (or whatever) are probably not nearly as smart as they think they are. On the other hand using tables for page-layout does lead to untidy code.

Kaled.

[londrum]

if the browser knows the dimensions of the images (either from the HTML or CSS), then i don't see how it could be slower with divs.

if it doesn't know the dimensions, then i can see how tables would be faster. because it would quickly lay out the dimensions of the table first and then drop everything into the cells.
with divs, there would be nothing like that. it would have to download the images first before it knew the size of the divs.

it probably just seems slower though, because with tables it starts to drop the images in quicker. but behind the scenes, if you measured it, there probably wouldn't be any difference.

[MatthewHSE]

This is totally new to me. My experience in about five years (I think) of using CSS-based layouts is that div's always produce a page that renders faster than tables. The only thing I can think of is that you're using a massive CSS file on the div-based page and not on the table-based page. This could cause the browser to "wait" to render the page until it's downloaded the CSS file.

This would take a very large CSS file on a slow connection to be an issue.

[dbdev]

no matter which way you look at it all the packets must make the trip from the web server to the visitors browser...

it doesn't matter if you have a 1 meg photo in a div or in a table; the browser is going to download 1 meg worth of data... does your internet connection speed increase when you are visiting a page with divs and slow itself down when visiting a page with tables?

6 of 1... half dozen... you know the rest.

[gcan]

OK, thank you for information.