SU!For the past few days, we’ve been scouring the web searching for the top 13 reasons why Cascading Style Sheets (CSS) are superior to table-based layouts when designing a website. Some web designers swear that table-based layouts are better than CSS-based layouts, while others believe that table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout. Since we’re one of those CSS die-hards, we’ve compiled a list of 13 reasons why CSS-based layouts are superior to table-based layouts.
Note: CSS cannot be used on its own to create a website – CSS is merely the tool used to style a web site’s visual information. HTML or preferably, XHTML, must be used to define the structure of a website. In addition, tables are perfect for tabular data, however, that’s about all they are good for nowadays.
The List
- Faster page loading
- Lowered hosting costs
- Redesigns are more efficient
- Redesigns are less expensive
- Visual consistency maintained throughout website(s)
- Better for SEO
- Accessibility
- Competitive edge (job security)
- Quick website-wide updates
- Easier for teams to maintain (and individuals)
- Increased usability
- More complex layouts and designs
- No spacer gifs
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:
- 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).
- 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:
- open up your external CSS style sheet, find the “header” div (or whatever you decide to call it)
- change the values for the properties “background-image”, “width”, and “height”
- 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! “.
very well written list of reasons why CSS is better than tables in web design… very convincing points and I definitely agree that CSS is better!
You explain why using css is better then using no css, but there are cases, where you still need tables for layout.
for Example:
Image you have an simply form ,where you have the labels left and the inputs right. Your labels need to be translated to different languages, which means you have no clue how long the labels can be, but you want to have the right input columns nicely alignt. Whats the cross-browser-css solution for this? (in the right column can also be words with undefinded width)
All this is nice – in theory. But I have found that the amount of hacking that is necessary to get things to layout properly with css on most browsers seems to negate many of the points above, especially on a low volume site that has a simple layout.
Every time I have tried these techniques, I have regretted the time spent. For my needs I have found that javascript libraries (like YUI) are best for complex layouts and tables are best for simple layouts. I understand that the javascript relies heavily on CSS. But conceptually it feels more like javascript than CSS.
I agree with the main purpose, css is the best way to make table.
One question : how could it be possible to apply “order by” thing like we would do with a link on a header-table (with simple ) ? see what i mean ? In fact I dont know how to make this kind of stuff possible in css… (sorry for my poor english.)
I agree with this, but are table page designs still prevalent? I guess I’d take css design as a given these days.
@jericho – Thank you! We’re glad you liked it.
@Mirco Tesla – Yes, there are a few cases where tables need to be integrated into the site; however, this article discusses the importance of basing your website design on CSS, and not on tables. It is perfectly acceptable and understandable to have to minimally include tables in a layout when there is no other option, but that is rare.
@Chuck – Yes, one of the “downsides” to CSS is the hacking; however, once you hack something the first time, chances are you can check that off of your list of things to hack. CSS, at times, can be frustrating due to the bugs most prevalent in the IE browsers, but once you get a handle on things, it isn’t so bad. Plus, there are tons of forums out there that will help you with nearly any CSS question you can think of, so you’re not alone by any means.
@Vincent – Not sure I understand your question.
@Scott – You’d be surprised
Comparing CSS and tables for developing a website is like comparing C++ and Photoshop for developing a desktop application.
CSS is used to design and position HTML elements, you can’t make a website ONLY with CSS – you’re still gonna need some (x)HTML markup.
Tables are a part of (x)HTML markup and they’re not connected to CSS in any way. I mean yeah, you can design your tables with CSS and
Everything has it’s purpose – Your choice is whether you’re gonna use tables or divs for your website, which really depends on the situation (using css instead of tables for tabular data is just plain stupid).
@Alpha -
We are somewhat confused by your comment. Yes, you can make a website only with CSS – you just don’t need to rely on tables. OF COURSE you need XHTML markup, we never said you didn’t. In fact, we mentioned the usage of XHTML markup throughout the article. h1, h2, h3, p, ul, li, ol, divs, are all necessary elements needed to properly format a website using CSS.
Yes, you can design your tables with CSS, but honestly – what is the purpose? If you’re going to use CSS, why not obtain the maximum benefit from using it by using divs instead of tables? We just don’t see a point to using tables unless it is absolutely necessary (which most of the time, it isn’t).
HTML is a semantic markup language, used to describe its contents. It is never to describe how its content *looks* nor *behaves*.
CSS is for describing how your content LOOKS.
Javascript is for describing how your content BEHAVES.
Tables are just part of HTML — and they have a place in marking up content: they are for tabular data.
If you content is something you’d use in Excel, it is a good choice for a table.
If you are using a table to position content on the page or “make things line up” then you are mis-using HTML for layout purposes.
@Chris Corwin – You just summed it up, in a nut shell. We couldn’t agree more with you.
I guess I didn’t really express myself the way I meant to. I totally agree with ALL of you guys that divs > tables anytime.
What I was trying to say is you can’t really compare CSS to tables, cause they both have different meanings of use. You could compare tables to divs though.
Chris Corwin really summed it up good.
@ alpha – Now we understand. Well, throughout the article we mention CSS-based layouts vs table-based layouts, so that is what this article is really all about.
You’re right, divs should be compared to tables, but that isn’t what we were trying to accomplish in this article.
1. Chris Corwin FTW!
2. You absolutely CANNOT make a website only with CSS! Saying this confuses the people who would still think this post is relevant which brings me to…
3. I thought this was fairly common knowledge by now. I feel like I traveled back in time three or four years.
@Alpha: I understand what you’re saying, but without CSS a div does very little, so saying “CSS vs tables” makes perfect sense. You use CSS for positioning as as for styling.
There are of course instances when you shouldn’t use CSS-based layouts – emails and such where the email clients aren’t as advanced as browsers – but CSS-based layouts should be natural to today’s web-industry.
What some of you are misunderstanding (and it’s a common one) is that tables should still be used for tabular data – a table of results, timetable and such – but not to create the actual structure of the page – header, navigation etc.
I really liked this article, it goes further than most pro-CSS articles and includes a bit of semantics, nice piece Matt!
@ Scott – Thank you for your feedback. Regarding your second point, we have included a bold “Note” near the beginning of the article while illustrates this point.
Of course you cannot make a website with only CSS. You made a good point and we appreciate the comment.
@ Ross – You’re correct, tables can serve a purpose, but usually only when displaying tabular data. However, as mentioned earlier, the main goal of this article is to advocate the use of CSS as the main tool behind marking up a site’s visual information.
Thank you for your positive comment regarding the article, we really appreciate that.
I can’t believe people are still beating this dead horse.
The other dead horse article is “here’s how to do 3 column elastic layout without tables, and *with* tons of CSS hacks”. (Nevermind when rounded corners or shadows get involved.)
Each tool has its advantages. “Use tables and CSS appropriately” is the sane conclusion.
@ Rob – It’s hardly a “dead horse”. The fact is, tons of websites are still using table-based layouts as the main tool to markup the visual and structural information of a website. The fact that a number of people have already stated how valuable this article has been to them proves that there are still people out there who are uneducated and unfamiliar with the benefits of switching to a CSS-based layout.
This article advocates using CSS as the main tool to style a web site’s visual information. Tables do serve their purpose, but it certainly shouldn’t be to markup a web site’s visual and/or structural information. Tables are great for tabular data, a few other things, and that is about it.
Really convincing. How about a sample page with some tricky layout stuff and then providing the code behind it to reinforce your points.
i knew that already, but who need to know every single word that you wrote is my boss…
sorry about my english. i understand better than i talk (or typing).
Since switching from using tables to using divs+css for layout I’ve found that the development time for a website has dropped considerably, plus I am able to get visual consistency across all major browsers far easier than before.
Redesigns are also simpler to create and quicker to implement.
All this combined leads to happier clients – and happier clients leads to more work. Can’t go wrong with that.
Great article. Tables should only be used for HTML emails and tabular data.
Making a webpage using tables is like building it with lego. Using CSS and divs, however is more like building the components (some of which are ubiquitous), and then making them all work together.
I loved legos as a kid though.
In theory, I completely agree. However until CSS3 is widely supported by browsers there isn’t effective column support.
Sure, there are plenty of examples to create columns of just about any layout with CSS2, but these often don’t work well with dynamic content. Sometimes you need layout to shift and adjust if content does or doesn’t exist. While, it’s possible to alter CSS classes when certain content doesn’t exist, but it creates pretty messes code.
Tables make it possible to horizontally collapse columns if no content exists automatically. Tables also allow the vertical height of multiple columns to match the height of the largest column automatically. Both of these tasks are very difficult and/or messy with CSS2. I typically will use Tables to setup columns, and give them the necessary classes to control properties through CSS.
i do not trust javascript, and having to turn it on for sites i’ve never visited bugs me. (i have FireFox locked down pretty hard with Privoxy, AdBlock, NoScript, etc. this is my only problem with all this. i’ve never visited a CSS-based site that doesn’t *require* JS – and it shouldn’t. the web has become a monster, and every new nifty complexity and feature-add opens more exploits… comments?
I came across this post a while back. It talks about this, “IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.” SitePoint.com – Table Based Layout is the next big thing
@ DesertRat – We included an example with a CSS-based layout and a table-based layout and analyzed the difference between the two. We also provided examples (when needed) for some of the points.
@ Al – That is awesome. We agree with everything that you said.
@ Ched Nice analogy
@ tomax – Unfortunately, that is your problem. Such a small percentage of people have Javascript disabled, and to be honest, I’m not quite sure why. You’re missing out on a lot of what the web has to offer.
All CSS-based sites do not use Javascript, but you’ll be hard pressed to find many sites these days without at least a little Javascript on them. With stuff like jQuery and mootools becoming more popular, I can only see Javascript usage increasing in the future.
It really surprises me that anyone still defends table-based layouts. I have nothing but compassion for those of you stuck in situations where you have to support legacy spaghetti code but, especially people using tables for new projects, make the commitment to switch as soon as possible. You’ll be sooo happy you did.
@ Stanley – It is surprising that people still defend table-based layouts, but it is mostly because it’s an easier solution than actually learning CSS.
By the way, great website (ran.org)
I agree that tables should be used for tabular data only (forms might also qualify as tabular data).
But I do have some issues with how you present the arguments. Most of the arguments simply don’t apply. When I used tables for layout, I also used h1,h2 and other semantic tags. When you say that table based layouts don’t use them, you are wrong. h1 and h2 are actually OLDER than tables, and have been used since the beginning.
And why would it be easier to update the header of a site that uses CSS? Can you give an example that doesn’t involve “table designers don’t know CSS” argument?
Don’t get me wrong. I agree with the point of your blog post, but I find some of the arguments a bit thin
@ Marius – Thank you for your comment. We appreciate you taking the time to question some of our arguments and hopefully we can better explain some of the to you.
We are not saying that h1, h2, and h3 tags were not in existence after tables were created. We’re not even saying that table-based layouts don’t use them. All we’re trying to say is, why bother creating a website using tables (unless necessary, i.e. the obvious, you have tabular data that you must present), and then mixing in h1, h2, and h3 tags? Why not just create the layout with clean, non-bloated semantic markup?
Perhaps we should have included more detail within this argument. Lets try again. Lets say that a designer wishes to increase the padding on the left and right side of the header, increase its height and width, add a rollover border effect for the logo inside of the header, and make all of the text appearing inside of the logo a few pixels larger.
You can’t tell me it would be easier using a table-based layout without CSS to accomplish this task. CSS would just take a few minutes at most of changing values within the style sheet. Imagine how much garbage code you’d have to sift through in order to get the header looking the way you wanted it to if you were using tables. Not to mention, using find and replace on several documents will take a little while (especially if the computer is older). With CSS, you simply adjust the values of a single document. Even better, that document is only loaded once by a user browsing the website. With tables, you’d constantly be loading the same style information embedded within the content, over and over and over and over again. Slowing surfing, unnecessary bandwidth consumption, longing waiting times – what is the point?
Hopefully that helped clarify a few of our “thin” arguments.
Thanks again for taking the time to write and have a nice day.
Nice article, you’ve covered the points quite well. But there’s still one point that I have yet to see *phrased* quite as finely as I’d like, anywhere. So I’ll use your article as an excuse.
The argument usually goes like this: “But isn’t there any use for tables any more in website design?” “Of course there is, for tabular data, but not for layout.”
I completely agree, but are the CSS beginners really comprehending? Tables, in HTML, are a vehicle for expressing content, *just like* paragraphs, headings and lists.
Suppose I’m composing an article in a word processor like MS Word. There, I’m going to be writing using mostly paragraphs with headings. Sometimes, I need to present information in a list. Sometimes, I need to present information in a table!
But do I use a table in MS Word to control the look of the pages? No, I use the layout and style features of Word.
I think this parallels exactly the breakdown of work between (X)HTML and CSS in the web world. In fact, using written content + layout/styles in Word gives you many of the same benefits for print documents which you cite for CSS use in web documents.
From a programmer’s selfish point of view my favorite reasons are #3 – easier redesigns and #9 – quick website-wide updates. Combine these with PHP includes and functions and it becomes 100x easier to build pages in the first place and also make quick changes changes at a later date
I can agree that there are definite advantages to pure CSS layouts for web pages. They are faster, cleaner, better for SEO etc.
It can also be argued however (something you make no mention of) is that IE6 is still the most commonly used browser. CSS and many of the CSS2 properties are not supported in IE6 or 7. Sure we can all make something work awesome in Firefox with little effort, but take that to IE6 (which all of my clients use) and you have a new problem. I tend to use a hybrid of the 2 styles right now… When IE6 is no longer the most common browser, I will move on to all CSS builds, but I find it important to note that to get consistency across all browsers without spending days tweaking css it is easier to use a table/css hybrid.
I can’t agree on some points. Especially with “wedesigns are less expensive” and “faster” to design. It requires much more knowledges and more time to create a css website without bugs. Have you seen how many issues come with displaying css website in different browsers?
But sure, it is faster and better for seo.
I agree with u that css is more superior to table in design
Great article. Helped me a lot ! Thanks…
Even though CSS is superior, cross browser compatibility, compatibility between different versions of Internet explorer sometimes pose a problem. Moreover, for a small site, a tables layout is more suitable.
I agree wit scott. This topic is few years old allready, we know that tables are for tabular data (and ok sometimes for dynamic stuff generted by php for instance), we know that css is faster and its easier to redesign or change layout with it. Is it really this important? We decide with my colleges wich to use depending on projects.
Someone sad its a lot of time to make css looking normal in all browsers. It is true, but it only takes experience and a good team to solve it. Ciao
imo, the only time a table should be used is with something structured in the fashion of a calendar or a form. but only when it’s a small part of the page. And even still, you should use css entirely to modify the properties of the table cells.
Very well written article and very thorough, but is this still an issue?
Any who, excellent job.
I would just add to the list…
14: Many savvy clients are looking for tableless, validated css design. We build a lot of websites and it’s amazing to see how many calls are compliments from leads who have actually looked at our source code to determine if they want a proposal from us. The greatest compliment we can get is when a potential client says: “we’ve looked at your code and can see you know what you’re doing. Can you get us an RFP?”
Nice article.
I agree with Rohan Shenoy. If it’s a small site and you need to whip out a hand coded thing in minutes, tables work fine (basic layout templates in Visual Studio uses tables…
). I’d be switching to CSS soon after as the site grew or I had more time to do it right. De-fits the article content, isn’t all this bitching really just beating an idealism drum (or maybe just drumming up web hits…tee hee!!!)? Are you saying I need to go with CSS ALL the time? Seems a bit, small minded. I agree with the article but I am reserving my right to do as I please. Thanks for the recap.
When I first began building websites in the mid and late 90’s tables where all we knew but there limitations and drawbacks where apparent even in those days. I didn’t actually start working with CSS until I got finished school and got into professional web design. Once I was hired by a big company I was taught that CSS is the only way to go and that tables just cause problems.
Great article. I’ve been designing sites for clients for a long time now, and only recently was turned on to the powers of CSS. I haven’t migrated fully yet — I’m still learning how to use it — but I know it’s what I’ll be using in the future. Thanks so much for the overview and examples!
@ Mariano – That’s great to hear. CSS really has so many benefits over table-based design. Glad to hear you’re making the migration.
You know… you can style tables in CSS. Tables for tabular data == good.
In my view point, tableless designing is more efficient, better and superior than table based designing because it is fast processing method for website and table-based web page makes heavy website.
Anybody don’t like waiting for websites to load. Table less based design takes very few time to load your website.
It is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now ! This looks good! Really good tutorial include so many helpful informations!
Sometimes I think you are way too theorical on CSS, and there’s a counter tide on their usage (not to mention the fact that standards in the website designers world are just a dream): read this carefully http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx
or this for that matter: http://www.decloak.com/Dev/CSSTables/CSS_Tables_16.aspx
not to mention the fact that you are so hard against tabular data…but for real, 90% of the information we read on the web or on paper, is by itself tabular
thanks for written good article in blogs because this article is very helpful for me.
Thanks for sharing great article.
Your article seems more like 13 reasons why to use CSS rather than CSS vs Table layouts. You mention many disadvantages like using font tags, spacer gifs, cellpading, height, width… which are more like the disadvantages of not using CSS. The example you give of a Table based layout doesn’t use CSS at all! You can still design a layout using tables and CSS together, using CSS to define height, width, margins, padding, font, etc… and putting all these deatails in a separate CSS external file.
For me the best approach is use a combination of both.
That’s an interesting argument, Checharo. Tables should only be used when there is tabular data on the website – that’s it. There is no logical reason to use a CSS style sheet to style tables when there is no tabular data.
I am a new web developer that is still learning and i find that css is super in theory but different browser implement it differently so users using firefox will get a different experience vs users using iexplorer.I know that its recommended to code to the standard and not to the browser. But i know that the fact my website is not displayed correctly in iexplorer is not going to reduce anyone at microsoft to tears.The point i am trying to make is that i don’t take solace in the fact that every browser will implement css correctly n year from now.So in practice i am forced with a unpleasant choice.
1. Create a standard complaint website but use only the most basic of css (the one sported correctly by all browsers)
2. Create website that is standard uncomplaint but displays consistently in all browsers
3. Create the website in a browser neutral language like flash or java
I am currently creating a series of scripts to dynamically generated html depending on the browser.So a browser like firefox will get a css version a iexplorer will get table or table+css version.different dynamically generated code fore different browsers and browser versions to get a consistent experience regardless of the browser.
Vlad,
We can certainly understand your frustration. Every web developer experiences exactly what you’ve described. That being said, conditional stylesheets are ok to use in moderation, however, you shouldn’t rely on them. Using various CSS bug fixes, you should be able find workarounds for browser specific issues, all while using the same stylesheet. For example, you can use an underscore “_” before a property which will only target the IE6 browser.
For example:
_font-size: 1em;What’s most important here is the fact that you should still be able to design a standard-compliant website given the issues with cross-browser inconsistency. You just may have to do a little bit more research, that’s all. Google has a wealth of information available regarding common CSS browser-specific bugs.
Although many of your reasons are self-evident and well-understood by any decent web builder (lighter weight, easier maintenance, simpler to do minor changes across files, etc.), the seldom-admitted fact is that tables can be far simpler to use in layout out a page than css. The reason is that CSS is designed to specify presentation, not layout. If this were not true, why does CSS 3 include table-layout? Why is Blueprint CSS successful?
Designers want to align different elements on the page with each other. Fluid design is great in theory, but (for example) on commercial sites where fixed-size ads must appear properly in the same place each time, using CSS for layout is much more labor intensive than it’s worth. Read about Eric Meyer’s thoughts on this.
Hi Howard. Interesting and valid points. Although CSS may not be the most ideal method of formatting the layout of a website, I do believe that it is still the best that we’ve got right now.
Regarding CSS being labor intensive, well, I think that all depends on how much experience you have with it. If you’ve made dozens of websites using CSS, then it really isn’t that labor intensive. In addition, trying to create outside-the-box, more advanced layouts using tables is much, much more difficult (sometimes impossible) compared to using CSS.
That being said, I anxiously await something better than CSS. However, it’ll do for now! Cheers!
It’s possible to make a reasonably well-argued case for CSS-based layouts. And then accidentally destroy your own argument with the design of the page you publish it on.
If this was your intent, I greatly admire your cunning. If not, it’s still an interesting article, with a valuable lesson under the hood too.
Here’s a snippet of code from this page:
<div id="block-block-33" class="block block-block region-odd odd region-count-1 count-3 with-block-editing">[...]
<div id="block-menu-menu-secondary-links-home" class="block block-menu region-even even region-count-2 count-4 with-block-editing">
Could this be described as “junk markup”…? And then add in 195KB of CSS split into 21 style sheets… is this really going to result in fast loading times? I think not.
It’s possible to use CSS to improve overall performance and to get leaner markup. It’s also possible to use CSS to build performance monsters, as this page neatly demonstrates. It is a lovely design. But it’s noticeably slow, too.
Mattur: You’re witnessing once of the weaknesses of the Drupal CMS. However, it is that way to allow for maximum control over style.
You must admit, that trying to create a layout similar to this one with a CMS which uses tables will produce even more markup than that of the CSS version.
The good news is, we’re also using advanced caching plugins and modules to help expedite the load time of the pages. When the page is cached, the load time is very quick. Let’s not forget that this page has a great deal of content, in addition to 59+ comments, each with their own image.
Sometimes a layout is tabular. So I want to use a table. Otherwise I need to use faux columns, or javascript, or more markup and slide background colors around to get the columns to reach the bottom.
Suppose the main content area has 3 regions, each with image and text. This is easy with a table. The first col has row span 2. With floats I can do it but the heights are not equal so I have to pick a trick to do it. So is this a time I can use a table? since it is a table? And I have more complex main page layouts too, with nested tables!!!!. Can the styling for a table be put in the CSS file so no band width hit?
Sometimes I feel I am using floats just to show that I can do it.
Dave – Anytime you need to layout data in a tabular format, then yes, tables are fine. As you can see near the beginning of the article, I clearly advocate the use of tables when tables are most suitable.
You can style tables with CSS and put the CSS rules in an external file, too. Simply assign IDs and Classes to your tables. However, only do this when absolutely necessary.
I agree completely that CSS/HTML layout is a great way to separate styling from content and keep a consistent look across a website. Actual page formatting is much simpler. If a sites styles are well set-up it’s much quicker to create new content.
It’s true that in terms of the way a page appears in certain (i.e flavours of the infamous Internet Explorer) browsers, CSS doesn’t always degrade as gracefully as it should, while table-based layouts can give a more consistent result. But that’s more a reflection on a lack of support for CSS than the CSS standards themselves. IMHO the general approach to building sites these ways seems to be the following:
– Build your site (pages and styles) and test in a standards-compliant browser; then
– Test your site in various incarnations of IE and introduce hacks and workarounds to try and make it appear as it does in a standards-compliant browser.
While we don’t have the ‘Browser Wars’ that we used to, it would be in everyone’s interests if all Browser Manufacturers paid attention to recognised standards!
Why is there such an Asceticism in the ‘all css’ camp. I cringe when I hear people saying, “Tables are for tabular data” and html is only for markup not style.. javascript is for behavior. These same people will use the unordered list and list item tags to make nav bars and yet when the li tag was created it was created for bullet items: simple sentence fragments that could be used to summarize points or a list of items like in a recipe. The tag was never meant for navbars and yet the CSS Nazi’s blindly ignore their blatant rationalization of hacking the tag to make it a nav bar. “Well a Nav Bar is just a list of links right?”
With that logic a paragraph is just a list of ideologically linked words. A website is just a list of webpages. With that CSS-Nazi logic they should only use the and tags.
Should we not use wood to build our houses? -Because wood was never meant to be repurposed as a building material for humans. Keep your code clean. Keep it simple use what ever works. (CSS vertical alignment anyone? anyone, please?)
Ron, interesting points you make. Just use whatever works best for you. It’s not worth getting upset about! If you like tables, use tables. If you prefer CSS, use CSS. A lot more can be done with CSS than can be done with tables, though. Go to CSSMania.com and look at some of the designs there. Few of those designs could be accomplished using strictly tables. Cheers!
One point I feel I need to comment on, Ron. It is a fact that a navigation menu is actually a list of choices that the user can select from so from a purely semantic (or anally retentive if you prefer) point of view an unordered list is a good way to present a navigation menu. Once established it’s also easy to maintain and update. The beauty of CSS is that it doesn’t need to LOOK like an unordered list!
A paragraph will never be ‘just a list of ideologically linked words’. Paragraphs are comprised of a series of related sentences. As paragraphs predate the WWW webpages should (and normally do) follow the existing model.
And no, I don’t consider myself a ‘CSS Nazi’… the WWW has come a long way from the first simple pages because people have always found new ways of doing things by ‘repurposing’ the existing syntax. In then end it all comes down to whatever works best for you, your client and the audience.
i have a client who asks me to prepare layout using DIV, CSS. The problem is when i deliver the project to client he keeps adding and deleting the content on his own. Sometimes, he even needs to change the structure little bit in that case he spoils the layout as he is not well versed in CSS and DIV.
Can you suggest how to handle this issue for my futute projects.?
The best way to let a client add and remove their content is by using a WYSIWYG editor. I recommend using a CMS like WordPress, Drupal, or ExpressionEngine which will allow your client to add and remove their content by using the aforementioned editor. There are options in each of these CMSs which allow you to parse out bad code which may be causing problems with the layout.
The thing about tables… the last thing, in their favour… the killer-app-of-tabledom…
… is that they just happen to be (more often than not) a magic-bullet against all the stupid frustrating bullshit that Internet Explorer CSS throws at you.
Not if you take the time to learn CSS and the workarounds for IE. It’s time consuming, but you’re able to accomplish a whole lot more if you just invest the time to learn.
Then it all depends on what you are aiming for. If you don’t need a very complex and fancy design, then you should stick to tables and save precious time for other important issues. But if design is a priority and its complex then you should consider investing some time working with CSS
Checharo – You may have a point there. I’m certainly not going to advocate the use of table-based layouts, because honestly, once you learn CSS, tables seems like a monotonous way to build even the simplest of websites. That being said, a table-based layout may be most appropriate for a beginner just getting their feet wet with web design. Even still though, I think it would be much more beneficial to start off learning how to do things the “right” and most up-to-date way, rather than learn an approach that is very dated. Just my opinion of course.
Funny… People always state that CSS sucks because of all the hacks they have to use. And don’t realize that using tables for layout is the original hack. Like packing trans.gif’s and nbsp’s into empty cells was intended in the original specification of the markup? Learn how the tools work and it’s not all that hard folks.
Tim – You make a really great point. Table-based layouts are a hack in and of themselves.
I think most of issues in this article do not apply when you are working on enterprise web sites and/or with web technologies underneath your site.
Faster page loading/Hosting costs : I agree tables based layout sites are generally heavier but CSS is not the holy grail. Other technical solutions (gzip content, remove white spaces,…) can save lot of bandwith.
Redesign issues/Visual consistency/Quick website-wide updates : As soon as you are using templating technologies, redesign and visual consistency will be very easy to achieve even if you are using table based layout. Moreover redesign on enterprise web sites is not as frequent as for public internet web sites.
SEO/Accessibility : you are still right on this point
Competitive edge : very subjective
Easier for teams to maintain : II’m afraid you’re wrong on this point especially because there are different ways which can be combined to achieve similar layout effects (absolute positionning/faux columns/float and clear/margin and padding/…). Therefore it is really more important to have common layout guidelines among people in a project.
SEO/Accessibility : you are right on this point
More complex layouts and designs : It is true CSS allow to do very complex layout. However I think it is really overestimated for enterprise web site projects : users do not want a extravagant design. grid layout is often requested by them. But the bad news is that grid layout is harder to achieve with CSS layout than with table layout.
No spacer gifs : CSS have their own hacks (conditional style, !important,…)
I’m relatively new to Web design, having delved seriously in it for the last two years. I have built sites using CSS for layout from the beginning because I read many compelling articles advocating it. However, despite your correct conclusion, your arguments are weak and sometimes deceptive in several places:
1. You are comparing the size (and download time) of only the HTML files here. This is deceptive as CSS files themselves take time to download. It may be the case that HTML (using tables) is still longer than HTML (using CSS only) + CSS, but you should still compare apples to apples.
2. Same flaw as 1. You need to compare HTML with HTML + CSS size and speed for an honest assesment.
5. Your argument assumes that there are two choices: Tables with no CSS and tables with CSS. In reality you can combine CSS tags with tables combining the advantages of both. It’s not an either or quandry. Perhaps you need new examples that emphasize the layout differences, rather than the styling differences, because you can layout with tables and style with CSS and acquire almost all of the flexibility advantages CSS has to offer.
6. Same false either/or argument. For instance, you can use tables for layout and still use CSS for rollover affects and use h1 tags for headers.
9. Same false either/or argument. You can layout with tables and still use semantic tags such as h1 etc. which allow you to change the style in one place.
10. There’s nothing inherent in CSS that guarantees that id and class names makes sense and are interpretable by multiple people. Surely, a styling scheme that uses cryptic identifiers can be just as confusing as a convoluted table-based design.
You are on the right track, but I think in your attempt to stretch out your list you presented false dichotomies to try and bolster your argument. A lot of these false choices apply to inline styling versus attached CSS. Perhaps you should split your 13 into two articles, one that illuminates the real advantages of using CSS for layout versus tables and the other that illustrates the benefits of using external CSS style sheets versus inline styles.
Great blog post, thanks for sharing and all the comments–as a newish web developer I have actually learned quite a lot.
Even though CSS can seem daunting at first, I am really glad that I have decided to take on the challenge of learning it, rather then get stuck in a rut with commercial WYSIWYG editors and table only designs. Always hated the look and feel of tables–made me feel boxed in.
I leave you with this:
“Change is the law of life. And those who look only to the past or present are certain to miss the future.” John F. Kennedy
I prefer the use of CSS, but I do not like how purist people can be on the subject. But as far as many of your reasons explained here, I don’t see an advantage with many of them.
Useability for example. I could use CSS with tables and still allow for printable view documents. Tables are not getting in the way there. Accessiblity as well, no difference.
I’ve also found it’s easier for a team to manage the presentation of a simple table over that which requires more complex CSS for proper alignment. It’s easier to read what a table is doing rather than going through many different properties of the css, some of which may be effected by parent element styles, etc.
And as for spacer gifs, I’ve never once needed them. Again, tables + css works just as well in about every sense that non-tables + css does ( maybe not in regards to layout complexity, but I’m sure that can be defeated as well with very little table code ).
And not to mention…
“…table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout.”
Tables are completely valid XHTML, so that means now we can agree that it too falls in with being a real solution to coding a web sites visual layout?
I think the argument should be more towards why people choose tables for their presentation structure rather than relying completely on CSS to define it. I don’t see anything wrong with people still using tables, although with the technology we have now, it shouldn’t be as mainstream as it once was. That’s not to say those who use tables are wrong in anyway or another. I still see no need for people to act arrogantly towards those who use tables.
If it wasn’t meant to be, then what is the purpose of a table anyways? Afterall, CSS has the ability and properties to define table structures. To me, this is just a problem with XHTML/HTML in itself.
What on earth does spacer gifs have to do with table-based design? You can make perfectly good looking html and css using tables without spacer gifs. Aren’t you confusing “table-based” design with “formatting with html” in that example?
I my self always use tables to control the overall layout – simply because it’s much faster than making the divs float the way I want. As a freelancer I can earn more money if I use tables for the overall structure: main area, righ coloumn etc.
Congratulations Matt on writing such a wonderful article. For a long time I wanted to convert my website to CSS based layout. This article has further motivated to do it fast. Comments and your answers make it a mini encyclopedia on advantages of CSS.
Very nice,
This article converts the mind of designer to leave tables. Div & CSS are the best. The most important thing is that, it’s Good for SEO.
Enjoy…
Real Designers: 10 Years’ Experienced Website designer in India
Many thanks for this – I think I will now have yet another go at changing from tables to CSS, more for loading time than anything else. Also, I’d now like to tackle layers now as I’ve seen some pretty nice looking sites out there that obviously do this. Hope my next forray into the table-replacement world is more successful than the last – last time I tried to replace a table I spent hours and then gave up as the CSS just wouldn’t format properly in every browser!
I counted 7 nested DIV tags to open your BODY. I’m just saying.
I think the reasons listed here are generally exaggurated. As others have stated the issue at hand is NOT pure tables and hardcoded properties vs DIVs and external CSS. Having to edit every page when you make a change is an issue in any layout and that is solved by using server-side includes as a common code basis, not by the kind of tags you use.
No tables is the optimal. But this is an internet where a LARGE portion of one’s audience is using an old browser that does NOT support many CSS standards. It’s rotten, but what do we do? Is it more important to provide that audience with compatibility (and even a decent looking layout) or forgoe them because they are (perhaps not by their choice) using a crap browser? And in this case, yes, hacks are available, but to what extent? Is it *better* to include tons of additional code just in case an old browser is used, vs cases where you could use a table and it would display consistently in basically ALL browsers?
Things like SEO and ‘companies will admire your work more if you don’t use tables’ go against the majority of ‘popular’ websites that use tables, load fast, etc. Not to say many of them could not use a nice revamping, but I think the SEO argument is not based on actual concrete evidence. Of course one should learn the latest standards and use them wherever possible — but it needs to be in moderation nevertheless. I use IE6 at work (not by choice) and it’s frustrating when I get to sites that are visually extremely broken. Some of them are unreadable.
That said, I am still in the process of converting my personal website to use all CSS/DIVs etc and no more TABLEs for layout. But it’s not as easy as it should be and I have even had to make some design scaleback choices to satisfy CSS limitations/compatibility, something that just should not happen.
i glad you post this, because explaining this thing to another people will takes a very long time. I’ve been using CSS from a very beginning i designing websites. And a lot of people keep asking me this question.
Now all i have to do is just send the link to this page.
While these are definitely good reasons to use CSS, I have only one issue with the list. The first arguement is a comparison in html markup. The angle bracket tax of sorts. Unfortunately, you aren’t comparing apples to apples. Sitepoint’s CSS vs Table pages look completely different. While that in-and-of-itself is a compelling argument, it’s still a faulty comparison. Compare the tag/attribute tax when they look exactly the same, and then you have an accurate comparison. Otherwise the rest of the list is pretty reasonable. (so says the non-designer anyway)
I prefer the use of CSS, but I do not like how purist people can be on the subject. But as far as many of your reasons explained here, I don’t see an advantage with many of them.