't Bijstere spoor

't Bijstere spoor

A blog about Web development

A case for table-based design

"A topic that has been beaten to death."

Standards advocates have been largely against the use of the <table> tag. The idea is that it's used for positioning and design, while it really should only be used for real tabular data. HTML should be a document with semantic data, and not contain any presentation information.

So the response is that all kinds of new techniques are devised to easily make stretchable designs. I just got handed a template that uses one of these techniques, along with a couple of others. Here's a snippet:

I can't say I blame the author of this code. He's always been told <table>'s are evil, and I have no doubts many 'experts' will suggest techniques like this.

There's no doubt this could be made much simpler even without using the <table>, but there's no way we can expect every junior frontend developer to memorize "1001 css hacks to make divs behave as a table".

The truth is, very little html documents are parsed by anything else but browsers and search engines. If an application's data is also consumed by other clients it will almost always be done through some kind of API or standard xml/json document. Even if html was used as a transport format, it will most likely be a specialized format.

Keeping HTML pure for data and CSS for presentation is a bit of a pipedream that never worked out. Even if you look at a relatively simple application such as Wordpress, every theme will have it's own HTML template, and not just a separate css stylesheet.

The point of my story is: HTML is read by browsers and developers. If you can make a brilliant HTML document and still keep pixel precision more power to you, but please keep things legible for the future developer that might need to fix a bug.

The upshot

CSS3 has support for multiple backgrounds, which will eliminate the need a lot of these problems. Safari has already supported this for a while, and Firefox will get it with the 3.6 release, and opera in 10.5. This leaves the browser that shall not be named.


CSS "projection" media type

OperaShow

I tend to use Firefox pretty much all day, mainly because its such a great tool for development. Its hard to go without tools like Firebug when you're working on complex javascript applications.

Recently I have been more and more attracted to the feature-set of Opera. The latest gem I found was "OperaShow", which has apparently been around since the days of Opera 5 (they are on 9.2 at time of writing).

CSS2 defines the "projection" media-type, intended for use in presentations. Most of the same rules apply as with the "print" media-type. (CSS2 spec on paged media).

My next presentation will definitely be done using Opera and completely in HTML. I'd want to invite you all out to open up or download Opera, go to their tutorial and open up the fullscreen mode (F11 on windows).