Table-based Layouts With Semantic HTML

While I currently work as a programmer, some years ago I created some websites from scratch, so I needed to learn web design. I used table-based layouts since it was the only option around. Now things have changed and CSS-based layouts are the best choice. While there are some things that can't be done with CSS, this technique allows to keep the HTML clean. There are thousands of articles around, I'm not going to rewrite what has been told even too many times. Actually, the limitations of CSS-based layouts are due to browser limitations, especially Internet Explorer not implementing CSS correctly. For example, the lack of support for min-width, and max-width makes it hard to achieve a fluid layout that enlarges only when needed.

Some limitations could be overcome using a table: tables resize very well according to content and they work consistently across browsers. That's why I decided to try a little experiment on my website: using a table to create the layout, but without putting it into the HTML. If you look at the HTML of this page, you see that it is quite simple (keep in mind that it is generated by a CMS, so it is not perfect, but I think it is quite readable). I apply a simple CSS to that HTML, which makes it look better, but without creating a layout. It's CSS1 essentially. Then, I use jQuery to create a table on the fly and move the content where I expect it to be. Layout-related CSS is contained into another CSS file. This allows to do other fancy things: for example, if I define that a page must have a right column, the table will contain another column and the layout will adapt automatically. All cells/rows/columns exist only if there is something to put into them. Additionally, I chose not to apply the table if the monitor resolution is low (this includes handhelds and mobile phones). Those users will see these pages without layout.

This could be an interesting alternative to CSS layouts, although there are some drawbacks. For example, if the HTML does not load fast, it is displayed without layout until it completes. That's why I've added a "loading" picture that you maybe noticed in some cases.

I think that "purists" will not appreciate, but anyway I will create some example files to be downloaded by everyone that finds this technique interesting. Before doing that, I want to complete the theme graphics, to make my site look nicer (current graphics are temporary, I was just too curious to try the layout). In the meanwhile, just look at the source of this page to see how it works.

Update: I removed the layout described in this article, not because of issues, but because I started using Artisteer to create my themes.

Comments are closed.