Out with HTML tables and in with CSS

By moosnews
March 8, 2010

There was a time, many “Internet years” ago, when most websites were designed using HTML tables to give structure to the layout. This made it easier to achieve the desired placement of page elements; but the result was very cluttered page code. Not only was this a development and maintenance nightmare, but it wasn’t very search engine friendly. Then, along came CSS, and everything changed.

CSS, cascading style sheets, is a method for designating the style and placement of page elements without the necessity of table-based layouts. It is based on a simple syntax. It can be applied inline, in the document’s head section, or in a separate file. This has many advantages, not the least of which is search engine friendliness.

Since using CSS separates content from design, the code for each page is much easier to read. In fact, it reads more like a flyer than page code in many cases. That ease of reading also applies to search engines and web crawlers. But perhaps a bigger SEO benefit to using CSS is that it allows you to position your most important content at the top of your page code.

With older layouts, the prime spot on the page was taken up by code for menus and headers, etc. This, of course, meant that search engines and web crawlers, which read page code, not the view that end users experience, often didn’t have an opportunity to crawl and index the really important content, since it was further down the page.

One of the biggest advantages of separating design from content with CSS is the ability to rapidly deploy changes to the design of a site. If your boss comes to you and wants to change the color scheme for a five hundred page website from blue to red, all you have to do, providing that your site is properly architected using best practices for design and layout with CSS, is change your CSS code in one place. The result then “cascades” to the rest of the pages. Compare that to changing five hundred pages manually.

Cascading style sheets also give you the ability to manipulate your layout in ways you wouldn’t dare attempt with table-based layouts. More granular control means you can make your site look better with CSS.

There are many tools available to help you write CSS and incorporate it into your site. Most IDEs for web development, tools like Dreamweaver and Visual Studio, come with CSS authoring and integration built right in. There is also a wealth of information online about CSS.

Cascading style sheets are the professional standard in website design. It is a technology that should definitely be in your toolbox.

This entry was posted on Monday, March 8th, 2010 at 8:37 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.