Going tableless in 2008

CSS, tableless website design and XHTML are three terms which will probably mean nothing to the average web user, but if you run a website, are in the website design business or have approached a website design company recently you may have heard of them.

XHTML is becoming the de-facto standard when it comes to developing websites for cross-browser compatibility, and while CSS has been around for quite some time, up until this year many designers stayed with the tables and spacer images previously needed to develop a complex website layout. Now, thanks to browser developers becoming more genned-up on CSS standards, more and more designers are starting to drop tables and go DIV.

So what's the difference, and why bother?

Take below the HTML code for an average table:

<table style="border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td valign="top" width="100%">
   Place your content here.
  </td>
 </tr>
</table>

This might not seem like much, but when you take a complex layout or design, you can soon get tangled in line after line of table code. And that's without any colours, fonts, images...

<div>
 Place your content here.
</div>

Who would have imagined that the three lines above do the same as the code before? Well, it doesn't until you add CSS code. But still, why?

• Better for search engines
  This can be somewhat debatable. The argument for tableless design is that there is far less styling code for the search engines to crawl through, meaning it's easier for search crawlers to pick out relevant content. On the other hand, the larger search engines like Google, Yahoo and MSN's Live Search should be able to cope amicably whether a site uses tables or not.
• Reduced bandwidth usage
  This is certainly a bonus point. If you have a limit on the amount of bandwidth your hosting account allows, then using tableless design will help. The less your browser has to download from the server, the less bandwidth each pageview uses.
• Easier to manage
  Table layouts can be set up to do many things if you're experienced enough. What happens when you want to move your navigation from the right side of the page to the left? CSS tableless coding allows you to define "elements" which allows you to move them as if you were moving paper, depending on the styling code used and the position of the "element" in the HTML.

There are other reasons as to the benefits, and the three mentioned above should certainly appeal to most. When designing for our customers, we are now using tableless design as standard. Our own website is also being converted from tables to tableless as we speak, and should be completed sometime in January!

At RedGalaxy UK, our focus is always on how we can provide a high quality service. Whether you need website design, website maintenance or low-cost web hosting, give us a quick e-mail and see what we can do for you!