DIV vs TABLE render times

[The alMIGHTY N]

We are redesigning our website and my manager and I engaged in a debate
which included, among other things, whether to stick with tables for
structuring the website or use more DIV tags. I'm a proponent of doing
what works for the particular case, but I was interested in finding out
more about something he said. He claims that tables render much faster
than DIVs which sounded odd to me, considering how many people say that
DIVs render much faster than tables.

Is there any research that shows one being faster than the other (or,
for that matter, neither really being signficantly faster)? Is
rendering speed linked more to the size and complexity of the page?

 

[Martin Jay]

We are redesigning our website and my manager and I engaged in a debate
which included, among other things, whether to stick with tables for
structuring the website or use more DIV tags. I'm a proponent of doing
what works for the particular case, but I was interested in finding out
more about something he said. He claims that tables render much faster
than DIVs which sounded odd to me, considering how many people say that
DIVs render much faster than tables.

Is there any research that shows one being faster than the other (or,
for that matter, neither really being signficantly faster)? Is
rendering speed linked more to the size and complexity of the page?

I don't know if there is any research.

Modern day computers are fast, and I doubt many people would notice any
difference between the rendering of tables and DIVs.

Like for like, IMO a page made of DIVs would probably have a smaller
size and download quicker. And would probably render quicker because
the browser doesn't have to do so much hard work making table and
contents fit each other.

I use a fairly slow 450mhz Windows Me during development. I can usually
tell whether a page is table or DIV based by the speed and way it
renders. To me tables seem slower.

 

[Andy Dingley]

We are redesigning our website and my manager and I engaged in a debate
which included, among other things, whether to stick with tables for
structuring the website or use more DIV tags.

Agree with him. He's obviously so far from having any sort of Clue that
there's just no point in arguing.

He claims that tables render much faster than DIVs

I have no idea, and I care even less. Rendering is effectively
"instant", so just how instant it is is irrelevant.

There are two sorts of significant variation you do see in rendering.
One is an inability to render a partly downloaded page, until the whole
thing has arrived. This was mainly an issue for slow connections and
it's also made much worse by using <table>s. Older browsers often didn't
render a table until they received the closing tag for it.

The second issue is when a layout re-flows after more content appears.
This is typically seen with columns and absolute positioning, or when
images influece element positioning but didn't have their sizes set in
the HTML. If you have static banner or logo images, it's worth setting
their size in the HTML: code.

 

[Nije Nego]

Is there any research that shows one being faster than the other (or,
for that matter, neither really being signficantly faster)? Is
rendering speed linked more to the size and complexity of the page?

It would be best to do your own ressearch - make two page layouts, one
using tables, and one using css.
If used proper, css (div layout) should produce at least 30% smaller .html
file.

 

[atomicdawgg]

I can't believe how unhelpful some of the above posters were!

There are *many* and *important* arguments for prefering DIV layout over tables.

- Speed increase; yes tables do take longer to render and at times the interface can feel sluggish because of poor design. (I'm seeing this problem in one of my current client projects, and I'm testing on ahigh-end ex-gaming PC)

- Cross-browser support; do your safari or Mozilla users see the same thing as I.E. users? You'll find this much easier to accomplish with DIV's and styling.

- Readability; this is just my experience, but DIV-based layouts tend to be better planned, with more semantic structure. I enjoy working with them more than i do searching through stacks of messy tables with col/row-spans.

- Accessibility; if you need to implement accessibility for some reason you'll need to use DIV's for layout and tables only for tabular information.

Hope you can convince your boss!

 

[kartik sehgal]

Use Divs for layouts / structure and Tables for tabular data

As per the W3C standards, tables are not meant for creating layouts. They are essentially meant to list tabular data. However, if you want to list a lot of tabular data and find that it it slow in rendering, check out the following post:

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

For layouts, W3C recommends that we use DIVs. For this purpose, in CSS3, new options have been added in the display attribute for divs like table, table-row, table-cell, etc. This approach is much neater than float left and right that is being used currently. The downside is that, CSS3 is not supported by IE6 and IE7. So if your target userbase is using one of these two versions of IE, CSS3 is not the way.