Blog

Tableless design…

While ago, about 5 years, when I started developing web applications for a small company called Widesolutions, I was introduced to tablebased design. I rembember my opinion was and is that it is simple and it makes sense. Today, I think exactly the same with a few more ideas.

Layers, or divs, can do most of the same things that tables do, but they lack somethings that most pro-tableless people don’t notice or don’t bother to say. There are a few that bother me more:

  • Code organization – While at first one can think layers allow better code organization because you can separate each thing, layers allow you to do something that recalls me of old-Basic code. Spargetti-code. With tables you can’t place a row outside that table, so it imposes you some structure, not the best one, but one where you know where to look at when you need something – this is specially helpful when using a WYSIWYG.
  • Scaling – While scalling a table is something very easy like setting up its dimensions in percentages, doing the same with layers can be a perfect nightmare. Yeah, possible, but allowing a simple site to work on all resolutions can be very difficult and time consuming, depending on the site complexity.
  • Relations – There are no relations between layers, you can for instance setup a layers height based on another one. The only solutions are to setup both layers with the same height (and make sure your content keeps short) and to use javascript. Note that neither (x)html or css have a solution for this. One third way is to place the child divs inside a parent one, but thats not always possible and it would be going against the code organization flag of tableless masters…

One specific case that had caused me a lot of trouble recently, is that absolute positioned elements don’t count for a parent’s dimensions calculation. While thats pretty nice for most design uses, there are some where that doesn’t help. You can use relative positioned elements in there, thats true, but one of the most frustrating things about layers is that they’re always thinking you have complete control of the code beeing rendered. You don’t.

The funny thing is that much of the things I talked here are usually solved with resource to complex (very specific) CSS and Javascript solutions. Whats the problem? The problem is that while CSS and x(Html) are almost inseparable mates, because HTML actually makes use of CSS, Javascript is not. Plus, were is the design-logic-data separation if the designer needs to think about the data size, the design to implement and the javascript to make it work.

Far from perfection, html and tableless designs, don’t help programming. They are based on the assumption that you control everything and thats not true, some code is third party. Working with tableless designs is keeping things disorganized and much more complex to handle. But, it doesn’t mean you need to use tables for everything, just use common sense.

Remembered one thing, one of the other reasons that tableless people talk about to advocate it, it that tables are much more “verbose” and require more code. Most of the time this is true but not always. This is a Html/Xml problem and not a concept/layout thing and if you need to reduce your html file size, there are better ways than to sacrifice development time and fun.

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit Post to StumbleUpon

Leave a Reply

For spam filtering purposes, please copy the number 3350 to the field below: