13 Reasons Why CSS Is Superior to Tables in Website Design

1. Faster page loading

Table-based layouts are notorious for having an extraneous amount of junk markup. In case you’re unaware, Wikipedia defines markup as:

   a set of annotations to text that describe how it is to be structured, laid out, or formatted.

Pertaining specifically to web design, markup is the XHTML/HTML code used to structure, lay out, and format the design of a website. So, why are table-based layouts accused of containing junk markup? The easiest way to answer this question is to show a live example of a web page marked up using tables versus that very same web page marked up using CSS. Sitepoint.com already put together a very nice example, so rather than creating our own, we’ll just reference theirs.

First, view the source code contained within their table-based layout. This page has 245 lines of code. Notice within the markup there are an obscene number of instances of:

• td align
  
• td width
  
• bgcolor
  
• width, height
  
• br (line break)
  
• font tags (font face, color, size)
  
• cellpadding, cellspacing, border
  
  

The biggest drawback to using tables is that both the content (text, images) and visual information (layout, positioning, text sizes, etc) are contained within the same HTML, PHP, or ASP file. One of the biggest advantages to migrating from a table-based layout to a CSS-based layout is the fact that the content is stored within the HTML, PHP or ASP file and the visual information is stored within a CSS file(s).

Next, view the source code contained within Sitepoint.com’s CSS-based layout. This page has 170 lines of code. However, Sitepoint.com decided to include the style sheet information internally rather than externally in a .CSS file. Had the style sheet information been included in a separate .CSS file, then this page would only have around 45 - 50 lines of code - about 5 times less than what the same table-based layout had. Wow!

Note: When a style is applied to more than one page, make sure to use external CSS style sheets rather than including the style information internally (on the same page as the content). Internal style sheets are only appropriate if there is one page using the style information. For more on internal and external style sheets visit w3schools.com.

Lets take a look at the code used within the CSS example. As you can see, junk markup found within table-based layouts are replaced in CSS layouts. These replacements include:

• divs replace tables as the main structural elements
  
• no more height, width, cellpadding, cellspacing, border, bgcolor, font tags; all layout information is contained separately within the CSS stylesheet
  
• h1, h2 tags replace font tags for headings
  
• br tags are eliminated
  

A load time that could make you cringe

When comparing the load time of the table-based layout versus the load time of the CSS-based layout, the table layout took 2 - 4 times longer for the page to load (.25 - .4 seconds versus .1 - .12, respectively). Although we’re talking about milliseconds in this particular example, it doesn’t matter. People hate waiting for websites to load. It might just be those extra milliseconds that make an impatient visitor choose to point to a quicker website with similar content. Just say “NO” to table-based designs!

2. Lowered hosting costs

Some hosting providers have payment plans for their customers that are based on the amount of bandwidth that is used each month. Bandwidth is the amount of traffic that is permitted to occur between your website and the rest of the Internet. The example used in the previous point, 1. Faster Page Loading, illustrates the difference in load times between a web page using a table-based layout (.25 - .4 seconds) versus that same web page using a CSS-based layout (.1 - .12 seconds). In that example, the table-based layout’s file size was approximately 16kb (images not included) while the CSS-based layout’s file size was 8kb (images not included). We also mentioned in the above example that the style sheet was contained internally within the HTML file. If one were to remove the style sheet from the HTML file and link it as an external style sheet, then the size of the CSS-based HTML file would be 4kb. 4kb! That is a reduction in file size of 75% (compared to the table-based layout’s file size).

So what does this mean and does it apply to you?

Each person who opts to pay a hosting company to host their website must choose a hosting plan. There are tons of different plans available, and unless your hosting plan includes unlimited bandwidth, then the aforementioned example is something that should concern you.

As an example, lets pretend that your current hosting plan allows for 1 gigabyte of bandwidth per month. If your website only had the table-based layout page on it, then that would allow for about 65,536 page views of that page. Under most hosting plans, once you go over your allotted bandwidth, you either:

1. Pay additional, marked up fees, based on the volume of additional traffic (think of going over your cell phone plan’s minutes, being charged per minute for each minute used outside of your predetermined plan, and at the end of the month being surprised by a huge bill).
   
2. Your website is temporarily shut down until you purchase a chunk of more bandwidth or upgrade your plan.
   

