Website layout with HTML tables versus CSS

For a long time it´s been a common practice to use HTML tables to design a website´s layout. But in a HTML purist´s view, this technique is deprecated (and always has been), because HTML tables are meant to organize content in a tabular format ( see calendar in the right column, for example ) and today, CSS (cascading style sheets) give web authors the possibility to create sophisticated website layouts.

I agree that most of the styles on a webpage should be done in CSS, defining the style rules in an external style sheet. This way, your webpages won´t be cluttered with lots of recurring font tags and style attributes and you will get a higher percentage of real content in the source code of your webpages, which is beneficial for your webpages´ rankings. Another advantage of CSS is that you can easily change the styles on all pages of your website by modifying only a single file - the style sheet.

In theory, a website layout can be well done purely with CSS, but there are certain limitations and problems, most of them caused by browser incompatibilities. I´m not an expert in CSS, but I´ve seen lots of website layouts done with CSS, where the content breaks the layout and boxes overlap each other, making certain parts of the content unreadable.

Eric Costello has some nice basic CSS website layouts that you can copy and play around with. But until today, I haven´t found an example for a website layout which does what can be done with the famous “table trick”.

Using the HTML table trick ( see templates in my html tutorial, I can create a search engine optimized website layout with 3 columns (2 sidebars and the center column with the main content). Usually, using a pure CSS layout, the content of the left column would come first in the source code, then the main content and finally the right column. But with the HTML table trick, I can move the main content to the top in the source code.

That´s why I´m still using HTML tables to create the main boxes in those website layouts where SEO is the most important way to generate traffic. Hint: not all websites need to be laid out to rank well in the search engines in order to get traffic. There are quite a lot of other techniques to attract visitors to your websites. But that´s a different topic.

Category: Site News
Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

5 Comments »

  1. Comment by:
    Tracy

    A year ago I took the big step to change from a table based website to a CCS based site, I can honestly say a year later it was one of my better decisions although at the time I was not convinved.

  2. Comment by:
    Peter

    W3C introduced a logic flaw into the css box model by making the borders, margins and padding all on the out side of the box, this is what makes it so difficult to make even the simplest layout. Luckily there is a fix, you can actually switch the behavior of boxed to the IE5 model which has the padding and the border on the inside of width. This makes percentage values for widths actually make sense. The only real advantages of CSS-P is the greater flexibility of design and graceful degradation, useful for those who serve the web with the styles off. All the other advertised advantages are bunk. CSS-P actually takes longer to make and is harder to maintain and redesign, especially if people of different skill levels maintain the same site. Tables are much simpler for most people to work with, and they are much more stable. Cell phones nowadays take people to the real web, and blind people are not likely to visit photo galleries or web stores - it is easier to shop over the phone. CSS make tables much better and simpler and this is another reason to use them.

    I design pages in both CSS-P for big clients, and tables+css for private clients who actually want to be able to maintain them themselves. I certainly don’t think that tables are evil.

    Think of CSS-P as the M-16 and tables as the Kalashnikov.

  3. Comment by:
    ryan

    CSS is definitely more of an efficient way to code, as the stylesheet is loaded once and cached, versus loading the table code with every page. Also, site-wide changes are very easy to do in CSS versus changing every page with tables. If you need an easy way to create valid CSS layouts, there’s a great piece of software that makes them at the click of a button. Check it out here: http://www.webassist.com/professional/products/productdetails.asp?PID=135&WAAID=649

  4. Comment by:
    web design

    Hmmm , the winner is CSS and WEb 2.0
    Yes some of thing are achived more harder but this at all CSS is the right decison.

    Regards
    Dimi

  5. Comment by:
    diseño web

    The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.