Example: Tables v. Design

Most people who work with or around websites or web applications are aware of the mantra “Tables shouldn’t be used in design,” but I don’t think all of them understand why. To explain, I’d point you to a practical example: http://www.csszengarden.com/

The css Zen Garden is a great way to look at the power of separating content from design. Every page in the collection uses the same simple HTML page but achieves very different organization and style using simple CSS.

This wouldn’t be possible if you didn’t separate your design from your content. Using tables for layout exactly breaks this rule. A giant table that wraps your content to achieve three columns commits your page to a life of three columns with no hope of changing. (It should go without saying that tables have their place and their use…for building tables.)

Definitions: Markup, Style and Layout

It’s important to have clear definitions about the three components of web design. Some others may vary slightly, but I like to think of them this way.

Markup groups and annotates your content. For example, if a phrase is a heading, it gets marked appropriately. If two or three paragraphs are all related, they get grouped. If you have notes sprinkled throughout, each of the notes gets annotated in a similar way.

Style breaths life into your content by adding color, typography, background gradients, etc.

Layout is what defines the organization of your page. For example, three columns or two? Where should the header go in relation to the content? What about the footer?

In Practice: HTML, CSS and …

For markup, HTML is your tool at hand. If you use markup wisely, your HTML can read really well (i.e. make sense to a human) and offer insight into what content is important or related.

CSS is the style tool. If you want your headings to be big, read, and bold, then this is where you do it.

Layout is where things get cloudy. We don’t have a layout language that is standard. This is where and why people disagree with the table mantra described earlier. Without a real layout language, designers are left to hack together their own solution with a combination of HTML and CSS.

The Answer: Layout

Some designers choose to go with tables for layout, but as pointed out earlier, this is a bad idea because it makes your page very inflexible. I prefer to go with floating DIVs, although I’ll gladly admit that side effects of this method include headaches, shortness of breath and nausea.

One solution that designers are turning to is CSS frameworks, which typically take the form of CSS grids. A few of the more popular ones are the 960 Grid System, Blueprint and the YUI Grids.

These grid systems aren’t the final answer, they’re really just clever designers doing the best they can with the tools they have available. (For example, to make design changes you still need to go searching through your markup to change classes.) But they do make layout easier in the absence of a real layout language.