Table Based Website Layouts are EVIL
A current project I am working on is with an open source software package called osCommerce and I must say it has been giving me some grief. Why grief you may ask? Well I’ve been looking the source code to modify the layout of this particular e-commerce software package and it has given me a new nightmare. A frightening nightmare due to the fact the whole entire layout is done with nested tables.
Tables, Tables, Tables!
There are nested tables all over the place. I understand that back in the day web design was easily created by utilizing tables. Tables allowed a designer to layout everything they needed with ease and ensure proper look and compatibility over the different web browsers. Today they should be only used for the purpose they were originally created for; tabular data. When I experience a website that has a template or layout that is created with tables somewhere a little monkey dies and I feel dirty.
Why Table Layouts Are Evil
The main issue I have with table based layouts is to modify them to look the way I want them to look. On this current project with osCommerce I have had to modify at least 7 tables just to get the page to fit in 900 pixels wide. Modifying the <body> tag to center it on the screen was easy, but having to look through the source of the pages to find where the tables are defined and to change the width=â€100%†to width=â€900†took me a while and I am still not sure if I have found them all.
Another issue I found was the border around the display blocks. Since they are table based I thought this would be easy buy changing the border attribute of a <table> using CSS. Nowhere in the stylesheet could I find the use of the border attribute. I thought this was weird and was also starting to frustrate me. How did they do the borders of the blocks?
FireBug is a Saviour
Some people out there might be familiar with FireBug, if you’re a web developer or designer there is a plugin I recommend downloading for Firefox; FireBug. FireBug is the most useful tool you can use when troubleshooting layouts (or even stealing layout designs) it will allow you to inspect the source code in real time and highlight elements of a website to make it easier to see what’s going on behind the scenes.
After about an hour and a bit I finally figured out how osCommerce has created their borders around their blocks. What osCommerce did was created a background colour of a table cell (<td>) with one background colour and then nested a table inside with a different background color (a lighter shade). The background colour of the outer table cell is what determines the border colour around the block.
The above image (click to see a larger one) shows this in practice. One table has a smaller table nested in it. The outer table (red curly braced) shows that the background class is of one colour. The inner (nested) table is spaced accordingly with a different background which helps creates the illusion of a 1 pixel border around the entire block.
If not Tables then what?
The way layouts should be is with <div> tags. <div> tags can be a bit harder to work with due to the inconstancies between great browsers and IE but once you learn the tricks they are easier to use and manipulate to your needs. <div> tags also load faster than <table> tags which is what we like right? After all when web pages load slowly visitors complain. Granted you might not notice a load time difference between a table based layout and a div based layout but the server’s processors will.
With the proper use of <div> tags and CSS you’ll have an easier time creating layouts that you can easily modify and change if you or your client wants them done. It is also the standard nowadays to create layouts with <div> tags rather than using the table layout method.
So please remember that tables (<table>) are used for Tabular Data not to be used for website layouts or templates.
Gah. Tables. I moved away from using tables as soon as I learned about divs. Divs are a gift from above when it comes to web design. A lot of things are so much easier with proper use of CSS and divs.
OSCommerce is such a dog. We’ve done a couple of those. Table layouts, minimal CSS — it’s just horrid. There’s nothing like having to change 20 different pages when you want to change the design…
Good luck!
Thanks John, I’ll need all the luck I can get. I downloaded the Alpha and they have created it all with
Hi Tyler,
Question for you – do you know of any good CSS layout designers? I’m gathering the courage to create my own customized WordPress theme and have the template in mind — but don’t want to get down and dirty with coding the CSS by hand.
Any information you could provide would be appreciated.
Thanks,
Mo
Sorry Mo off the top of my head I do not. CSS isn’t all that terrible to play with. Yes IE doesn’t play nice and you have to do some silly hacks sometimes.
The only site that I could think of is the sight that redid JohnChow’s blog: Unique Blog Designs. Wouldn’t hurt to ask them if they would do the CSS side of it, or help you with your layout/theme ideas.
There’s a module for osC called, “STS” (Simple Template System, or some such, http://www.oscommerce.com/community/contributions,1524) that tokenizes the various bits of osCommerce to “variables” which are swapped out with the osC HTML upon display. You work with an HTML file, dropping in the “variables” as you please. For example, ‘$cartbox.’ When displayed to the browser, STS turns $cartbox into HTML with the list of items in the cart. That HTML is usually a table, or series of embedded tables, but at least you can now style it directly. With STS you can have one template that serves every page in the site. If you are more advanced, or want to remove yet more tables, you can make STS templates for more granular elements such as infoboxes. Unfortunately osC has chronic tablitis and *everything* is eventually displayed as a table.
Duhp! forgot about html filtering, let the example be:
<div class=”CurrCart”>$cartbox</div>
Why can’t I go on killing little monkeys? Divs are killing me. I get my site to look good on one browser and the others parse it horribly.
Brennan the Vyper
It takes a bit of practice to get div tags to work properly. IE doesn’t play nice because they don’t follow the standards set out by the WWW Consortium. So you sometimes have to hack the div tags to look properly in IE when they normally work in Mozilla and Opera etc.
You are right, some layout may leave a bad effect for your websites.You should try New Layouts and increase your website traffic.