Why CSS Should Be Used for Layout

11 Comment(s) | Posted February 03, 2009 by Joel Sutherland |

Joel Sutherland

Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.

Hacker News and Reddit have reopened the old debate between using tables or CSS for layout. It has been frustrating to see the one-sided nature of the discussion. Having worked directly with this issue for several years now, launched hundreds of websites and dozens of email campaigns, I'd like to address the issue with even-handedness. Here are the central points of debate against using CSS for layout.

1. CSS doesn't completely separate content from presentation

css zen garden

A central point of Ron Garret's "Why CSS should not be used for layout" is that CSS is flawed because you cannot rearrange the elements of an html document and maintain a consistent presentation. This is true, but it misses the point:

CSS is for styling documents. The order in which elements appear on a page has meaning in a document, to rearrange them changes the very nature of the document. CSS was not designed to work independently of the linear ordering of HTML elements. It makes sense that you would need to alter your CSS when you alter the flow of your document.
When a document structure has been decided, CSS can display it in any fashion. CSS Zen Garden is proof enough of this. Since IE 5 has fallen out of use, it is no struggle for an experienced designer to put a properly marked-up document into any layout.

The concession to be made here is CSS doesn't completely separate content from presentation. However, it is a logical fallacy to extend that concession to the notion that Tables are better than CSS or even that they are no worse. At present, the HTML and CSS duo is the solution with the least degree of coupling between a hypertext document's data and its presentation. This loose coupling enables flexibility.

2. There are no benefits to using CSS for layout

Without question the benefits of CSS have been overstated. That being said, there are a couple of well known benefits of CSS that are worth mentioning:

Context-sensitive Presentation – Using media types it is easy to apply different style sheets for screen, print and mobile devices. This multi-medium support is possible because of the loose coupling between HTML and CSS.
Maintainability - It is easier to make changes when your layout is described in CSS. Your html is cleaner when using CSS for layouts and generally your elements are well labeled. (
Better Accessibility - While it only helps a small audience, organizing your document based on its content rather than presentation helps those with screen readers.
The most complex designs are easier with CSS - As soon as a design requires multiple levels of nested tables, it becomes much easier to lay out the design using CSS.

3. CSS has a terrible learning curve

broken layout

This is without question, the fairest knock against CSS. All reasonable layouts require the use of floats, clears and other magic that just aren't as easy to grasp as tables. The slow browser adoption of display: table; is the only reason this discussion really has legs. When CSS based layouts are as easy as Tables there will be no reason not to use it exclusively. Instead, the decision must be made with some calculus.

Scenarios where the advantages of CSS based layouts are less clear:

You're not creating a document, you're creating an application. CSS was designed for documents. There are few, if any, semantic or accessibility reasons to do layout with CSS when the page is being built by Javascript.
You have a proper server-side HTML templates layer. When it is easy to maintain HTML site-wide, it is somewhat easier to manage a table based layout.
Maintainability is not a high priority. If you know a project will have a limited lifespan or will not need to be updated frequently, there is little benefit to using CSS.

It is important to note that once you've cleared the learning curve on CSS, you'll rarely find a reason to use tables for layout. While it is a challenge to learn the idioms of CSS layout, it is not a harder process inherently.

Conclusion

It is worth understanding the advantages that CSS gives for layout. In many situations they are very minor. A reasonable non-professional web designer that does not know CSS can safely choose to use tables to avoid a lot of headaches.

This doesn't mean professional web designers who know CSS and demand it be used are zealots. If you are in the business of laying out web pages, you should be doing it in CSS. There are enough proven advantages to doing so.

Categorized in: Development