In comparison, if your website only has the CSS-based layout page, then that would allow for about 131,072 page views. Thats 2x the amount of traffic compared to using the table-based layout page!

Although this is an example of a single page, the numbers really start to become shocking when you have several pages on a website (like most people do). If you’re using a table-based approach, then each web page will load the content AND the style information independently, each time a new page is loaded. However, if you’re using a CSS-based approach and have an external style sheet attached to all of your files, then that style information will only be loaded a single time.

The numbers don’t lie

The bottom line is that the amount of bandwidth (and consequently, money) you can save using a CSS-based approach are quite astonishing compared to using a table-based approach. The numbers don’t lie (and neither do the higher hosting bills you will receive when using a table-based approach). Just say “NO” to table-based designs!

3. Redesigns are more efficient

Redesigning a website using tables is significantly slower than redesigning a website using CSS. As we mentioned earlier, table-based designs mix visual data with content. On the other hand, CSS-based designs separate visual data from content. By separating the visual data from the content, a web designer is able to easily make changes to the appearance of a single page (or multiple pages) by simply editing the external CSS style sheet. This is one of the biggest strengths of using CSS style sheets: Universal, site-wide updating. More on Universal updating later in the article. Just say “NO” to table-based designs!

4. Redesigns are less expensive

Have you ever heard the phrase, “Time is Money”? This phrase can be applied to redesigning a website. Assuming you are familiar with CSS and some of the browser specific bugs that unfortunately come with it, redesigning a website using CSS should take much less time than redesigning a website using tables. If you’re paying someone by the hour, then you will most likely find yourself paying less if the designer(s) is redesigning your website using CSS (simply because it shouldn’t take them as long compared to redesigning a website using tables). Just say “NO” to table-based designs!

5. Visual consistency maintained throughout website(s)

When using external CSS style sheets, it is much easier to maintain visual consistency throughout a website. Rather than having to edit the code of every page, adjusting column widths, column heights, spacer gifs, and all of the other ugliness that comes with table-based layouts, CSS gives the designer control over elements that are used throughout a website, on a few pages, or on a single page.

For example, say you want to change the width, height, and background image of the header that is found on every page of your website. Rather than having to edit every single page on your website (or using find and replace to search through a specified directory or set of documents), all you would need to do is:

1. open up your external CSS style sheet, find the “header” div (or whatever you decide to call it)
   
2. change the values for the properties “background-image”, “width”, and “height”
   
3. upload the style sheet with the new settings.
   

Bam! Assuming that you’ve uploaded the new background image, every page within your website that includes the header div will display the new header background image with its newly assigned width and height attributes. Very simple, very fast, very consistent. When using table-based layouts, it is easier to lose visual consistency due to the fact that each page’s style, layout, and design are independent from each unique page within a website. The reason for this (as mentioned earlier) is because table-based layouts include the visual data and content within the same page - intertwined. CSS-based layouts keep these two elements separate from each other, which not only makes tweaking visual information easier, but also allows you to change the appearance of divs, body text, headers, and all of the other elements included site-wide within a website simply by changing a few values in a CSS style sheet. Again, any page using the elements that are located within the style sheet will automatically display their assigned attributes. Unlike table-based layouts, this feature guarantees visual consistency throughout your website. Just say “NO” to table-based designs!

6. Better for SEO

In case you’ve missed the web marketing acronym train, SEO stands for Search Engine Optimization. In case you know very little about web marketing, Search Engine Optimization, according to Wikipedia:

   is the process of improving the volume and quality of traffic to a web site from search engines via “natural” (”organic” or “algorithmic”) search results for targeted keywords. Usually, the earlier a site is presented in the search results or the higher it “ranks”, the more searchers will visit that site.

Chances are, no matter what the purpose of your website, having more people visit your website is something that would certainly be welcomed. If you’re using a table-based layout, then the amount of traffic to your website may not be as good as it could be if you were using a CSS-based layout. Crazy, isn’t it?

There are a number of reasons why CSS is superior than tables for SEO:



• Smaller file size makes it easier for Search Engine Spiders to crawl through your website.
  
