The Great Debate: CSS vs Tables

Sep, 23, 2009 | Support, Webmaster | 9 responses

A big debate hit the design world some years back, and it still appears to be quite popular today when doing a quick search on the subject. While most designers have put their face forward into the world of CSS for their designs, there are still a number of designers and individuals reliant on the HTML table format for website layouts. In choosing sides, we have prepared a post with some reasons why the CSS design technique is typically preferred these days over the traditional table based one.

CSS Benefits Over Tables

CSS stands for Cascading Style Sheet and is a way to create the overall design and layout of a website. It stores the majority of the code in an external style sheet, keeping your pages’ markup language to a minimum.

Faster Load Times – Since there is usually less code on the pages of your website, load times are greatly enhanced. Also, since the style sheet is generally cached the first time the website is loaded, consecutive page loads will happen at a much more rapid rate as opposed to the table layouts, which have to be reloaded for each page. Even though this extra bit of slowness may seem trivial, it could actually mean the difference between someone sticking around for the content, or not.

Decreased Bandwidth Use – Because the .css file is only downloaded once and cached, using CSS can help you use less server bandwidth. If the HTML markup for each page on a 100+ page website had to be reloaded by web visitors, it could potentially cause you to need a larger package of web hosting, thus costing you more money.

Easier Maintenance – With CSS, the majority of the site’s design is laid out in the stylesheet. Therefore, instead of updating heaps of pages to change the size of a content box, for example, you only have to update one line of code (potentially) in the CSS style sheet. CSS creates a means for easy website upgrades or overhauls, and it also helps create a better environment for websites maintained by multiple users.

Website Consistency – As with easier maintenance, the ability to control the design aspects of every page in your website from one location allows for better website consistency. Imagine needing to update the size of a new logo image on every single page of your site individually. The task at hand, repeated over and over, can be a cause for human error, leading to pages that might be a little “off” or overlooked.

Increased Design Possibilities – Tables provide for very modular layouts which can be limiting (and boring!) in the design aspect. CSS, however, allows for complex image placements to create a truly inspirational design that’s not stuck in a box format. The most creative individuals can do more with CSS, and you can benefit more from its visually appealing features.

Meets Web Standards – If a website is being built in a table layout, there may be many deprecated tags being used, according to W3C standards. In the future, deprecated tags will not be released in versions of HTML and XHTML and could cause viewing issues. CSS, on the other hand, will help a website meet current web standards.

While we still feel that tables are best used to present tabular data within a website, we still have to side quite firmly with CSS being the website design method of the future. If you care about your website’s speed, consistency, cost or maintenance capabilities, you will most likely be running to our side, too. And, who can blame you? The health and well-being of your website is of utmost importance these days.

Comments

Comment Posted By: elton

I think your missing one side of the debate. But it’s not really much of a debate any more is it?

Comment Posted By: Digital Pacific

Hi Elton,

It is a debatable issue, but our post was meant to explain the benefits of CSS over tables.

You’d be surprised the number of phone calls we receive asking about tables in web design, so we wanted to touch on the subject for those, especially our customers, who are unsure about their web design methods.

If you have any points to add, please do 🙂

Comment Posted By: Jacek

Sorry, I find CSS layout horribly illogical and complex. Tables all the way.

Or I’d use something like jQuery UI.layout for a Javascript-based layout.

Comment Posted By: JohnONolan

I agree with Elton – and the debate ended a few years ago now I think.

Comment Posted By: Sam

I thought the “debate” part of this debate was over, with tables suffering a crushing defeat. Every web design professor I had in college said, “If you use tables for anything other than tabular data, I will hurt you.” It seems like laymen and novices are the only ones to think of tables as acceptable, let alone better, for layout, while advanced designers/programmers use CSS.

It’s like saying there’s a debate between Biology 101 and Biology 701 students on the function of some part of a cell. The Biology 101 students are only holding their position because they don’t know any better.

Comment Posted By: Dimitris

