Website Design: Tables vs CSS

12/10/2011

Website Design Tables How should website design be done – using the old-fashioned traditional methods of table-based design or using the more modern CSS approach? Even now we still see clients sending us sites for SEO and online marketing work which have been built in the last 24 months or so and are based entirely off tables. Are tables actually the diabolical works of evil that most SEOs will make them out to be?

First of all, any web developer worth his salt can code a site up to look identical regardless of whether he is using tables or CSS. So you can throw out any perceived aesthetic benefits right away, which just leaves the SEO and accessibility benefits to consider.

Major search engines like Google can still read your page perfectly well if you code it up in tables, so why exactly does CSS have so many supporters who decry tables as bad for site design and SEO alike?

CSS actually has many benefits which originate from the separation of page content and presentation – i.e. the words and images on the page versus colours, fonts, layout etc.

CSS displayed content is more accessible to visually impaired people who use alternative website browsers
CSS gives you greater control and flexibility over how your site looks
Instead of having to reformat on each page you can share formatting in style sheets across your entire site very easily
Complexity and repetition of code is greatly reduced
The site becomes far easier and quicker to maintain and update
Less code means smaller files so your pages load a lot quicker

The top benefit here is actually nothing to do with SEO – namely the ability to transform the entire look of the site by changing only the single style sheet file without needing to touch a single page of content. You can present the same content in different styles if you want – for example the web version and printable version - and even give the user the option to display your content in the style they would prefer.

Tables, on the other hand, use heaps of code. There’s tons of code repetition and changes to styling take a lot more effort which can make sites nigh-on unmaintainable and very clunky to edit.

Now onto the SEO side of things!

Tables create lots of code, meaning larger file sizes which will load slower. Google does give a bit of preference to faster loading sites so it is definitely worth snatching those little boosts to search ranking with a faster loading page. This can also present a usability problem as most table-designed sites have one big table for content with smaller ones inside to control page width. Users end up having to wait for that one table to load up before everything else is displayed – not a major factor with modern Internet connections, but be aware of the impact on mobile users too!

Consider the sheer volume of code in a table-designed site, which is (from an SEO perspective) useless code that search engine spiders have to crawl through before they get to your content. This causes three key problems which all impact SEO.

A high ratio of code to content means poor search engine rankings. Big, bulkily coded sites tend to be knocked down whereas simply and cleanly coded websites often appear highly in Google search results.
Google often places a lot more emphasis on content which it finds early in the page, so if you fill things up with tables it may not even crawl a lot of your content and will think the page is nearly empty except for the crammed-in code!
The more code there is on the site, the more likely it is that errors will sneak in which cause problems for search crawlers and cause them to abandon indexing your site, with predictably poor results for SEO.

So those are the problems with tables, and there are certainly plenty. But does CSS have any downside? The answer is actually yes. Not all browsers treat style sheets in the same way, so you often have to get a bit clever in creating separate CSS for different browsers and use filtering techniques to make sure the right browser sees the right version. This can make designing in CSS a tedious process as everything has to be tested and tweaked across multiple browsers to account for all the various quirks. Tables, on the other hand, are universally supported.

Is it then worth the effort to code up CSS table-less designs? The answer is a resounding yes. The benefits you get to site usability, accessibility and SEO far outweigh the necessary learning curve and effort needed to get CSS coded sites right. Our search engine optimised website design service always uses CSS to ensure that your site is highly visible to search engines as well as fast loading and highly accessible, and for an added boost we build whenever possible on our own easy CMS which makes updating your site content even easier and smoother than ever.

← Back to Index