HTML, CSS and Tables: The Beauty of Data

HTML tables are still frequently discussed on various mailing lists, forums and chat channels. Many people have realized that they are not the most clever method of defining the layout of a page.

However, it is still quite common not to use the latest markup available to make them more usable and accessible, and many inexperienced CSS users moan about styling issues. This article shows the evolution of HTML tables in Web development and provides examples of up-to-date markup and styling practices.

Web development would not be the same if HTML hadn't had a table tag. In the days before CSS, they were the only way to create multi column layouts, visually appealing menus and turn those pixel-perfect print-inspired screen designs into something people can see on the web. We got used to tables being a necessity, we learnt how to force browsers to display them correctly and generally thought we got that "web development" thing licked.

Tables used TABLE, TR, and TD elements and we were able to control them with the attributes align, valign, background, bgcolor, rowspan, colspan, cellpadding, cellspacing and border. We used all that--and transparent graphics--to create the look we were trying to achieve. Changing this look, or even re-arranging the whole page layout was a royal pain in parts unmentioned here, but we saw that as a necessary evil. Things turned bad when newer browsers came out, and our markup monsters started to fail. We stood there, blinking, and wondered what went wrong. Well, we used tables as visuals constructs, and we forgot what a table really is, that's what.