Table and CSS based layouts
In the past few years and well into 2006, there has been a push for web designers to move from the old style of using tables to layout a website and use CSS based layouts instead. Although CSS has many positive points, there are a few point that will be its down fall, until they are fixed.
CSS Flaws
Although the idea of CSS is good, implementations are buggy at the moment.
- Internet Explorer does not work out the correct width for elements
- Opera floats elements differently to every other browser
- Many browsers lack all CSS features; Internet Explorer does not support dotted borders
- Collapsing margins can be confusing
As the current implementations of CSS can have many bugs, creating a complex and good looking site in many browsers requires more time than conventional layouts and the use of "tricks of the trade". Table based layouts have been around longer and any bugs have long since been fixed.
CSS claims
Many sites are proclaiming that CSS layouts:
- make your pages load faster
- lower your hosting costs
- make your redesigns more efficient and less expensive
- help you maintain visual consistency throughout your sites
- make your sites more accessible to all viewers and user agents
Although some of these claims are true, many are not.
Faster?
CSS is proven to make you pages load faster if your CSS is stored in a separate file. This is because the CSS file only needs to be transfered to your computer once, and not with every page view. Table based layouts are known to have more HTML code and take a bit more time to load.
Lower your hosting costs?
As CSS can be stored in a separate file and only needs to be downloaded once, it means that less data is transfered with each page meaning lower bandwidth costs. This would only be noticed on larger sites though.
Make your redesigns more efficient and less expensive?
No. At the moment CSS will make your redesigns more expensive and less efficient. As there are many flaws and bugs in CSS implementations, it will take more time to test and fix layouts that display differently in different browsers.
Help you maintain visual consistency throughout your sites
No, not without testing. As CSS implementations differ, your web page may look different on different web browsers without a lot of work.
Make your sites more accessible to all viewers and user agents
No, not without testing. The most common way to get around buggy CSS implementations is to create hacks based on exploiting other minor bugs. The result is often invalid CSS, although it many display fine. If CSS usage is not valid, there is more chance that a new browser will have problems. When the new Internet Explorer 7 comes out, it is expected that many hacks will not work and some sites will need to be redesigned.
Summary
In a perfect world, all browsers would render a CSS website the same way. This is not the case at the moment as there are so many differing CSS implementations that a website will not be the same in all browsers without a lot of work. Table based layouts will still exist for a many years after all the bugs are ironed out of all the differing CSS implementations.