Many web sites on the Internet today still use tables for lay out. It is time to educate web developers and companies about why using Cascading Style Sheets (CSS) is better. Tables were never intended for web page layout. Rather, the HTML table was designed for presenting tabular data. There are many insidious but huge problems with resorting to tables for web page design.

Quick summary of why CSS is better:

  1. Your pages will load faster because of clean code (less HTML is needed to create the page and make it work = less bandwidth)
  2. Edits, changes, and redesigns will be easier, less expensive and more efficient (because the design is separated from the content and controlled in a style sheet instead of each HTML page)
  3. Better for search engine results (Google can read through your page quicker and will not read useless tags and meaningless spacer images)
  4. Good for accessibility and usability amongst users on different Internet browser windows, phones, print views, and even without images.

A more technical explanation. Reasons to avoid tables for layout:

  1. If you’re using tables for layout then you’re mixing presentation with content, so your bandwidth usage is higher than need be, as for every page your visitors view, they have to download the same presentational data again and again.
  2. Redesigns are a lot harder than they need to be. Since tables can only be laid out on screen one way, if you want to change the layout of a table site, you have to change your tables in every single one of your pages. Not a nice job. With a full CSS site, all you need do is change that one CSS file.
  3. Tables really don’t help accessibility for viewers with disabilities. Although your layout may look logical displayed on screen, the order in which it will be read by, say, screen reading software, may be very different. Many countries now have their own laws stating that websites must be accessible to all.
  4. Likewise, people visiting your site using PDAs, mobile phones, and the like do not have the screen space that your big flashy table layout demands. A well written CSS site will generally scale far better to smaller and larger screens than a comparable table layout will.
  5. Tables are complicated to look at in HTML. Before you even get to any content inside them you’re at three levels of indentation. Embedded tables are especially painful to edit.
  6. Tables can hurt search engine ratings. If you’re using a “classic” left hand navigation table, your navigation will be placed before your content in your HTML file. Because Search Engines generally place more importance on the things nearer the beginning of a page, the chances are your content will be largely ignored.
  7. Tables can take longer to display correctly than CSS. If you use Internet Explorer, you’ll have seen this many times when loading tabled sites. While everything on the page is downloading, the IE will keep re-rendering, bouncing the contents of the page back and forth until the download is complete and it knows where to place everything.

The purpose of this article is to educate our clients and other developers about the difference between the two common methods of building web pages. More web sites should be built with proper semantic markup.

Think basics: paragraphs will be inside P (paragraph) tags, lists are in UL (unordered list) and OL (ordered list) tags, etc. For bits that your want to move around the page for your actual layout, use DIV tags.

Check out this great article too. The author takes the microsoft.com web page which used tables and spacer gifs abundantly, then removes all of the tables and implements CSS design and reduces the original file size of 62%! “If multiplied out by an average of 38.7 million page views per day, that 25 KB savings per page could add up to about 924 GB in bandwidth savings per day, or 329 terabytes per year.”

(Sources: Go Table Free, Why Tables are Stupid, A Fight to the Death, Why use CSS, and plain old experience from building web sites in both ways for many years!)

Contact TBH Creative today for more information about CSS vs. Table layout. We can evaluate your web site and offer solutions. We can re-code your site using proper CSS and validated HTML, as well as provide a full evaluation of your current site.