Do I design with Tables or CSS?

| Home Page | Design Tips | What to Avoid | Fixed vs Relative Design | CSS vs Tables | Contact Me | Search Engines |


Another heated debate is using CSS (Cascading Style Sheets) instead of tables.

CSS support is still not widely supported by browsers and this is likely to continue for the foreseeable future. The question is how far do you want to go to cater for your visitors?

The biggest stumbling block for using just CSS for all the layout is most browsers will view the same pages differently. The solutions for one browser may then cause errors on another browser and so on. What would be a 30 second job with a table could take you days or weeks to achieve the exact same result in CSS and even then you'll find browsers that just won't like it. The decision to use or not use CSS should be based on how the client (or you) want your site to look. 70% of my sites use tables with CSS and the remaining 30% are in CSS only. I ask the client what it is they require and that makes my choices for me.

The most important and the most overlooked thing about CSS instead of tables is a web page designed using tables will often require everything to be loaded before it displays the page. Pages that have an outer table with positional tables inside it will more often than not require everything to load to display. In a CSS layout you have no such problem and you should notice your text loads instantly followed by the graphics.

If a client wants a 3 column site I will always use tables because designing the same thing in CSS to cater for most browsers takes such an unbelievably long time and your rewards at the end will still be browsers that fall apart on the page. Yes there are fixes for this browser and that but the end results are that your page will fall apart on some browsers no matter what you do.

Confusing isn't it? :)

It wasn't until Netscape 6 that it came close to interpreting the CSS in a way that made it possible to do a dynamic layout.

HTML was created as exactly that: a markup language. Its purpose is to identify the content of a document to the browser (i.e. to tell whether a block of text is a header, a paragraph, a list, etc.), but not to have any control over the layout or appearance of the page.

As the Internet became more advanced and the content evolved into more than plain text, designers wanted the ability to create more complex layouts similar to what is common in the desktop publishing world. HTML wasn't created for this so the designers had to find another way to achieve the desired layout on the site. The initial solution was to use invisible tables and, while the HTML table was never intended to contain the entire content of a web page, it solved the layout problem and the practice caught on. In fact, most of the pages on the web today are built using tables and nested tables.

What's wrong with tables?

Using tables solved the layout problems but it actually created more more problems than it solved. For example:
Tables are, for the most part, ridged in design, often don't adapt very well, and overrides user preferences. This problem is most noticeable for people that have special accessibility requirements.
With the advent of handheld and wireless devices, an emerging problem is the lack of graceful fallback for these and other devices that don't support tables.
They bypasses the browsers ability to display partially loaded pages because most browsers won't display a table until all the elements in it have been loaded. This leaves people with slower connections staring at blank screens for longer than they need to.

What about CSS?

Allow the designer to suggest a desired layout for the page without overriding users preferences.
Allows the user to override the suggestions as necessary for accessibility and usability requirements.
Degrade gracefully in browsers that don't support certain functions.
Maintains the separation between content and layout and allows HTML to do its intended job of content identification.

But remember that CSS is still not widely supported by all browsers!

What's the solution?

You need to decide how many browsers you cater for and what kind of design style you wish to use. Using CSS does not mean making a very simple site (like this one for example). You can make quite complex web sites using css alone. It just takes time and practice and a good understanding of browser quirks for various styles.

Don't worry about the CSS fanatics who believe the internet should be a table-free place. It won't happen anytime soon because there are too many problems that cannot be fixed in CSS without the fixes causing problems for other browsers. Decide for yourself, it's the best way!

| Home Page | Design Tips | What to Avoid | Fixed vs Relative Design | CSS vs Tables | Contact Me | Search Engines |

©1999-2004 Simon Day. All rights reserved.
You must NOT reproduce any of this content without my consent.
Valid XHTML Strict | Grade AAA Bobby Approved | Valid CSS | WAI-AAA Checked