Easy accessibility for table-based layouts

In todays Web, tables-based designs are taboo. Because of growing support for CSS in the modern browsers and stronger push from local governments for web sites to comply with accessibility guidelines, it’s become much easier to write semantic HTML pages and let style sheets handle the design (see CSS Zen Garden for some inspirational examples), while leaving the tables for tabular data. There are other reasons for abandoning table-based designs – lighter code, faster page loading, more flexible designs, easier to move content to new designs, etc., but most importantly because the alternatives tend to be much more accessible.

Unfortunately, there is a really steep learning curve when making the switch and I think many old-hat developers are put off by this. After all, it’s not that table-based designs don’t work and most web surfers wouldn’t even be able to tell the difference between a site build using tables and one without them.

Fortunately, Mark Pilgrim at Dive Into Accessibility has a really simple trick for making sure that your table-based designs remain accessible. He gives a really great overview of the problem as well.

For a more detailed look at the practice of writing semantic HTML and how it can actually improve efficiency in your web development, see my previous post titled How well formed XHTML and CSS can save your sanity.

* This post was originally published on June 27, 2006 at http://www.csb7.com/blogs/whyblogwhy/2006/06/27/easy_accessibility_for_table_based_layou

I don’t want to achieve immortality through my work, I want to achieve it through not dying.

— Woody Allen