What Does it Mean to Design a Website with Tables?

There are two general techniques used to design websites. These techniques are table-based design and css-based (or "table-less" design). For a general overview of the differences between these techniques you can read my CSS vs. Tables article.

As mentioned in referenced article above, designing with tables is considered to be an older way of coding web sites. I say coding because the actual design of the site doesn't change whether you are using tables or CSS. With both techniques, you traditionally make a mockup in a program such as Fireworks or Photoshop and then use that mockup to code the actual site.

With a table-based design, the mockup that is created is then used to create images for the website. The technique is called "slicing". Slicing is the process whereby a graphical mockup is sliced into smaller images, and these images are then used to make up the website.

While a site is rarely composed of all graphical images (even a table-based design) slicing is useful for creating elements such as navigation bars. Prior to the advent of CSS, slicing with tables were the preferred technique for creating precisely positioned elements (one of the distinct advantages of CSS is that CSS allows this precise positioning). The disadvantage of using tables and slices is that more images take more time to load on the web page, and graphic images (even those with text) are NOT indexed by search engines.

So why would anyone use tables? Good question. As technology improves, more and more web browsers support CSS and CSS is slowly becoming standardized. Because, however, there are many differences (and subtle tweaks) needed to make a CSS-based website compatible across multiple browsers, table-based designs are often still used. Furthermore, older browsers (e.g. IE for the Mac have poor CSS support), using some form of table-based design is needed if your audience will include a large number of users with older browsers.

The reality in practical web design is that many sites are built with a combination of tables and CSS in order to take advantage of the best that tables and css techniques have to offer.