Comparison: CSS vs. Table-Based Layouts

Having switched to CSS-based layout design years ago, I find it odd that there is still a debate going on about whether to code websites with CSS or tables. There are so many reasons why CSS-based design is far superior to table-based design, but 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.

What is CSS?

Cascading Style Sheets (CSS) is a stylesheet language that was developed as a way for programmers to separate website content from the design/look of a website. Prior to CSS, all styles such as fonts, colors and sizes were specified, often repeatedly, throughout the HTML markup of a web page. CSS allows programmers to move that content to an external file, resulting in simpler HTML markup.

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.

Did you find my blog post helpful? Subscribe to the RSS feed, subscribe by email, or follow us on Twitter or Facebook to stay up to date with our latest posts on various marketing topics.

Related Articles

How to Choose a Web Designer
Eight Characteristics of a Good Website

Third-Party Resources

What are Cascading Style Sheets?
13 Reasons Why CSS is Superior to Tables in Website Design
CSS Vs Tables: 9 Reasons Why CSS Tableless Designs Are Better

Bookmark and Share



Share

Comments

Jennifer said on December 28, 2010:

I’m really struggling with whether to learn and use CSS for layout. I’ve been a designer for over 20 years and been using tables for layout for 13 years. Most of the sites I create are for small businesses averaging around 10 - 60 pages. (10-20 is most common.) I really like using CSS for formatting text, lists, positioning, etc. In my opinion, combining table layout with CSS works great. I’ve read the debates online. I’m not questioning the benefits of CSS in general. I use it and love it. What I’m trying to figure out is the benefits in using CSS for LAYOUT. Here are my questions which I’m hoping you can help…

CSS Layout Advantages:

1) Easier Site-Wide Changes – CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver template files. I make a change to the template file and boom, it changes on all pages. What’s the difference?

2) Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup. I can’t tell any discernable speed difference between a table layout and a CSS layout’s load time. (Yes, I like clean code too.) Heavy image use and Flash still seem to be the biggest factors in speed. If the human eye can’t tell any difference, then what’s the point? And server space/bandwidth doesn’t seem to be an issue anymore either. Space on the server for all of my client’s sites is generally 1/16 of capacity.

3) SEO – From what I can tell, search engines aren’t indexing or ranking CSS layouts higher than table layouts. The algorithms used for ranking most often are content and inbound links. The spiders are highly efficient at discerning code from content. So what difference does it make?

4) Separation of Style and Content – I guess this one is related #1, ease of updating? This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

5) Greater Consistency – If you use template files and CSS, where is there inconsistency?

Disadvantages to using CSS for layout

1) Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features. This is no small drawback!! It’s huge. I fought this very same battle using tables back in the 90s. Different browsers rendered the design differently. I really resented (and it sounds like many of you do too) all the time I had to spend to get a site to look as it was intended for ALL users. I REALLY don’t have any desire to fight that battle again. I know there are workarounds. But again, if I don’t see the overwhelming benefits, I won’t don my armor or sharpen my weapons.

My questions and concerns are genuine and not an effort to get CSS lovers to defend themselves. If you are designing using CSS for layout, cool! You are a part of an ever growing majority. Personally, if I could instantly convert a design into HTML, I’d do it. I have no great love for code. Right or wrong, I LOVE spending most of my time designing. For me, the rest is a necessary evil to get the design into the medium. So if you feel strong emotions regarding CSS layout, don’t respond.  If you get where I’m coming from, please help me understand using logic.

Jennifer

Mandy Porta said on January 6, 2011:

Hi Jennifer! I understand your concerns, and they are legitimate. I’ll address your questions here.

1. Site-wide changes: I at one time used Dreamweaver templates to update my files. The biggest difference I find is that when you are updating css, you only have to upload one corrected file to the server. With Dreamweaver templates, all of your files must be reuploaded after making a change. Also, if one page needs to break away from the template, instead of creating a custom css id for that instance, you have to remove the template, which may cause you to forget to update that page when you make a change down the line. Also, if you are away from your primary computer and need to make a quick change for a client, it is easier to download the css file and make a quick change than to download the whole site. For other things such as navigation and footers that are not in the css file but appear on every page, I use php includes. I call separate header/footer files on each page, and when updating the navigation, for example, I only have to correct and upload the nav include file.

2. It is true that a typical small site may not be slower than a css site. Table sites do use a lot of extra code, and images must be split up between cells, and so a large site will show a more significant difference. Every second counts, and using css background colors, borders, etc. in place of images can certainly help with load time. Using css for these styles instead of inline table styles will save a lot of code and headache when you want to change a color/font down the road. If you don’t see a problem with speed on your sites, that’s fine and you certainly shouldn’t be concerned about it. When you start dealing with database driven sites such as sites with content management systems, you may notice a slowdown, and writing more efficient code and making sure you have a good server are key to increasing load time.

3. In old-style table based sites, developers didn’t use things like heading tags. Spans and inline styles ruled. If you are using a hybrid of tables and css, this may not be a large concern. Make sure you are using h1, h2, etc. tags and em/strong tags to emphasize the important text on your site. Otherwise Google will see headings and paragraph text as the same value. The key to good SEO is using the right keywords in the right places throughout your site, and this can be applied in a css/tables hybrid site as well as a pure css site.

4. I believe this was addressed in question one. It’s mainly of issue of how many files you have to reupload. With really large sites, reuploading a whole site can get to be a pain. Also, the Dreamweaver template method may not work as well when dealing with database driven sites, or when mutiple developers are working on the site from different computers/networks.

5. The problems with inconsistency occur when developers use inline styles instead of css. Since you are using templates and css for formatting, you shouldn’t have an issue.

1. When coding a site in css, I find that most things are pretty consistent. If you design a site and check it in Firefox, it will typically display correctly in most browsers. Unfortunately Internet Explorer, mainly older versions, can have issues. These issues mostly deal with spacing. There are rather easy ways to change a width/padding for only IE in the css so that it displays correctly. Some slight spacing differences don’t affect the site and aren’t worth worrying about. There will definately be a bit of a learning curve going from tables to css, and it can certainly be frustrating. But I feel it is worth it to build a standards compliant website that is flexible and easy to update in the future.

Building css/tables hybrid websites are the first step in learning how to use css. Taking the time to learn to use css layout may open many new design possibilities for you. I feel it’s easier to break away from the box layouts and get creative with css. Instead of working to position your image just right with blank spacing images or extra cells, you can choose exactly how many pixels from the top/left/right/bottom you want your image to appear. You can overlap images without having to split them a certain way. All and all, I think you’ll find css can be less of a hassle than tables, but there is a learning curve. There are many sites that offer free blank layout templates to start from that have been tested in various browsers.

Web and coding standards change so quickly it can be hard to keep up with. I, like you, am much more a fan of design and get tired of learning new coding strategies. One option is to outsource your design to a developer that loves to code. But the more you know about coding, the more valuable you are as a potential employee—there are so many companies who want designers who can code. I hope this helps explain a little more about css. Let me know if you have any more questions/concerns and I’ll be happy to answer them!

Post a comment