ArticlesTableless Design:
Not ready for prime time!
[The original article was first published here on 2003-04-22. It has been updated on 2003-04-23.]
The purpose of this article is to show an example of why tableless design is not ready for prime time, as many would advocate...
I will restrict my rendering tests to Internet Explorer 6.0.2800.1106, Netscape Navigator 7.02 and Opea 7.10 (build 2840) on Windows. I think everyone would agree that if something won't work with the latest versions of these three most used browsers, it is definitely not ready for prime time!
The following example is a "reduced to the substance" version of dozens of related layout problems I ran into when trying to do everything tableless !
Using a straightforward table:
This is the intended design: two pictures and their caption underneath, separated by some text, all that centered in the blue/green frame.
 Sea, Sun... |
and... |  too much concrete! |
This is easy as pie with a 2 cell-in-a-row-table and will be rendered nicely in most recent browsers. (I do use CSS styles where convenient but that's not the subject.)
Of course this use of a table is semantic nonsense and may severely degrade accessibility. But it also has a very easy to grasp visual drawback: when you resize your browser window to a with smaller than the total width of the two pictures, you cannot see them anymore, unless you scroll horizontally.
With tableless design - i-e with the use of CSS styles instead - you should theorically be able to not only preserve semantic intelligence and accessibility of your document, but you should also be able to improve the "liquid flow" of your design, that is to say, the second picture should go under the first one when the browser width is insuficient.
Well, at least, if it doesn't improve the liquid flow, you should be able to get the same layout. At least!
And you actually can get the same layout... sometimes!
This example has been carefully chosen because, in the state of how current browsers support CSS today, it cannot be done without tons of dirty tricks... like using the "quirks modes" for different browsers and hiding specific CSS from specific browsers, etc...
No way! Tables work (almost) the same way on (almost) all browsers. This is what made them easy to use. If you switch to tableless design, you also want to do it in one single straightforward way... just as you do with tables. Namely: fully standards compliant mode in all browsers.
Most browsers will not render CSS the same way depending on the doctype of your document. You need to watch that carefully to make sure you activate standards compliant mode in all browsers. (More info here).
Okay... then you can play... spend hours trying to get that damn thing to look like the intended design...
Here's probably the best you'll end up with:
Tableless tentative 1:
This uses a classic technique: First the "cells" are turned into divs.
Then, they are given a fixed width to prevent them from being rendered larger than required.
Then, they are given a fixed height to prevent the "and"-cell from being much smaller than the other ones.
Finally, to allow the divs to display "in line", you specify
the style float: left. (You can also try a display: inline
but you'll get a very artistic mess...).
Here's what you get with this technique:
Sea, Sun...
too much concrete!
Almost nice, isn't it?
Actually, it's not really nice! First the content of the "cells" is not vertically centered. (I could not figure out how to acheive thos, but this is not actually my point, so if you know a way to center it, I'd really like to hear from you! ;) )
Then the height had to be fixed in pixels, so if the captions are rendred bigger than average, guess what happens: they do not fit nicely in the black cell anymore! Try to change the text size of your browser. Only Opera will hide this flaw by automagically multipling the pixel sizes and even zooming the pictures!
Finally, the picture group is not centered. (And no, there is no float:
center! ;) ) Now you could consider this left alignment to be a small
tradeoff considered the second picture will now be displayed under the first
one if there is not enough space to the right!
Cool stuff? Well... yes... cool stuff in Netscape, cool stuff in Opera... but pretty dirty stuff in IE! Check it out! The second picture will cross the blue/green frame at certain page widths, and even if there is largely enough width (say 1024 pix wide), the frame will not be displayed properly, even if the pictures don't cover it! (Yes, it's "just a bug", but it also is the "standard" rendering of the most used browser in the world!)
As Karl pointed out, if you that last tradeoff is to big, that last issue can be partially solved by going back to a more table-like rendering:
Tableless tentative 2:
This is actually the technique I have been using for my navigation menus since I decided to try and get rid of their tables, but I'm still not satisfied with it. Check it out...
The idea is to take the preceding tentative and to wrap it in another div, which size should be set appropriately, and which you can then center... more or less!
Here's what you get with this technique: (the red border is
only here to show the added div, it is not supposed to be displayed in a
real world situation)
Sea, Sun...
too much concrete!
Nice? Not Nice?
If this displays correctly, you are either viewing the page at the exact intended font size, or you are using Opea (which once again handles this whithout too many problems by multipling pixel sizes!).
But try to wiew this with a larger text size in IE or Netscape. That should give you a good idea of what "broken design" means! :( This is because you can only estimate the total width of the pictures + text, but you cannot set it for sure.
You can make this problem a little less obvious by adding a little extra space in the (red framed) div, so as to allow for text growth when a larger font is used... but then you loose the centering again... :(
So here we are: you can spend hours tweaking that tableless design and end up with an unfinished-dirty-but-standard-acessible-and-liquid-design or you can use a table without even thinking about it...
Please note that, though I reckon tableless design to be less versatile than the use of tables, I also strongly recommend using tableless design whenever possible. This will greatly enhance accessibility as well as the chances of displaying your page on different devices (web-TVs, cell-phones, etc...). (I should inlude some links here... I don't have many handy , sorry :/ but you may want to check out Why avoiding tables (for layout) is important.)
Moreover - and for the same reasons - even if you use tables for layout, you can still very efficiently use CSS styles instead of old-style HTML formatting.
François PLANQUE.
Avril 2003.
Comments welcome here.