• Less junk markup makes it easier for Search Engine Spiders to decipher between code and content. Ideally, try to keep your content-to-code ratio as high as possible (more content than code, obviously).
• Structural organization is greatly improved by using h1, h2, h3 tags ensuring that the Search Engine Spiders know what you’re trying to show them. Font tags cannot communicate a page title or header, even if the font size is larger. Either way, don’t forget to include important keywords relevant to your target audience (i.e. If you’re selling motorboats in a small town in California, use “Motorboats in Small Town, California” rather than “Motorboats”). In addition, if you’d like your h1 information to appear after your body tag (or near the top of the page’s code) but don’t necessary want the h1 information to be visually displayed at the top of the page, then CSS will allow you to using absolute positioning which gives the designer freedom to place the h1 information practically anywhere on the web page.
  
• No more Javascript rollover effects. CSS allows the designer to program a variety of rollover effects (images, text decorations, etc) that are defined within the CSS style sheet. This method allows the Search Engine Spiders to focus more on your website’s content rather than unnecessary Javascript markup. If you’re looking for fancy, Flash-like rollover effects that combine CSS and Javascript resulting in graceful, lightweight rollover animations, then take a look at the latest that jQuery or mootools has to offer (thats for another article).
  

In a nutshell - if you’re at all concerned about SEO for your website, then use CSS instead of tables. The aforementioned points illustrate how even the most basic features that CSS has to offer can make a significant difference when optimizing your website for the search engines. Just say “NO” to table-based designs!

7. Accessibility

The definition of accessibility, according to Wikipedia:

Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible.

There are many reasons why using CSS is advantageous over using tables:

• Separating content from visual information
  
• Universal cross-browser style declarations
  
• Placement of interactive elements
  
• Multi-medium support (web browsers, screen readers, personal data assistants)

Separating content from visual information

Structured content is managed by markup languages such as XHTML. Predefined tags (h1, h2, h3, p, li, ol, ul) allows content to have structure by identifying elements as headings, paragraphs, lists, and other common document constructs.

Visual information (presentation) is separated from the content and no longer needs to be embedded into each page’s content. Formating visual attributes are defined in a separate style sheet document(s) which allows the designer to apply new formatting to content without the hassle of having to format the content itself.

Universal cross-browser style declarations

Giving the user the ability to enlarge fonts in their favorite web browser is crucial. Not only can this make reading more comfortable, but it is also essential for users who have vision impairments. The W3 (World Wide Web Consortium) recommends the use of relative length units (em) rather than absolute units (in, cm, mm, pt, pc).

It is not recommended to use pixels to declare font sizes since IE6 (Internet Explorer 6) is unable to enlarge text if the text is defined in pixels. Because backward compatibility is very important and also because IE6 still commands a large percent of the browser market share (30.7% - w3schools.com), it is integral that the use of relative units for font sizes is adhered to.

That being said, all browsers have a different, default font size for rendering the text when no CSS is present. Therefore, it is good practice when designing a website for cross-browser compatibility, to always declare a default font size within the body tag:

   body { font-size: .7em; }

Another important attribute for various XHTML elements is the user of the line-height attribute. Just as most browsers have a different default font size, so do they have different line-heights. Headings, paragraphs, and lists are just some of the structural elements which should have a line-height attribute. For example, to define a consistent line-height for paragraphs within a website, use the following:

   p { line-height: 1.5em; }

Placement of interactive elements

To accommodate users with physical disabilities that affect manual dexterity, be careful not to place links, buttons, or form fields too close together. Not only can this make things confusing from a visual perspective, but it can make the selection of these elements difficult for handicapped users.

There are a number of things that can be done to facilitate easier selection of elements:

• Increase interlinear space values (apply the line-height attribute, as mentioned above; a value of 1.5 is often a good place to start)
  
• Increase the margin and padding around items in vertical and horizontal lists of links;
  
• For a horizontal list - li { margin-left: 5px; margin-right: 5px; }
  
• For a vertical list - li { margin-top: 5px; margin-bottom: 5px; }
• Provide an adequate amount of space between form buttons and between form fields
  

Multi-medium support (web browsers, screen readers, personal data assistants)

Perhaps one of the biggest advantages to using CSS over tables from an accessibility point-of-view is the ability to serve different style sheets to different mediums and devices. Because information on a screen reader or personal data assistant appears differently than on a computer’s web browser, it is important to include alternative style sheets that include basic formating rules for a particular device. Not only will this expand the accessibility of your website to all sorts of web-enabled devices, but it is just good practice in general.

