Joomla Form - Admiring and inspiring good form with Joomla

Recently Featured Sites

Why no tables?

I got an e-mail today asking me why "tableless" design was part of the criteria for JoomlaForm.com. It was an interesting question to me, because I have taken the mantra of css-driven layout as gospel without stopping to research the details of why. (Editor's Note: Tableless layout is part of our criteria, but it is not 100% necessary. An aesthetically well-designed site can be featured here, as long as it overcomes the shortcomings of a table-based layout.)

In fact, I used to be in the "why no tables?" camp as well, until I saw several excellent examples of what can be done with a css-driven layout. After all, I cut my first web-design teeth learning HTML in 1997, and I was thrilled at the possiblities of using tables to put content on different parts of the page. The first time I used a div in a website, I found it confusing and hard to manage (mainly because I didn't have a proper understanding of CSS), so naturally it took me a while to see the light.

Now that I am in the "tables are for sissies" camp, I feel like it is time to get a better understanding of why. So, here it goes.

Reason 1: W3 Says "No Tables"

"Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version)." - HTML Techniques for Web Content Accessibility Guidelines 1.0

Reason 2: Accessibility

I keep hearing this word "accessibility", but what does it mean? The W3 Web Accessibility Initiative states, "Web accessibility means that people with disabilities can use the Web."

While it is technically *possible* to develop an accessible website using a table-based layout (See link in Reason 1), most - if not all - table-based layouts are far from meeting accessibility requirements. Table-based layouts make it difficult for screen readers (machines) to interpret the content on the site.

Reason 3: Flexibility

CSS-driven layouts are inherently more flexible than table-based layouts. With a table-based layout, you must define your rows and columns in the page's mark-up, so you are essentially boxed in to the layout you originally coded. Using a CSS-driven layout, you only have to change your CSS file to get an entirely different flow and feel for your site. Take a look at CSS Zen Garden to see what is possible with one HTML file.

Reason 4: Efficiency

If you have ever looked at a table-based Joomla! tamplate's index.php file and compared it to a CSS-driven template's index.php file, you know what I'm talking about. It takes, in most cases, less than half the lines of code to create a CSS-driven layout than it takes to create a table-based layout. In my "why not tables" days, I would nest tables within tables within tables within tables (you get the idea) to get a site to render exactly how I wanted it. Now that I use div tags, the practice of nesting tables is a thing of the past

Conclusion

This is far from an exhaustive list of the reasons why you should use CSS instead of tables to drive your layouts, but I hope that it gets you started down the path of standards-based, CSS-driven design.

Acknowledgements

I am by no means an expert on this subject, so I had a little help from the following websites:

Why avoiding tables (for layout) is important - Dave Polaschek
Tables or CSS?: Choosing a layout - Craig Saila

Here is a great post from the Joomla! forums on how to remove most (not all) tables from the standard Joomla! output: Easy tricks to remove many tables from the standard output of Joomla!

Set as favorite

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry

Comments (4) add comment

Subscribe to this comment's feed

Paul Harvey: Good article

Hi Cory,

So funny you say that ( or write that) because , like most, I asked the same question.

One of the main reason for my hesitation to "jump" over to tableless was in fact the question .... BUT HOW ???

When i initially made the decision to try it I contacted a well known Mambo/Joomla designer and asked how to do it.

Fortunately, he didn't tell me how to but told me to get reading ( as I learnt a lot more than if I was just told how to ). He wasn't going to give away his secrets!! As I got reading, and studying samples from free tableless templates, it suddenly clicked.

I guess it is like anything new learning curve, the initial stage is hard but once you get it, you get it.

My first tableless website is my homepage www.harveybrothers.com and am very proud of it.

So my advise is READ!! Cory has placed a few good links to some good resources there.

Cheers.

report abuse

vote down

vote up

May 12, 2006
Votes: +0

Barrie North: ...

The tableless debate is a really interesting one.

With a static site, its easy. You are in total control of the output so can make sure you are using semantic, valid xhtml.

A CMS like Joomla is a whole different ball of wax. Much of the content is output from the php in the form of tables. You have to work hard to cut them out. Sometimes you have to end up nesting div's just as much as you might have nested tables. Lesser of two evils?

What is the goal? I would argue that the goal is valid design. Valid is not the same as tableless. You can have valid semantic layout and still have a table or too. I did a survey recently, trying to validate the top 20 designers I found for joomla on google. Only two actually had valid sites. Some of the others had over 100 errors. Worse still (inmho), at least half of the designers were claiming to produce "valid templates" on their sites for download which simply didn't validate. Its worth noting that a few sites were tableless but not valid!

In the context of Joomla, hopefull we can look forward to tableless, semantic code before 2007.

ps
I think there are 6 tables still at harveybrothers.com, see if you can cut it down to one! smilies/wink.gif