Essential Web Design Tips: CSS Vs. Tables Deathmatch

Possibly the most empassioned of the web design wars is that which places the logic of using a tabular layout versus that of using a fully-CSS layout.

We are at a point now where new, young web designers are starting out using CSS layouts but, for a number of years now there have been those who started way back when tables where all the rage and, as such, continue to stand by their trusty tabular simplicity.

There is no argument against the simplicity of a tabular layout, indeed it is probably a lot easier and quicker to build a table than it is to write and configure a style sheet. Alas, the benefits of using a table design stops there.

Personally I have always used CSS; I started designing web sites about four years ago. Even then CSS wasn’t as widely supported by browsers and web developers alike as it is today. The truth is that style sheets are a lot more extensible, flexible and you can do almost anything you like on a web page with a style sheet.

My experience has shown me that you cannot get such flexibility with a tabular layout. Tables should, in my opinion, be confined to the likes of Microsoft Word.

Tables were intended to display tabular data. Funny that.

Transparent ‘spacer’ GIFs. Tables in tables in tables. A whole mess of HTML to work with when handing over to a new designer. A table layout really is the thorn in the side of modern web design.

As I have alluded to, I am not writing off tables completely. Tables had their benefits in a day when support for CSS was low and web design was in its infancy. The truth is that web design is, as with the Internet itself, still very young.

But consider for a moment what children do every day… They go to school and learn new ways of doing things because it is more logical than the way they used to do things. Like counting with your fingers, toes and hair strands versus using a pencil and paper, or even a calculator if you’re naughty.

Replacing your skills in using tables for layout with the ability to code using CSS is a similar thing. Why hold on to tables when you can do so much more with a style sheet?

When the time comes to redesign a popular web site (which, lets face it, is usually after just a year, if that) and you’ve used tables to build the last version, it is so much more difficult to redesign, not least because you can’t get access to the deep structure of the page without editing it itself. But also because you simply cannot redesign an archive of thousands of pages so, sadly, you have visible periods of your web design history when reading over a web site’s archive. BBC News’ web site is a perfect example of this.

With CSS, though, you can completely change the way each and every page looks, all at the same time simply by building a new style sheet or even amending a current one.

As I write this, it feels as though I’m writing something that web designer has read before. But if that’s the case, why do so many designers still use tables for layout? After doing a quick search on local web design companies’ portfolios, I discovered so many of the sites they have built still use tables!

I’ve talked about the designer aspect of tables versus CSS layouts, but what about the user? Superficially, some of the better-looking table designs could have been built using CSS as far as the average user is concerned. But what about those with a disability?

W3C is actively encouraging web designers to stop using tabular layouts and instead use CSS.

Tables are layed out in a very literal way. Which is perfect for the human eye, but as any web designer worth his salt will know, not all users use their eyes!

Those users with a visual impairment may use a screen reader. Screen readers will, a lot of the time, fall right down trying to read a web page that’s been built with a table.

In this age of scrutinising your own design to make sure it is both accessible and useable, why turn a blind eye to the fact that tabular layouts counters both standards?

The probability is that most designers who use tables will know how to use a style sheet in its most basic form. To style typefaces and image borders, for example. But why stop there?

For me, the largest argument against using CSS is that some browsers are intent on reading it differently. For example, Mozilla’s Firefox browser reads CSS exactly how it is supposed to be read. But other browsers, such as Microsoft’s Internet Explorer just aren’t happy unless they are writing their own rules, garbling web pages in the process. This creates a problem and a web designer must fix a problem Internet Explorer is causing, which then creates two problems in Firefox.

But with a little playing around you can get it. That’s how you end up with some truly beautiful websites.

All Internet Explorer’s CSS issues does is make a web designer’s life a little more difficult. And when you see the end result, a beautifully-designed, well-structured, 100% accessible and useable design, safe in the knowledge that you built it yourself without the aid of a table, you feel proud.

Coding for all browsers and all of the Web community using a trusty style sheet makes the extra work worth it, the end result considerred.

3 thoughts on “Essential Web Design Tips: CSS Vs. Tables Deathmatch

  1. Are CSS compatibility issues between Firefox and IE going to be sorted out ‘moving forward’? Is there anyone out there who can get these guys to sit down in a room together and agree on a single specification?

  2. Why sit them around a table? The W3C sets the standard, Mozilla’s Gecko-engine (Firefox, Seamonkey, etc.) follows that standard, while Microsoft’s Trident-engine (Internet Explorer) doesn’t. Theres not really anything here that needs to be discussed.

    If Microsoft feels the standard is inadequate, they should tell their complaints to the W3C, but thats nothing that should concern the Mozilla foundation.

    Personally though, by this point I’m beginning to wonder if Microsoft is even capable of following a standard, they have a long standing tradition of mis-implemented standards, and inappropriate extensions. Maybe they are still stuck in the mindset from the browser wars, but who knows?

Speak your mind :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s