|
Those of you who've been developing websites for some time, and by some time I mean since the early to mid 1990's (making you a pensioner in web terms), will remember the bad old days of using HTML tables for layout. You'll no doubt remember how we mangled our code with weird combinations of rowspan and colspan and nested tables within tables within tables. But who could have blamed us, we didn't have anything else after all. Sure we had CSS1 from the late nineties but browser support back then was a bit hit and miss and anyway, we'd grown comfortable with our table mangulations. CSS1 was how we added 'styling' - a bit of font size here and a bit of padding there. Fast forward a few years and we started to see support for CSS2 and all of it's positioning elements. Now we were designing in '3D' thanks to z-index. We also discovered the joys of CSS shadows and now suddenly, everything started to 'float' off the page. That's also about the time when CSS layouts started to gain traction - nevermind that you had to use all manner of CSS filters and tricks to try and overcome the various bugs and cross browser quirks. Supporters of CSS layouts frowned upon table layouts claiming that tables were never intended to be used for layout. That's true, but sorry to burst your bubble, neither was CSS. Nevertheless, CSS layouts have pretty much become the de facto standard and in essence we've chosen the lesser of two evils. Don't get me wrong, you can now do some great things with CSS2 layouts but it will only be once we have widespread support for CSS3 that CSS layouts will really come in to their own (Come on IE9, Firefox, Chrome and Safari are leading the way as usual). However, the real point of this article is that along the line, HTML tables were demonised, and many developers adopted the opinion that tables should be avoided at all cost. But this is simply wrong in my view. Yes, CSS is the better solution for overall layout but there's no reason why we should stop using tables as they were intended i.e. to display rows and columns of tabular data. All too often I see developers trying to replicate tables with floating divs when it just doesn't make sense. They talk about creating 'clean' CSS code to replicate tables but in essence all they've done is replace TR and TD tags with equivalent nested divs and a whole bunch of stylesheet code. So here's the take-away from this article. If you're an HTML coder and you use CSS for layouts, great, but just don't fall into the trap of believing that HTML tables are evil and should never be used. If you're STILL using HTML tables for layout then you really should consider using CSS for your overall page layouts. It may seem daunting at first, but a good place to start would be to look at some of the well established CSS layout frameworks (e.g. YUI grids) to get to grips with some concepts before creating your own layout. Of course you could simply use a framework in its entirety but they are often 'over-engineered' to cope with an array of possible layouts. Ultimately the choice is yours but however you proceed, just remember that HTML tables still have a place in every coder's toolbox.
A good example of the use of both CSS layouts and HTML tables is Perfume Fairy, a UK-based price comparison site where users can check the latest prices of top designer brands including Armani perfumes.
|
