CSS vs Table-Based web design

The latest trend in web design is the move from table based web designs to sites purely written in CSS. The purists will tell you that CSS based websites aren’t compatible with all browsers and that the site takes longer to construct. This article sets out to compare pure CSS designed web sites against tabularised web sites.

Site Construction

Sites constructed purely in CSS are often thought to be harder to create due to perceived complexities of creating the various div tags need to create a table-less web site. The truth however is that CSS based web sites are largely just a simple jigsaw puzzle. The puzzle has a number of pieces – each piece can be a different size but can have common elements. With CSS it is very easy to lay out the various elements of a site quickly using background colours before filling the page with content. Using CSS means that the entire site can be amended easily by changing the CSS file and not having to change every page as with a table based web site. Font sizes, background colors and hyperlink behaviors are all controlled from one common CSS file.

Table based web sites are generally easy to construct but have you ever tried to amend a web page with numerous tables, rows and columns often with tables within columns ? Its extremely tricky to rework a web page created using tables and more often it has been easier to rewrite the whole page in CSS than try and shoehorn the extra content into a congested webpage.

Site Speed

With table based web sites the browser tries to download all the content and images before displaying it to the user – this results in a poor user experience and your visitor is more likely to click the back button and try the next site in the search results. With CSS based web sites the browser displays all of the text on the site and then downloads any images and backgrounds. This results in the user being able to start reading the content whilst the browser downloads the additional elements on the page. This results in a better user experience and a visitor more likely to visit other pages on your site.

Search Engine Friendliness

Where there is no conclusive proof that a CSS based web site will result in better search engine optimization than an identical table based web site, it stands to reason that a web page filled with less code and more content will be indexed much more completely and fully than a table based website where the robot has to try and extract content from the mesh of tables, rows and columns.

Browser Compatibility

Table based web sites generally work on all web browsers and all versions. But who is using these legacy browsers? Research has shown that most web users are using either IE 7/8 or Firefox with a small percentage using Safari on the Mac. CSS based sites don’t work well on IE for the MAC for the simple reason that Microsoft doesn’t support IE on the Mac anymore and the browser has become obsolete. Most web designers build for later versions of IE, Firefox and Safari as these are the ones that are most popular. Browser detection scripts can be used to redirect users of legacy browsers.

Usability

Ok there are going to be occasions where you just can’t beat using tables. In particular when displaying lists or tabularised results it is often easier to use tables than to try and use CSS. ECommerce websites generally use tables on their basket and checkout pages to display details of a customer order or to display complex forms. In these circumstances there is nothing wrong with using tables and for your own sanity just a lot easier to do.

Conclusion

To conclude there is no reason to create your website in tables when CSS can give you a highly modifiable, adaptable and clean web page. CSS based pages load quicker and in my opinion are indexed better by the search engines. There are some niggles with CSS when it comes to cross browser compatibility but these can be overcome by checking your web page regularly during development in Firefox and IE.