Tables vs. CSS layout for forms

It’s been very busy for the past few months of work, and at times, it seems all consuming. Most of the time I enjoy being consumed. My day goes fast and I often feel a sense of accomplishment.

Something we’ve been struggling with for quite a long while is many of our forms. We have online applications that interact with our member database to perform varying degree of functions. Each application has a unique set of business rules and layout, by necessity. They layout was not designed by our group so there are things we can definitely do to tweak them, for the sake of consistency.

Unfortunately, they were put together inconsistently, some using css layout, other using table layout. But the most egregious factor, is that the classes and selectors used to lay information out, have been overloaded (using a programming term) to such a degree that one change can have huge repercussions. It is not how I would have designed these forms and there are clear and decisive rendering issues from browser to browser. And I wish they were superficial aesthetic issues!

But now that they are done, going back in and fixing it is a huge and I’m trying to get my head around a way to correct them, and, make the time doing so worthwhile.

We plan a huge overhaul on our website, date to be determined. And I hope that the work I do (with others) will make it compatible with our site overhaul.

On various message boards there are debates on whether complex form design can be achieved without tables. I have yet to see a single example of a complex design using pure css. That is not to say that I haven’t seen examples of forms with MANY fields stacked vertically. But I haven’t seen extremely complex forms where fields, labels, and other explanatory text are both horizontal and vertical. On my perusal of a few websites off the top of my head, of sites that seem to do it well, they in fact use tables for their forms. (Wamu is an example.)

On top of that, our css layout for our website is extremely fragile, and undocumented. No one in house created the original design, and deciphering the global css is more than tedious.

So after wrestling with this for a few weeks, I still believe in our case, tables are the way to go.

In interested in thoughts from anyone, should they happen to run across this post.