Zilkey

Tables are for tabular data. What’s so hard about that?

I was just checking the election results on http://www.barackobama.com/resultscenter/index.php and out of habit I checked to see how it would look without stylesheets (using the fantastic web developer toolbar for FireFox).

At first everything looked great – the navigation was built with unordered lists and there were skip navigation links, the content was laid out with divs and the tables were…also laid out with divs. That’s right – some person or program generated hundreds of divs, all carefully placed to make the tabular data look like a table.

For those of you who missed the table vs. div saga it goes something like this: before css the only simple way to stucture web page contents was with html tables. Then css came along and fixed that, but browsers didn’t support the same css properties correctly (and some still don’t) and software makers like FrontPage and DreamWeaver made it very easy to create table-based layouts but not so easy to use divs.

Then the internet started becoming less of a luxury and more of a utility, and accessibility finally started getting the attention it deserved and a number of issues related to table-based layouts began to surface – it wreaked havoc on screen-readers, it affected the way content was loaded on pages, it didn’t degrade gracefully to text-only browsers like cell phones, it increased the page size because of all of the unnecessary cells used for complex nesting and it made the source HTML difficult to read and maintain.

Browsers have evolved to the point where all modern browsers render enough CSS so that problem is mostly solved. DreamWeaver now offers excellent support for CSS in design mode, which solves that problem. There are number of libraries and tutorials to help with common layout problems like nested menus and multi-column layouts so developers and designers don’t have spend too much time sweating the small stuff. Several huge and popular sites have moved to div-based layouts (with some notable exceptions) and the web is a better place for it.

But now it seems the pendulum is going a bit too far the other way – all of the same reasons to not use tables for non-tabular data are great reasons for using tables when appropriate. Namely, screen-readers have an easier time speaking the data, the columns stay columns even with no CSS and it makes the page size smaller by cutting out all of the unnecessary css and class/id tags necessary to make divs look like rows and cells.