Tables, CSS and Separating Concerns

Over on Hacker News and Reddit there have been a series of articles posted about CSS frameworks and the debate between tables and css for page layout.

First a confession: I tend to prefer using divs and CSS for my layout. I’ve also used the Blueprint CSS framework for several sites.

The chief issue here is separation of concerns. In this case, programmers and designers hope to separate the format of the content from the matters of display and page layout. In the context of web pages, this is typically achieved via HTML and CSS.

However, starting with HTML as the content format is the beginning of troubles. HTML is not a pure content format. Despite revisions, it includes layout information and is directly interpreted by a web browser for display. CSS offers some tools for layout, but these are not complete nor fully implemented. You do not find many web pages that use nothing but div, span and anchor tags. For the SoC purist, the only real option is to begin with a completely display-neutral technology such as XML which in turn could be transformed via XSL into any format needed, be it HTML+CSS, PDF, RTF, and so on.

This is why the content and layout debate about tables and CSS is doomed. One cannot completely separate concerns using just these two technologies as they currently exist. What one can do is be pragmatic. Consider how the site is to be used. Is the content only to be presented on the web? What browsers and clients will access the site? Will the site redesign require reuse of the existing HTML design?

This reminds me of similar SoC and IoC (inversion of control) issues in software design. There is a distinct advantage to using these principles in writing software; however, they can also be easily abused and overused leading to ridiculous designs in which interfaces and factories are needlessly created.

Website design should similarly practice a You Ain’t Gonna Need It approach in which smart refactoring and iterative feature implementation ensure a pragmatic application of technologies to get the job done.