Rather than listing all of the different recognized media types, head over to W3.org and take a look at their extensive list. Not only does their page list all of the recognized media types for various user agents, but it also explains the @media rule and provides a few examples on how to create style sheets for different media types.

Make accessibility standard for your websites, or else!

Accessibility is absolutely necessary this day and age. By making your website more accessible using CSS, not only are you making content consumption and site navigation easier for users, but you’re also accommodating those with various disabilities. And if by chance you don’t care much about accessibility for the handicapped (shame on you), you should - you can be sued for having an inaccessible website.

Can tables do any of the aforementioned accessibility items? No, they can’t. Just say “NO” to table-based designs!

8. Competitive edge (job security)

We get quite a few replies to our posts which contain anti-CSS rhetoric (and we’re almost positive we’ll get some with this article) from people who seem to believe that tables are still useful and acceptable for designing and assembling websites. An interesting observation is that the majority of the time, these table-loving comments come from web designers and web developers who are still using tables to build their websites. This illustrates an important point: some people do not want CSS to replace tables simply because they don’t want to have to learn something new, are afraid of change, make a living using table-based designs or [INSERT another poor excuse here]. If, by chance, you are a web designer who is making a living off of table-based designs, you shouldn’t worry too much. All you need to do is learn CSS - it isn’t THAT hard, seriously!

If you’ve read the majority of this article, then chances are you will agree that CSS has some very clear advantages over table-based designs. Perhaps this is the reason why more and more web design companies are transitioning to CSS-based designs and leaving tables where they should be - in spreadsheet documents. Perhaps that is why more and more web businesses and web startups are looking for designers proficient in XHTML and CSS-based design. CSS is just plain better (yea, we’re biased, so what!).

If you design websites for a living or are studying web design in school or on your own, increase your competitive edge and learn the current technology that is powering web design - CSS. Although booting up an application such a Dreamweaver and creating a table-based layout is quick and painless, you’re not really learning anything by letting the program do most of the work for you. Not just that, but you’re missing out on all of the goodness that comes with CSS (not to mention you’re cheating yourself or your clients by using outdated website technology). Just say “NO” to table-based designs!

9. Quick website-wide updates

Out of all of the reasons contained within this article regarding why to choose CSS over tables, our favorite is the ability to be able to make quick, website-wide updates within an external CSS style sheet. Though we’ve touched base on this a few times throughout the article, (3. Redesigns are more efficient), this is often times one of the biggest selling points of CSS and therefore deserves a bit more attention.

Do you value your time? If you’re like us, then the answer to that question is “Yes, of course I value my time”. So, if you value your time, why would you want to open and edit every single document that contains the element which you want to update within your website (i.e. the header)? Unless you have a fetish for opening multiple website documents, this probably isn’t something you want or like to do.

Enter CSS.

Feel like changing the font family, font color, font size, line height, bullet-image, and letter-spacing of every single list element contained within your website? No problem. Simply open your external CSS file (the style sheet attached to all of the pages within your website - aka “universal style sheet”), find the “li” (list) selector, and add, edit, or delete properties with whatever values you so choose. Save the changes, upload the file, and Bam! - every single list instance (li) will be styled with the latest attributes defined in the external style sheet. Try doing that with tables.

Or what if you decide that you want to change the font family for all h1, h2, and h3 tags on your website? Imagine trying to use find and replace to accomplish this task with table-based layouts. Although this could be done, it will take a heck of a lot longer than by simply editing the h1, h2, and h3 selectors within your web site’s universal style sheet. Website-wide updates don’t get much easier than with CSS. Just say “NO” to table-based designs!

10. Easier for teams to maintain (and individuals)

Just as project management software (mentioned in our article “12 Steps to Creating a Professional Web Design“) simplifies collaboration within web-based projects which have several people onboard, so too does CSS simplify projects with multiple contributers. Rather than having to sift through page after page of junk markup found in table-based layouts, designers only need to open and edit the external CSS style sheet. In addition, as long as members of a team use descriptive selector tags in the style sheets(s), then it will make editing much easier for additional team members to go in and edit the file without needing to be briefed and educated about the style sheet’s contents and structure.

To better explain descriptive selector naming, here is an example of a few elements from a style sheet:

   #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 cannot 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” buttons. 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.
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.

Accept no substitutes - migrate to CSS, and “Just say “NO” to table-based designs! “.