For best performance: HTML Table or CSS?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
twospiritbear's picture

I managed to get Drupal 6.9 running on my site (hooray) and am now looking at constructing a theme.

The basic design spec for the theme calls for 21 cells of identical height and width, floating in three equally-spaced columns having a total width of 800 pixels.

Drupal gives me the choice of defining the basic layout with either a cascading style sheet (CSS) or an HTML table.

My big question relates to the performance of a template using an HTML Table vs. a CSS:

(1) Will Drupal serve a page faster with a layout having a CSS design, or with an HTML Table design?

A smaller question is:

(2) Will most browsers load a page layout with HTML Table page faster and more reliably than one with a CSS layout?

This is a question that I hope a programmer with knowledge of Drupal internals can answer. Thanks in advance for your help.

Comments

CSS

kaw3939's picture

CSS IMHOP will probably be faster, but the main reason for CSS is probably search engine optimization. A good CSS layout should be cleaner than most table layouts, if the table layout has table embedded within table within table. You probably need to make your own judgment on which one will be simpler, but I see no good reason to make a table based layout, other than it is simpler to make than CSS, if you don't know how to do it in CSS.

Absolutely CSS

brf123's picture

Hi Scott-

I agree with the above. CSS is the way to go. It will be significantly faster and lighter. The added benefit is that you will separate your content from layout. When you need to make a change to the presentation layer, you can do so it one file as opposed to many pages.

That said, it may take some work to be sure that the css based pages render correctly in all of your target browsers. If the layouts are simple tables then there shouldn't be too much of an issue. The more complex the layout, the more work you will have to put in to get the layout looking the way your design specifies.

All told, CSS is the preferred method. In fact, the only time I revert to html tables if for a strict presentation of data, and I rarely use it even then.

If you need a hand with theming or the css layout, feel free to continue to post or fire off an email. Glad to lend a hand where I can.

Brett

Not sure

yktdan's picture

The original question asked about performance on both the server side and the client side. I find it hard to imaging much difference server side, it is just interpreting a template and concatenating up a bunch of text and html controls in either case. My guess is that the actual number of bytes transferred across the net is comparable or slightly smaller for tables unless really deeply nested. I am told that browsers handle the css a bit faster at the client end. But I don't have a good reference - just seat of the pants guesses.

Thanks

twospiritbear's picture

Thanks very much.

Looking into this further, the WC3 is deprecating the use of tables for layout in favor of CSS, so if I want a site that's fully compliant, I have to use CSS. I can see the advantages of doing this, but was just wondering if there was a performance hit for doing it the "right" way. What I hear you saying is that there isn't. That's cool.

Tables will liekly be slower

robbiethegeek's picture

Tables usually contain a lot more markup and spacer gifs and the like so on a pure what gets served up table based is usually a lot heavier then a css semantically correct non-table based design.

Grid system

SLIU's picture

If your goal is to design (not just implement) the layout, perhaps what you need is a grid system. Here is a nice
five step tutorial covers many basic concepts.

Part 5 has a neat CSS template that can be used as a starting point (bookmark for myself :)

Sam