13 Reasons Why CSS Is Superior to Tables in Website Design

[bholus10]

#mainContentLeftColumn { property: value; }
#mainContentMiddleColumn { property: value; }
#mainContentMiddleColumnLeftColumn { property: value; }

As you can see, the deeper into the web site’s structure you go, the more detail the selector names have. With these descriptive titles, a team member who knows very little about the layout of

a website or organization of a style sheet should easily be able to find the exact selector(s) in the style sheet and edit them accordingly without having to make guesses about the meanings of different selectors.

Not only will this save your team time in the long run (as previously mentioned, each team member won’t need to be briefed on the structure of the style sheet), but it will also save time for an individual working on a project by themselves.

With table-based layouts, there is no advanced selector labeling available. Instead, tags such as table, font, tr, and td plague the content documents. Since these elements

be labeled, this can make table-based designs a nightmare for teams and individuals to manage. Just say “NO” to table-based designs!

11. Increased usability

Usability - what is it, and why does it matter? According to Wikipedia, usability is:

...a term used to denote the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.

From a website perspective, usability refers to the ease in which people are able to navigate, interact, and browse a website. Without strong usability, a website is destined to fail. Although there are a number of reasons why usability is better with CSS than with tables, we are just going to mention a few for the sake of time.

Printer-friendly style sheets

CSS enables the web designer to serve different style sheets for different media types - one media type in particular is a print style sheet (media=”print”).

On table-based layouts, oftentimes the user will be forced to click the “Printer Friendly Version” on each article that they wish to print. This can become cumbersome, especially if a user prints a lot of material on a website.

CSS skips the “Printer Friendly Version” step all together and will serve up a printer-friendly version of an article or web page simply by instructing the browser to print via the File menu. No more searching the website for “Printer Friendly Version” ****ons.

No more having to be online to print article. As a matter of fact, once the print style sheet is downloaded, it is stored within the browser’s

cache (stored locally on the user’s computer) and the printer-friendly version can be printed offline, using the parameters contained within the cached print style sheet to format the document to be printed accordingly.

Faster page downloading with CSS

As we explained earlier, table-based layouts take longer to download. Because the information on each page is independent from all of the other pages within a website, table-based layouts must be downloaded over, and over, and over again.

CSS-based layouts, on the other hand, cache the style sheet information the first time a web page is loaded; therefore, it is only the unique content that is loaded on each page, which makes CSS-based web pages load much quicker than table-based web pages.

Here are a few other reasons why page loading is slower with table-based layouts than with CSS-based layouts:

* Browsers read through tables twice before properly displaying their contents - once to determine the structure, and once to determine the content
* Tables only appear on the screen when the entire table has been downloaded and rendered
* Tables are choked full of spacer.gifs (see 13. No spacer gifs) which further bloat a web page

Users hate waiting for web pages to load. If they have to wait too long, then they may decide to leave your website and find a quicker website with similar content.

From a usability perspective, CSS-based designs are much more usable than table-based designs simply because users generally don’t have to wait as long for a page to be loaded.

Plain and simple: a faster download speed leads to increased usability, which, according to a study by Jakob Nielsen from useit.com, can increase your web site’s sale/conversion rate by 100%. Need we say more? As a matter of fact, yes, we do - Just say “NO” to table-based designs!

12. More complex layouts and designs

From a web designer’s perspective, the fact that CSS-based layouts have the ability to be much more complex than table-based layouts should be enough of a reason to use CSS instead of tables when designing a website.

A web designer’s creative boundaries should not be limited by the tools he/she uses, but instead, by their own creativity. When using table-based layouts, web designers are stuck creating

layouts that are rigid, inflexible, and based on grids. CSS-based layouts, on the other hand, allow the user to be as creative as their imagination allows them to be. Absolute positioning of elements paired with the

z-index property allows CSS-based designs to position elements on top of one another (like layers in Photoshop), allowing for more unique, complex, and beautiful layouts.

In addition to using layers in CSS, the language itself includes tons of unique styling features that table-based layouts cannot offer. Rather than listing some of these great features,

we recommend purchasing a book on CSS (CSS: The Definitive Guide, by Eric Meyer is one of our favorites) and learning about these features at your own pace.

[bholus10]

The beauty of CSS

So what kind of layouts can be created with CSS-based designs? CSS Mania showcases some of the most beautifully designed CSS websites from all around the world.

After browsing CSS Mania and other CSS galleries, we’re certain that you’ll be thinking one thing: Just say “NO” to table-based designs!

13. No spacer gifs

Besides something that sucks, what is a spacer gif? Wikipedia defines a spacer gif as:

...a transparent image, often used to control blank space within a web page, that can be resized according to the width and height dimensions it is given. Spacer GIFs are not browser specific.

The reason a spacer GIF is invisible is so that an HTML developer can create a table cell and fill the background with a specific color that can be viewed through the transparent spacer GIF.

Although it served a purpose prior to CSS, spacer gifs are no longer necessary. Background colors can now be defined by using the “background” property in CSS. Spacer gifs bloat up a web page by adding additional junk markup to the already enormous

volume of junk markup found within table-based layouts. Other than that, there isn’t much else to say about spacer GIFs. Don’t use them. Just say “NO” to table-based designs!

13 Reasons Why CSS Is Superior to Tables in Website Design

If you’re at all concerned about the performance of your website, accessibility, usability, hosting costs, having complex and unique layouts, quick website-wide updating, and clean, simplified, structured markup, then CSS-based layouts are your only option. If you don’t know CSS, then learn it. It isn’t that difficult. Just like anything else, it takes time. We can promise you one thing though:

if you do take the time to learn CSS and migrate from tables to CSS, you won’t regret it. Your website will be a better place for everyone to visit, and you will more than likely reap additional benefits not possible when using table-based layouts.


No matter if you’re a professional web designer with a large portfolio, an amateur web designer just starting out, or the owner of a small business or personal website looking to grow online, CSS will benefit you much more than table-based layouts and should be your tool of choice used to create a new website or upgrade an existing one.