Oh please! When are we going to stop putting tags on people? This mentality is so wrong. There are “advanced developers” who prefer to use tables on occasion and whenever it makes sense to so.

Comment Posted By: Igor

Tables are still the way to go in email templates design, don’t you agree?

Comment Posted By: Matt

The debate was dying when I got into webdesign
“and it still appears to be quite popular today when doing a quick search on the subject”

Quick search? You’re making yourself sound kinda bad, like a tacky journalist who does half-assed research… or makes their own up.

I agree that css is the best, I’ve been using it and it just simply makes sense, it’s easy and it just makes life quick, professional and easy.

However you didn’t think that you can integrate the two. You can have a table base structure if one preferred and have it still stylized with an external css file. Which is what I use to do when I was in the in between stages of leaving tables and being introduced to CSS (and yes it’s valid by the W3C standard)

“Tables provide for very modular layouts which can be limiting (and boring!) in the design aspect. CSS, however, allows for complex image placements to create a truly inspirational design that’s not stuck in a box format. The most creative individuals can do more with CSS, and you can benefit more from its visually appealing features.”

Not necessarily true. It’s just a matter of thinking outside the box and figuring out illusions to make a layout in tables visually stunning. Some of my best designs were done in tables and they were beyond modular. It’s just a matter of creativity and mind over matter.

I’ve also been seeing some over the top css designs now that just make sites look like rubbish and not very user friendly, don’t forget less is more. I’m worried that because CSS is more ideal and easier now we’re gonna see some pretty bad trends of it being abused design wise.

Comment Posted By: Jennifer

CSS verses Table Layout

I’m really struggling with whether to learn and use CSS for layout. I’ve been a designer for over 20 years and been using tables for layout for 13 years. Most of the sites I create are for small businesses averaging around 10 – 60 pages. (10-20 is most common.) I really like using CSS for formatting text, lists, positioning, etc. In my opinion, combining table layout with CSS works great. I’ve read the debates. I’m not questioning the benefits of CSS in general. I use it and love it. What I’m trying to figure out is the benefits in using CSS for LAYOUT. Here are my questions…
CSS Layout Advantages:
1) Easier Site-Wide Changes – CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver Template files. I make a change to the template file and boom, it changes on all pages. What’s the difference?

2) Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup. I can’t tell any discernable speed difference between a table layout and a CSS layout’s load time. (Yes, I like clean code too.) Heavy image use and Flash still seem to be the biggest factors in speed. If the human eye can’t tell any difference, then what’s the point? And server space/bandwidth doesn’t seem to be an issue anymore either. Space on the server for all of my client’s sites is generally 1/16 of capacity.

3) SEO – From what I can tell, search engines aren’t indexing or ranking CSS layouts higher than table layouts. The algorithms used for ranking most often are content and inbound links. The spiders are highly efficient at discerning code from content. So what difference does it make?

4) Separation of Style and Content – I guess this one is related #1, ease of updating? This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

5) Greater Consistency – If you use template files and CSS, where is there inconsistency?
Disadvantages to using CSS for layout
1) Inconsistent Browser Support – Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features. This is no small drawback!! It’s huge. I fought this very same battle using tables back in the 90s. Different browsers rendered the design differently. I really resented (and it sounds like many of you do too) all the time I had to spend to get a site to look as it was intended for ALL users. I REALLY don’t have any desire to fight that battle again. I know there are workarounds. But again, if I don’t see the overwhelming benefits, I won’t don my armor or sharpen my weapons.

My questions and concerns are genuine and not an effort to get CSS lovers to defend themselves. If you are designing using CSS for layout, cool! You are a part of an ever growing majority. Personally, if I could instantly convert a design into HTML, I’d do it. I have no great love for code. Right or wrong, I LOVE spending most of my time designing. The rest is a necessary evil to get the design into the medium. So if you feel strong emotions regarding CSS layout, don’t respond. If you get where I’m coming from, please help me understand using logic.

Jennifer

Leave Your Comment








x AU Domains

Secure your brand name with Australia's newest domain.

Browse The Full Site On Your Desktop