A New Perspective on Table vs. Table-less Layouts
I just got out of an architecture review meeting which concluded with a mildly heated debate over table vs. table-less layouts. We had all felt the pain of a complex layout with deeply nested tables drowning in CSS classes, and we all basically agreed that a table-less layout with correct semantic mark-up and thoughtful CSS should be a goal in future projects. The argument was over how to achieve a very specific, simple effect with a completely table-less layout. The problem seems trivial at first glance, but is really quite difficult to solve without a table (maybe I'll pose the problem in a follow-up post).
My argument was that sometimes it's better to take a hybrid approach when it comes to complex layouts, using the correct semantic mark-up where possible with an occasional TABLE tag when it solves the problem easily. To me, the pain of making something simple look exactly the same in all major browsers (yes, that includes Safari) is not worth the extra 4 hours to figure out the perfect mark-up and CSS when a simple table will do the trick in 30 seconds.
Anyways, after the meeting, I had a quick follow-up chat with one of my colleagues who gave me a new perspective on the debate, one which I like very much:
Don't sacrifice the correct semantic markup just to make your site look precisely the same in 100% of the browsers. Target the standards and put the onus on the browser-makers to fix their browsers to be standards-compliant. These sites are usually cleaner, always more accessible, and usually have better content anyway because they aren't relying on fluff, whiz-bang graphics, and complex layouts with layers upon layers of nested tables. Eventually, the browsers will all come around.
Examples:
Use an H1 tag and style it to be your logo (using CSS background-image in favor of an IMG tag)
Use UL and LI tags and style them to look like your navigational menus (in favor of a complex assortment of TABLE and IMG tags)
Use DIV tags and style them as the various sections of the page (also in favor of TABLE tags)
Use P tags, DIV tags, and SPAN tags (using CSS fonts and margins in favor of FONT tags, BR tags, and spacer GIFs)
Strip out the CSS just for fun. Your pages will look straight out of 1994, but should still be readable and logically organized. Think Craigslist.
Don't worry that your search textbox and its adjacent submit button aren't vertically-aligned in the middle on Safari. Worry about the semantics, baby! Content is king!
Don't get me wrong. If you can't sleep at night because your flashy new site doesn't look perfect in Safari, then a hybrid approach with an occasional TABLE tag in your layout will save you a lot of time and should not be easily dismissed. However, if you can manage to shift your perspective slightly, commit yourself to using the correct semantic mark-up all the time and stop worrying about your site looking perfect everywhere, then that will save you even more time!