Comparison: CSS vs. Table-Based Layouts

Having switched to CSS-based layout design a couple of years ago, I find it odd that there is still a debate going on about whether to code websites with CSS or tables. There seems to be so many reasons why CSS-based design is far superior to table-based design, how can anyone argue? But somehow many web design companies are stuck in the old way of doing things. Here I have listed some of the top differences between CSS and table-based layouts, but first a little history.

Understanding the Layout Structure

Before CSS came along, most programmers relied on tables to layout the content of their website. A table-based website consists of many rows and columns much like an Excel spreadsheet. Background images are often split into a bunch of pieces with each piece inserted into a different cell. Empty cells with transparent images are used to create space around content.

CSS-based layouts consist of boxes that can be independent from each other. Each box can have its own border, margins, color, background image and more. Boxes can be assigned classes so that all boxes in that class have the same styles applied. Boxes do not have to line up as cells in tables do. Empty space is created by setting margins and padding. To get a better understanding, google CSS Box Model.

If this is gibberish to you, that’s okay. Just know that while both methods can be used to achieve the same website look (although CSS provides the flexibility to do more than tables can), there are many important differences to consider.

1. Page Load Time

Table-based websites require a lot of code, meaning that your Internet browser has more to read before loading the page. Table-based websites take 2-4 times longer to load than CSS-based websites. That little extra time can mean the difference between a visitor looking through your website or becoming impatient and going somewhere else.

With less code and smaller file sizes, CSS websites will take up less bandwidth. If your hosting provider charges you based on how much bandwidth you use a month, a CSS website will result in significant savings.

2. Visual Consistency

Every page of a website can link to the same external CSS file, which means the styles used in each page can be the same. For example, you probably wouldn’t want your links to be blue on one page and green on another. CSS sets what color your links should be for the whole website, and if you do want a certain section to contain different color links, you can assign a class to those links to make those a different color.

With table-based layouts, often each style is defined individually on each page. Say one day you decide you want to change the link color to purple on all pages. With CSS, you can change the color one time in the external file and the whole website will be updated. With the traditional table-based method, you have to change every instance where you defined the style on every page. It is much easier to maintain visual consistency throughout a website with CSS. This leads us to the next big difference.

3. Ease of Maintenance

Since CSS allows the design of a website to be separate from the content, making a design change is very fast and efficient. By changing a few things in the stylesheet, the whole site can have a different look in minutes. With a table-based layout, every page in a website would need to be modified to make even a minor change. If you want to keep website maintenance costs down, be sure your developer codes with CSS.

4. Search Engine Rankings

While having a CSS website is no guarantee that your website will appear in search engines, it sure doesn’t hurt. Since CSS websites contain less code and have smaller file sizes, search engine spiders can crawl through the websites more easily. Also, structural organization is greatly improved, allowing search engine spiders to determine what content is more important than others. For example, a search engine will weigh keywords in heading tags more heavily than paragraph content. With a table-based website, search engine spiders have a hard time deciphering the content from the code and may not rank these pages as well.

5. Accessibility

CSS websites are also easier for the disabled to read with screen readers and other devices. Site navigation can be made to appear in a bulleted list when CSS styles are disabled. Content flows logically without disruption by table cells.

6. Design Flexibility

With CSS, designers aren’t restricted to rigid, grid-based layouts. White space is easy to create and adjust. Images can be overlaid on top of other images. Changing your mind on a design element is not a hassle as it can be easily updated. Designers are free to be creative!

Is There Anything Good About Tables?

Tables are perfect to use for one thing: tabular data. If you have a long list of names and phone numbers for example, it would be acceptable to arrange the data in a table (though some CSS purists may fight you on it). While tables were never meant to be used for design layout, they did provide a temporary solution to making websites look nice. But now that CSS exists and is accepted by modern browsers, it’s time for tables to get back to their original purpose.

So why isn’t everyone coding with CSS?

There is one main reason: learning curve. CSS requires a little bit of time to get used to. It can be difficult to create a CSS website if a developer is using a program that writes the code for them, though programs are getting better. Some developers begin the transition by creating hybrid websites, using tables for the layout but styling the tables and content with CSS. With the wealth of information online and the many base templates that can be found to start from, more and more web developers will come around to the CSS way of thinking.