by Megan McDermott, 14 March 2007 - 12:10am
In this article I'm not going to talk about semantics, ‘proper’ coding, or the W3C. You've probably heard all of that already (and if you haven't, you can check out Why Tables for Layout is Stupid: problems defined, solutions offered by Bill Merikallio and Adam Pratt). Instead of preaching about standards, I am going to present some real world, results–oriented reasons to use CSS instead of tables for web page layout. Let's get started right away.
Let's get this out of the way quickly because I'm sure you're aware of it. Using CSS keeps all of the design information in one place. Minor changes such as altering a background image or widening a column are much easier when you only have to change one file. The client decides at the last minute that he hates that shade of blue? No problem, it's all in the CSS. Even better, when it's time to completely redesign the site, you don't have to start from scratch. With a semantic HTML framework in place you may only need to change the CSS.
Many sites are made up of several different but connected systems. You may have a personal site with a separate blog and photo gallery, or a comprehensive content site with a separate forum and content management system. Without CSS, you would have to maintain completely separate versions of your design—a nightmare when you want to make changes. With CSS, all the design information for all parts of the site can be in one set of files. This means that if you decide to change something you don't have to fiddle with both systems—you just need to change the CSS!
Similarly, if you are developing applications, using CSS for layout will make it easier for your users to integrate your product with other systems they are using. It will also be easier for you to provide different designs for them to use—keep the same HTML, add some CSS, and the possibilities are endless!
If all your layout information is in the CSS it's really easy to provide alternate layouts to your users. This could be for people to choose from on the site itself, or to distribute to other devices with media–specific stylesheets. One of the most compelling reasons to use CSS for layout is that you don't have to create separate versions of the site for mobile devices or printers. Who has time to do that anyway? All you have to do is specify a different stylesheet—or even a set of special rules—using the @media attributes.
CSS usually results in smaller page sizes which makes for lower server costs and faster download times. CSS sites are ‘front loaded’, meaning that the heaviest file (the CSS) is downloaded when a user first visits the site but is then stored in the cache. So as the user navigates around the site the browser already has the display information and doesn't have to download it again.
Less code also means that your work will be easier to work with and less difficult to debug. Finding problems is much easier when you've got 300 lines of code instead of 1000.
If the design and presentation are completely separated from each other, then it's possible to have two different individuals working on them. The developer can work on building a functional, semantic application while the designer works on formatting the interface with CSS. Although there will always be some back–and–forth between the two, separating presentation and structure greatly simplifies the process.
The developer can even start working on the functionality before the designer has completed the visuals. This makes for a much faster, cleaner design process. You can actually build a working prototype directly in HTML rather than using static images. The designer can then layer in design elements through the CSS without having to rebuild the code.
I'm a little hesitant to say this because there is some disagreement within the SEO community. However, there are a few reasons why using CSS may help your pages rank better:
Keep in mind that there are many factors that go into search engine ranking. These points may not have a big influence on search engine ranking, but every little bit helps.
Users of Opera, Firefox (using a stylish plug-in), and Safari (another plug-in) are now able to apply their own CSS to websites. This means that if they don't like the way a website looks they can change it. Sites like User Styles.org and My Stylesheet make it easy for them to do so by providing a repository of free user stylesheets. If you use CSS for layout, it will be much easier for people to customise the look of your site. It will also be easier for people with low vision or other accessibility problems to apply their own stylesheets to your site.
In many ways, tables present a lot of barriers to web design. There are hard lines between cells that cannot be crossed. You cannot layer information, or reposition things as you see fit. You are kept within a rigid framework. CSS breaks down the barriers and allows for more flexibility. It also makes more sense when you think about how desktop publishing is traditionally done using programs like inDesign, Publisher and Scribus. You would never think of using a table to create a page layout in a print design program, so why would you do it on a web page?
The next version of CSS contains many more powerful design tools, including multiple—column text layouts and a grid design option. When combined with Scalable Vector Graphics (SVG), CSS 3 will make web design more like traditional desktop publishing. You will be able to draw shapes and control text boxes in the same way you would in a desktop publishing or illustration program. If you learn to use CSS for layout now you will be prepared to transition to newer methods when browser support allows.
This doesn't sound like a practical reason, does it? Who cares if everyone else uses CSS? There's nothing wrong with doing things the old fashioned way. Well, maybe not, but if you ever expect to get a job with a professional design company or anyone else who practices modern web design methods you better know how to design pages with CSS.
If you're a developer, you may be working on projects—such as a blog script or content management system—that you expect to be used by others. They won't want to use it if it's using tables for layout. Tables are much too difficult to customize and won't integrate well with existing systems. In addition, many popular content management systems are using CSS for layout now. If you want to be able to customize them you need know how to create layouts with CSS.
Honestly, it's not. Many people have a difficult time with CSS at first because it is such a radical change from what they are used to. If you give it a little bit of effort and learn the basic concepts, it won't be long before you wouldn't think of doing a layout any other way. There are many resources available for learning CSS layouts, and lots of advice on the web for common problems that you might come across. There are also lots of sample layouts available for you to reuse and modify. Remember that many others have been through this – you're certainly not alone!
There you have it; 11 reasons to start using CSS instead of tables for layout. Making a drastic change such as this one is sure to be a little scary. Start small and before you know it you'll be ready to transition to fully CSS based web page layouts.
For those of you who have made the change already, can you think of any other reasons to switch?
Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. Megan is also a partner and co-founder of Woolwich Web Works: A small team that can do big things!
