How CSS Affects SEO (as Compared to Table-Based Layout)

I have just finished a very massive piece of work related to converting the official Handy Backup website to tableless HTML/CSS layout. It took almost two weeks of intensive coding and testing, and I sincerely hope that I didn’t miss anything important.
The whole site was originally built in tables that, roughly speaking, started in one template, continued in another and ended in the third one. Although the tables were hand-coded in the CMS across several database tables, the structure itself was not overcomplicated, and I could start with some specific category or page, e.g. homepage. But I always wanted to know if Google really cared for correct markup, so I decided to conduct a large experiment that would affect the entire site rather than a small set of pages.

Why It is Recommended to Avoid Tables

Generally, there’s nothing wrong with using tables. Table markup is great to present tabular information (who’d argue?), and there are many things can’t be properly done without them at all (I’ll talk about it in the end of the post). But if you read the official W3C specifications of HTML 4.01, you will see clear recommendations to not use tables for page formatting (http://www.w3.org/TR/html401/struct/tables.html):

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Besides the above, I can also see three other important points against tables:

1. Flexibility. It is much, much more difficult to make changes to your website if it is based on tables, than div/css. Say that you have a page with several similar blocks containing product info, and a general description for a brand/category (similarly to what I have at Handy Backup’s main page).

Any change will require you to find the respective <td> in the code and manually fix it… Okay, for minor stuff like changing the places of two blocks, this can be done two steps. But, for example, to remove a product you will also need to change the colspan attribute in the bottom row (and since in most cases pages are more complex than a 2*3 table, you will need to do it in all rows!) And for dynamically generated pages, e.g. when a page must display all products from a category, your CMS will also need to generate a dynamic table which may become a real problem. The biggest advantage of CSS is that it gives you the control over layout via a single file and takes the hassle out of going to the code.

2. Secondly, speed. Pages that are made with the use of several levels of nested tables are loaded and rendered slower that those with clean CSS-based divs. A couple of days ago official Google Webmaster Central blog announced that Google is finally including site loading speed as a factor of search ranking:

Speeding up websites is important – not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. [...] We encourage you to start looking at your site’s speed [...] not only to improve your ranking in search engines, but also to improve everyone’s experience on the Internet.

Getting rid of the countless HTML table markup tags (<table>, <tr>, <td>, plus with a variety of attributes like width, height, colspan/rowspan, cellpadding, etc.) also reduces page size (directly, in terms of code) and makes it load faster. Of course, it’s too early to discuss how loading speed will change the SEO industry, but it’s always best to plan ahead, rather than trying to catch up with the competition.

3. Another important aspect is readability of the page. Here’s a quote from Google Webmaster Central (http://www.google.com/support/webmasters/bin/answer.py?answer=100782):

While your site may appear correctly in some browsers even if your HTML is not valid, there’s no guarantee that it will appear correctly in all browsers – or in all future browsers. Clean, valid HTML is a good insurance policy, and using CSS separates presentation from content, and can help pages render and load faster.

Worldwide expansion of smartphones, PDAs and various mobile devices has increased the significance of being able to deliver different site layouts to different types of visitors. On a small screen, tables with their fixed widths require you to scroll horizontally: this is not only inconvenient for mobile users, but also limits the exposure of the information contained in the right blocks. In the above example, the visitor is more likely to scroll down, than to the right, completely missing products 2 and 3.

The problem is easily solved by making the page load a different CSS file if the server detects that the visitor comes from a mobile browser. The idea is to create some “mobile.css“, that will bring most important divs to the top, hide stuff you don’t need, define how to show blocks appearing on the “onmouseover” events, etc. In a nutshell: make your site deliver the best possible experience.

After all, formatting text via divs and CSS makes it much more human-readable if you go to a source code of the page, or disable styles. Search engine indexing robots are like text browsers, they don’t recognize any backgrounds or images, and there’s a common SEO advice obtained by trial and error: the higher text/markup ratio, the better.

A quick Google search returned a bunch of Table-to-CSS converters: I didn’t actually try any of them, but according to the descriptions, they should work well for “straightforward” conversions, i.e. for tables that you can directly replace with divs. For complex websites where the tables are distributed across several files or database tables, it is recommended to do everything manually.

Something I Couldn’t Do Without Tables

Sometimes, CSS layout can’t completely replace the functionality given by tables. During the redesign, I’ve encountered the following problem: there’s no way to vertically align multi-line text in a block via CSS. For a single line you can make something like “height: 30px; line-height: 30px;“, but if you need to center more than one line, there’s no clear solution. Generally, it should be done with the “display: inline-block;” attribute, but it is not supported by IE6, IE7 and Firefox 2. There are some hacks, but the easiest way to do it is to create a table with a <td valign=”middle”>.

Handy Backup website has many hundreds of pages, and I am quite sure that if the changes I made really affect SEO in any way, I will notice it. If there are any changes, I’ll be sure to describe them here – stay tuned!

Posted by Alexander Rassokhin, Project Manager (and webmaster/SEO)

Tags: css, seo

This entry was posted on Tuesday, April 13th, 2010 at 2:53 pm and is filed under Internet Marketing. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.