The Tortoise & the Hare: Tables vs CSS for Layout

Goog Feed, CSS, General, Design    Comments (8)


First of all let me begin by saying, I am in love with CSS! For those of you who don't know, CSS is used to control the style and format of a web page. From one CSS file you can control the font attributes, layout attributes, table standards, etc... for an entire site, all in one spot! But I digress...

The reason for this post is to show the speed of CSS-based-layouts over table-based-layouts. Why should one go with CSS design when developing a website/web application? See below...

Pitfalls of Tables
  -  Less Accessible
  -  Harder to maintain visual consistiency
  -  Increased file sizes which eats bandwidth
  -  Much slower than CSS
Benefits of CSS
  -  Accessability
  -  Flexibility
  -  Functionality
  -  Lower Hosting Costs
  -  Efficient, Less Expensive Redesigns
  -  Better Search Engine Optimization (SEO) results
  -  Speed


Sample web layout used for this experiment.
Speed Test
But, for the moment let's focus on the overwhelming speed difference between the two. I created a sample web layout in Photoshop, and gave the file to a co-worker of mine (Doug Boude) who laid the design out with tables. I also took the file and laid it out with CSS, it took us both about 15-20 mins to lay it out in our given formats.

All of our images were the same size for this test and his HTML file was actually smaller than mine! I then uploaded the files to my server, which can be viewed here (CSS Layout and Table Layout) and ran them through a Web Page Analyzer at websiteoptimization.com, the results were amazing!

Results
The CSS-based layout was 33% FASTER than the table-based layout on a T1 connection, and 59% FASTER on a 56K connection.

The CSS-based layout had no "cautions" or "warnings". The table-based layout had a "Total Size Caution" and a "Image Size Warning" even though we used the same image sizes and same amount of images. The total size of the CSS-based page load was 14007 bytes while the table-based page load was 37593 bytes, a 62% DIFFERENCE!

Final Thoughts
Now, don't get me wrong, I like tables, I think they are very useful, but only in their proper place. They were designed for data display and I still use them for that myself if I have tabular data for instance that I need to display. But, for layout and design of a website / web application, there is no question that CSS is the way to go for many different reasons.

So, my final question to you is this... If someone came to you and said "I can make your website run 33% faster", what would you say???

*Speed results will vary depending on site content/layout. Not all results will be 33% faster, some will be less and some will be more.

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
That's pretty phenomenal results. Thanks for posting that.
# Posted By Ben Nadel | 4/20/07 11:38 AM
I've been thinking about running a CF Zen garden.
It would be specifically for showing off the kinds of styles you can apply to tables - not for page layout, but because so much of what we do revolves around displaying tabular data.

I think if people saw some really cool table styling techniques, it would dawn on them that tables are to be used for data, not page layout.
Styles like changing the row color onhover for example.

I would post a standard <cfquery> type of program and encourage people to come up with some clever table outputs.

Just one of those things that I might not ever get around to.
# Posted By Phillip Senn | 4/20/07 1:17 PM
Hi Joe - good idea to test this. I may be missing something, but when I ran the tests through websiteoptimization.com, the main difference seemed to be the images: in the CSS test, the websiteoptimization.com tool didn't recognize the headerBackground.jpg image in your CSS, and therefore didn't include it in it's calculations.

To get more accurate results, try the same test, but without any images in either page. My hunch is that the speed differences will be negligible after that... I'm eager to learn what you find out.
# Posted By Aaron Longnion | 4/20/07 2:40 PM
@ Aaron - Hey Aaron, first of all thanks for taking the time to check this out and give your thoughts. Technically I think you are right, but as we do know the key to showing that CSS-based layouts are far more efficient and quick is the fact that the .css file is cached in the browser to allow for the following pages to be loaded quickly and efficiently, while table-based layouts for the most part will reload page after page. Good point though.
# Posted By Joe Gautreau | 4/20/07 4:27 PM
@ Phillip Senn - There is a gallery a co-worker sent me this morning that is what you were wanting to do. http://icant.co.uk/csstablegallery/index.php?css=4...

I also was going to do a blog post soon about laying out tabular data in tables with CSS. Keep an eye out for it.
# Posted By Joe Gautreau | 4/24/07 11:45 AM
Interesting. Thanks!
There's all kinds of tags for tables,
th, td, tr, captions, footers, hover attributes...
Who better to specialize in table css than ColdFusion developers?!
# Posted By Phillip Senn | 4/24/07 2:31 PM
great job.Thanks!
# Posted By aelxx | 8/8/08 9:34 AM
The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.
# Posted By diseño web | 1/27/10 4:00 PM