Joomla Form - Admiring and inspiring good form with Joomla

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!