Advantages Of Using Tableless Layouts

by Gary on October 15, 2007 · 5 comments

in Website Design

Are you still using tables to create your layouts?

Well if you are there is nothing earth shattering about it, it’s just that by creating DIV-based, tableless layouts you not only create a web site with less source code, you also make it W3C compatible (The W3C guidelines recommend tableless layouts).

Why table based layouts after all?

Web designers who use tables to create the layout claim that table based layouts consume less time compared to DIV-based layouts and that they are more compatible. I totally agree with the compatibility thing. I’ve personally seen that table based layouts are easier to create and they easily look decent in all major browsers. But being easy does not mean being right.

The table based layout creates lots of junk code and you cannot separate design from data that you can easily do with DIV-based layouts, and in fact this is the main reason why tableless layouts are recommended these days. Provided you can understand how to place DIVs using the CSS definitions it is very easy to create tableless layouts.

The DIV-based layouts are also search engine friendly, that is, they’re good for your SEO because most of the layout related definitions exist in a separate CSS file and the main file is rendered quite light. I have come across some top ranking web sites created using tables but I think they have less competition and that’s why they rank at the top.

The best thing about the DIV-based layouts is that you can change the entire look of the web site by just changing the definitions in the CSS file. For instance if you visit CSS Zen Garden you will notice how quickly the entire design of a web site can be changed with the help of a single CSS file. Besides, provided you know how to control the various DIVs, your web design is more compatible with all devices that can browse the Internet not just the PCs. I agree it takes lots of effort to learn how to create DIV-based layouts with CSS, but once you learn the art, the effort is worth it.

By the way, if you have not already noticed Phoenixream uses a tableless layout.

Share This Post