Better for SEO
In case you've missed the web marketing acronym train, SEO stands for Search Engine Optimization. In case you know very little about web marketing, Search Engine Optimization, according to Wikipedia:
is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results for targeted keywords. Usually, the earlier a site is presented in the search results or the higher it "ranks", the more searchers will visit that site.
Chances are, no matter what the purpose of your website, having more people visit your website is something that would certainly be welcomed. If you're using a table-based layout, then the amount of traffic to your website may not be as good as it could be if you were using a CSS-based layout. Crazy, isn't it?
There are a number of reasons why CSS is better than tables for SEO:
- Smaller file size makes it easier for Search Engine Spiders to crawl through your website.
- Less junk markup makes it easier for Search Engine Spiders to decipher between code and content. Ideally, try to keep your content-to-code ratio as high as possible (more content than code, obviously).
- Structural organization is greatly improved by using h1, h2, h3 tags insuring that the Search Engine Spiders know what you're trying to show them. Font tags cannot communicate a page title or header, even if the font size is larger. Either way, don't forget to include important keywords relevant to your target audience (i.e. If you're selling motorboats in a small town in California, use "Motorboats in Small Town, California" rather than "Motorboats"). In addition, if you would like your h1 information to appear after your body tag (or near the top of the page's code) but don't necessary want the h1 information to be visually displayed at the top of the page, then CSS will allow you to using absolute positioning which gives the designer freedom to place the h1 information practically anywhere on the web page.
- No more JavaScript rollover effects. CSS allows the designer to program a variety of rollover effects (images, text decorations, etc) that are defined within the CSS style sheet. This method allows the Search Engine Spiders to focus more on your website's content rather than unnecessary JavaScript markup. If you're looking for fancy, Flash-like rollover effects that combine CSS and JavaScript resulting in graceful, lightweight rollover animations, then take a look at the latest that jQuery or mootools has to offer.
In a nutshell - if you're at all concerned about SEO for your website, then use CSS instead of tables. The aforementioned points illustrate how even the most basic features that CSS has to offer can make a significant difference when optimizing your website for the search engines.