On CSS and Tables
Cascading Style Sheets were introduced by the W3C in late 2006 as a way of separating content from style in web pages. Cascading Style Sheets are so named because they are sheets containing styling information, and the way they are laid out in a style sheet makes them appear to cascade down the page. With the impending release of its third version, CSS has almost completely overtaken tables as the main method of styling websites. To find out why, let’s take a look at the main benefits and disadvantages of using CSS and tables to lay out pages.
CSS separates content and layout, meaning that multiple presentation formats are possible, including different formats for various browsers. When CSS is used in place of tables, pages load much quicker, and the amount of markup in the HTML can be reduced by up to five times! If you run a large website, and you want to change the size or colour of your paragraph text across the whole of your website, CSS makes this extremely easy: just change one line in the CSS, and change is applied site wide. This is also a much cheaper alternative to tables for a company that contracts out its web development, since far less time will have to be spent changing the style.
However, CSS is not without its drawbacks, its biggest problem being inconsistent browser support. While most browsers display CSS the way the designer wishes, the most widely used of all browsers, Internet Explorer (66.82% share of the market at March 2009 [source:Wikipedia]) often displays the layout in a completely different way to the others. However, with every more standards-compliant version of Internet Explorer that is released, the layout similarities with other browsers are growing. Other problems with CSS include the lack of multiple backgrounds per element (although in CSS3 the background of a box will be able to have multiple layers [source: ]http://www.w3.org/TR/css3-background/#layering]) and the fact that CSS only supports rectangular shapes at the moment (with no known plans for other shapes at the date of publishing).
Tables are often still used, especially by very large websites, although usually in conjunction with some CSS, to give consistent browser support. Companies don’t want to alienate more than half of their users by not taking into account how IE displays pages. Tables have been around for longer than CSS so more people know how to use them, so if you have one developer who knows CSS and one who doesn’t, they can both use tables and understand them. The other major advantage to tables is that vertical alignment control is possible (it is not easily controllable using CSS).
Nevertheless, easily the most offputting thing about using tables is having to use a spacer gifs whenever you want white space. Having a HTML document filled with spacer gifs makes the document longer and more difficult to read as well as expanding loading time.
Tables are extremely hard to maintain effectively if, like in the example above, there is a need to change some styling across the whole site, e.g. font size or colour, and they cannot be use to achieve the complex layouts that CSS can.