If you were to browse the internet and look at the source code of a few websites, you are most likely to find that table-based layouts are most prevalent. And if any CSS is used, it is often included only to control fonts and colors. So why are we and other developers advocating CSS layouts?

Below, we list six reasons why table-based layouts should be avoided.

Firebug

Why CSS Layouts Are Better Than Table-Based Layouts
By having a CSS layout, you are able to separate style from content. This has several advantages, as you’ll see below:
  1. Better search engine rankings. CSS Layouts create a better code to content ratio. Additionally, content can be easily organized so that it is closer to the top of a page. This ensures that it is indexed by search engines which limit how many bytes of a page are crawled.
  2. Accessibility. CSS enables your website to degrade gracefully. This means that your site can be viewed on a wider variety of platforms, browsers, and devices (such as PDAs or smart phones).
  3. Visual consistency throughout website. One advantage of CSS layouts is that all pages can share a common stylesheet. This ensures a certain degree of consistency throughout the website.
  4. Saves bandwidth. CSS layouts are less bulky than table-based layouts. If your website has high traffic, you’ll notice immediate savings in bandwidth, which could potentially reduce web hosting costs. Also CSS stylesheets are cached by browsers.
  5. Pages load more quickly. An HTML file for a CSS layout is relatively simple compared to its table-based alternative. This means that CSS layouts have a smaller file size and load more quickly. In addition, because CSS stylesheets are shared amongst all files, they are cached, also resulting in a faster load time.
  6. Easier to redesign. If you generally contract a web developer to make design changes to your website, then you’re probably interested in reducing costs. A CSS layout will do just that. With CSS, site wide changes can be made by modifying stylesheets. And in most cases, the actual HTML pages won’t need to be modified. Because of this relative simplicity, redesigns can be done very efficiently and quickly.
So Why Do Most Websites Use Tables?
Despite all of the benefits of using CSS, many websites are built using table-based websites. This occurs for the following reasons:
  • Many web developers are most familiar with table-based layouts. CSS requires a ‘new’ way of thinking.
  • Popular software packages, such as Adobe Photoshop & ImageReady, FireWorks, and Dreamweaver, create table-based layouts by default.
  • It is very easy to achieve cross-browser-compatibility using table-based layouts. However, depending on your CSS layout, it might be necessary to jump through a few hoops to get your website to do what you’d like.
When Can I Use Tables?
Tables were made to display tabular data. For example, two appropriate uses of tables would be to display a) a price list and b) a spreadsheet. Tables might also be used for large web forms.

While you might not find it practical to overhaul your website and replace it with a table-less layout now, you should keep this in mind for any future websites or redesigns. Sure, table-based layouts currently dominate the internet, but CSS layouts are the way of the future.

Older HTML tags are being deprecated one-by-one… By abandoning tables, your website is more likely to be compatible with future standards and browsers.