This comes to mind because I’m wading through PHP code breaking down the table-based output someone else has written into non-table-dependent code. It gave me a chance to think about the consequences of table-driven design.

The first consequence is invalid code. The particular system I was working with held an XHTML doctype on the output page, yet insisted on using table attributes that were not valid for XHTML. Tables are the Old World, and so the techniques don’t carry well into the new.

The second consequence is buggy code. Oh, “tables have been around a long time, all the bugs are gone” is the usual argument, but it just isn’t true. The bugs and workarounds are known, but they’re not fixed. And, since the world of web browsers is moving on, they aren’t likely to be, either. I’ve had to wrestle with some table bugs just recently, one reason why I’m taking the time to clean them out of the code I’m currently working with, rather than just accepting it and working with what I have.

The third consequence is stagnation. Tables make it hard to move forward, to add in design benefits that come only from a table-less approach. One very good example is the table width bug in IE/Win. Simplest example of it: Create Div A, with a width of 500px and a margin-left of 120px. Create Div B inside Div A with a width of 100px and float it left. Now follow Div B with a table in Div A with a width of 100%. The table will be 380 px wide, the floated div 100px wide, yet IE/Win will refuse to put them side by side. It will assume that since you wanted the table at 100%, there is no room for it beside the floated div, and it refuses to do the math to test that assumption. Other browsers get this right, and there are other bugs in them that IE/Win gets right.

That means you’re going to have some unique difficulties with hybridized designs, those that attempt to blend table-based and table-less designs. I wonder sometimes if these problems are what some designers are complaining about when they talk of the difficulty of table-less design. Start with tables, and tables will insist upon controlling the entire design. (And the opposite is also true: start with CSS, and it will insist on controlling the whole design.)

Table-less design is more of a mindset than anything else. It requires a different way of thinking about the design, and it’s that difference that makes life difficult for some designers. Once adopted, it also makes it difficult to use tables to control bits of the design. It’s not fair that there isn’t a reliable transition area, a halfway-house to ease us into a future without tables.

Still the trip is worth the hassle. Just don’t be surprised if you suddenly start to feel completely dissatisfied with the table work you’ve doen before, and get the serious itch to go back and rework it, to fix it even when it ain’t broke. Don’t say I didn’t warn you.