Tables versus CSS div positioning

There is a big movement in the web design community promoting the adoption of CSS positioning instead of using tables for layout.

Unfortunately, the big argument in favour of it tends to be "it's newer therefore it's better".


That doesn't wash with me. There are countless times when a new IT technology has been proven to be inferior to an older technology. The "newness" of a technology means nothing.

However, in general, I'm on the side of the CSS positioning group. In general, CSS positioning is far superior to table layouts. It is more flexible and more accessible in a lot of cases. You can position things with CSS in ways that you either can't do with tables or would take a lot of nested tables and an overly complex design to do it.

My rule is that in general, CSS positioning should be used wherever possible and feasible.

And that's the big crunch. There are times when it is not feasible or even possible to avoid the use of tables for layout. No matter what the CSS advocates say, CSS positioning struggles with certain types of layout. A good example of this is tabular layout. If you want things in a grid that will not be shoved onto the next line if the screen isn't very wide, CSS has big problems. Tables have no problem at all.

Other CSS advocates will say that this is not CSS's fault, it's the browsers' faults. Of course, different browsers implement CSS positioning slightly differently. But that's not a good enough excuse for me. A technology that isn't consistently supported on the web, is not a technology, it's a wishlist.

Tables are 100% supported by all available browsers and if you put something in a table, you do not need to test it on other browsers. It WILL look the same. Guaranteed.

However, you always need to test div positioning on every browser that you can think of, because it is so poorly supported. Yes, that means testing on version 6 of Internet Explorer too. Yes I know that anyone that still uses Internet Explorer 6 is a moron, but that moron could be your next big customer. There are still millions of people using it so you have to make sure that your website supports it.

Unfortunately, Internet Explorer 6 probably has the worst CSS implementation of any browser ever written (except Internet Explorer 5 but there are so few people using that now that you really can ignore that case). If your website doesn't work on Internet Explorer 6, your website doesn't work.

So, give it another 2 or 3 years and Internet Explorer 6 might be dead and buried so you can ignore it.

However, Internet Explorer 7 was only an improvement. there are still inconsistencies where it gets CSS positioning wrong. So it may make it easier to move over to CSS positioning, but you still can't have a blanket ban on table layouts. Tables are perfect in terms of how well they are supported. With IE 7 still around, CSS positioning is still not perfect.

OK, give it another 7 or 8 years and IE7 will be gone too. That leaves IE8, plus whatever other screwed up releases Microsoft decide to release in the meantime. Unfortunately, IE8 still has a few CSS positioning problems. Now don't get me wrong, it is orders of magnitude better than IE6 and IE7, but it's still not 100% like it is with tables.

Even when IE7 is dead and gone, you'll still have to check your div positioning on all available browsers. You still can't be 100% sure like you can be with tables.

But aren't tables deprecated under W3C?


Tables are deprecated under W3C for layout. They are not deprecated as a valid XHTML element. And I doubt it ever will be. People will always need to be able to construct a table, like a spreadsheet, so it makes sense to keep it. For that reason, I do not believe tables will ever be removed as a valid element. It would be crazy to force people to use huge chunks of code just to fake a table with divs.

Tables will always be supported.

Maybe one day CSS positioning will work consistently and tables will be consigned to purely holding tabular data. But for the moment, you just can't rule out tables.

OpenGlobal company policy is to always try to use CSS positioning. However, if after half an hour, you are still struggling to get it working consistently across all browsers (including IE6), then spend 30 seconds switching all to tables and give up. It's not worth the hassle just for the ideology. Get real.