One of the debates that never seems to go away in the web development community is that of css vs tables and which is better to use for the layout of your site. I’m surprised this debate continues, though admittedly I’m continuing it right now after the question was raised on my small business forum. I think much of the reason css vs tables is still debated is the misinformation people on both sides put out there. Hopefully I can clear up a few things in this post and let you make your own decision.
Let me start by letting you know I fall on the css side of things. Having developed and worked on sites both ways I’m 100% certain structuring your layout with tables is not the way to go. However, you can build a great site using tables and a poor site using css. To compare we really need to look at sites that are well developed on both sites.
Let me also say that if you prefer to develop sites with a table-based layout, good for you. I’m not going to tell you that you’re doing anything wrong or evil or that the world is going to come to an end. I do think css is the better option, but feel free to develop sites any way you want.
photo credit: Marjan Krebelj
What This Debate is Really About
Calling this debate css vs tables is actually inaccurate. You can use css with a table-based layout. One argument the css side always uses is that having your presentation in a separate file makes the site easy to maintain. That is true, but you can have all your presentation in a separate css file while having a table-based structure to your html.
If you originally decide all your h1 tags should be blue and later want them to be red it’s certainly easier to have your h1 style sitting in a single css file. You can do that regardless of how you structure your layout. That would be a debate between using css or html attributes for presentation. I don’t think anyone is arguing in favor of html attributes.
What the css vs tables debate is really about is whether or not to structure a web page with tables or divs. In its simplest form we’re comparing:
<table> <tr> <td>Some content here</td> </tr> </table>
and
<div>Some content here</div>
The Problems with Tables
Even in the simplest case above you can see tables are already a more complex structure than divs. We needed three sets of tags to present some content as opposed to the one set of div tags. As we add more to the page’s design the table complexity continues to increase compared to divs.
In the best case scenario you’d be adding at least another table cell to get another block of information compared to adding another div for another block of information, which would grow our code equally. Most of the time though, that relationship won’t be 1:1. It will usually involve adding more tags on the table side as compared to the div side.
More code leads to more potential for errors. Software developers have known that for years and it’s equally true of the code used to develop a web page or site.
That brings us to the second problem with tables. They impose a more rigid structure than divs. Every table cell is dependent on the other table cells in its row to maintain the structure. Divs can work independently from each other. You can’t pluck a single cell out of a table and move it somewhere else in the layout. You can’t break out of the rigid grid easily. You can with a div.
Suppose you have a typical two column layout (content and sidebar) and you wanted to reverse the order. Maybe you want to move the sidebar from the left to the right of the content. With a table-based layout the only way this would be possible would be to go into every page of your site and change the underlying structure. With a div-based layout you could make this change in your stylesheet alone. Granted it’s not the kind of change you’re likely to make, but as an example it shows the greater flexibility and control you have in developing with divs.
The third problem with tables is in how browsers render them. In order for a browser to render a page built with tables it needs to read the code on the page twice. Once to understand the structure and another time to present it. That extra pass at the code makes table-based layouts take longer to display. With a simple table structure the extra time might not be noticeable, but as the structure becomes more complex with more and more tables nested inside each other it is noticeable.
If you ever visited a page that showed nothing for a few seconds before everything suddenly appeared, that time was likely your browser making it’s first pass over the table structure behind the page.
The Advantages of Divs
The advantages with using divs are essentially counter to the problems with tables described above. A div-based layout is:
- easier to maintain – less code and less complexity to the structure makes things easier to find and change.
- more flexible – since one div is not dependent on the other divs on the page it allows for more freedom in your design
- quicker to load – blocks of code can be presented right away instead of the browser requiring an extra pass
That might not seem like a lot, but just those three things are enough to make a div based approach better to a table based approach. Now let’s get to some of the myths on both sides that keep this debate going.
photo credit: Detlef Schobert
Myths About Divs and Tables
I mentioned at the start of this post that misinformation spreads on both sides of this debate. As people combat these myths the debate goes on and on combating misinformation while dancing around the central issue. Let’s see if we can dispel a few myths from each side
- CSS (divs) are better for SEO – Search engines don’t care one bit if the code behind your page uses tables or divs. Search engines are interested in your content, not your code. It’s true that less code means less potential for show stopping errors, but those show stoppers can exist regardless of your site’s structure.
Some might argue that the content search engines see on the page is more important and through divs it’s easier to present a different order of content to visitors and search engine spiders. It is easier with divs, but it can also be done with tables.
- CSS (divs) are more accessible – Both tables and divs can be coded to be accessible or inaccessible. You’ll have more control over how your page displays with divs that can aid in how a screenreader sees your content, but again you can create equally accessible pages using either approach
- CSS (divs) is hard to learn – Simply not true. CSS is not hard to learn.The argument is made by people comparing learning something new to learning something they already know well. That’s not an apples to apples comparison. Laying out a site with divs has a learning curve. So does laying out a site with tables. The problem most people have when learning to use divs is trying to force them to act like tables instead of allowing them to be what they are.
Even if we accept the argument that learning to use divs is difficult that doesn’t make tables a better approach. The best things in life are not necessarily easy or easy to learn. Not doing something because it takes time to learn is laziness.
- CSS (divs) requires too many hacks to work cross browser – Entirely false. Perhaps it’s a matter of experience, but if you know what you’re doing you never need to use any kind of hack. It’s been years since I wrote more than a few lines of code specifically for any one browser and none of that code is a hack.
If you develop to standards at most you’ll need to tweak a few things for Internet Explorer and usually only older versions of IE. If you find yourself needing hacks then most likely you haven’t thought out your structure all that well.
- It’s quicker to develop with tables – Nope. I guarantee I can develop a page with divs quicker than you can develop it with tables. This argument usually includes the time taken to learn to use divs, which isn’t a fair comparison. Take two developers, one who is fluent with tables and one who is fluent with divs, hand them a layered PSD file and ask them to code a web page to see who finishes first. My money will be on the person using divs.
Conclusion
This is one of those debates that never seems to go away and I guess I’m not exactly doing my part to make it go away with this post. I find it hard to believe that anyone who honestly knows how to develop a site well with both tables and divs would ever choose to use tables. Having used both it’s very obvious to me that the div based approach is the much better way to go.
There are a lot of myths propagated by both sides in this debate, but once you cut through most of them the argument really boils down to a few things.
Divs require less code and are less dependent on each other than tables. That leads to easier maintenance, more freedom in design, and quicker load times. Those arguments alone should be enough to tip the scales in the argument. Everything else is really irrelevant.
Subscribe to 
TheVanBlog | 
Email This Post
I feel like one of the reasons that tables are still so widely used are the WYSIWYGs. Learning CSS/div coding seems a daunting task because they dont really know the code in the first place.
I think anyone that codes by hand knows that CSS/div is easier to work with in that way.
If there is anyone that actually codes full table-based websites by hand I would be curious to know what reasoning they have for not switching.
You might be right about the WYSIWYGs.
When I first learned how to develop a website I learned to build them with tables like so many others. Then I had to make changes to one site and thought there had to be a better way.
Enter css and I’ve never looked back. To me it seems so obvious that using divs over tables is the better approach that I have a hard time understanding how someone would argue otherwise.
But clearly there are many people who support using tables. If you click through on some of the links in the post or just do a search for css vs tables you’ll come across a lot of the reasoning why some prefer tables. I don’t agree with their reasoning, but it is there.
“he argument is made by people comparing learning something new to learning something they already know well.”
I think you hit the nail right on the head with this comment. CSS based design is unquestionably superior to table layout, but due to sheer laziness the practice of table design has held on. I find that unfortunate, as someone who caught the tail end of the “table era” I find it much more difficult to maintain a website which uses tables (because of my own lack of experience with tables I suppose) than to administer a website which uses a CSS layout.
Very informative article and I hope that it gains some traction so people will stop using so many tables for layout.
I feel the same about maintain tables-based sites. I’ve worked with both, though certainly more with css sites. What makes tables harder is that it’s too easy to get lost in the structure and edit the wrong cell.
Top to bottom you seem to sum it up pretty well. I’ve never read about this debate until now, however in the back of my mind I always knew someone(s) was debating it.
I too started out doing HTML with tables, and as soon as I saw the CSS light, I’ve never been able to see it any other way. The only time I ever use tables anymore is to quickly horizontally and -vertically- oppose an image or something else on a temporary coming soon type page.
One debate I’m honestly curious about is the best way to go about table type content with CSS, such as using the actual table properties, using display: inline, using float: left, etc — where’s that write up? (i know there’s gotta be one but that’s almost another argument for CSS over tables… multiple ways you can go about it even).
Thanks Kevin. This debate has been going on for years. Do a search for css vs tables or similar and you can find a lot out there.
When you ask about table type content with css do you mean using css to show tabular data or are you asking more about how to style tables?
If you’re asking about the former then I’d say go ahead and use a table when you’re presenting data in columns and rows. If you’re asking about the latter that’s a good question. Maybe I’ll have to write a post on styling tables. I’m sure there are a few out there already, but one more won’t hurt.
It amazes me that some folks still use tables for layout in this day and age. Back in 2003, I gave my presentation, Why tables for layout is stupid, at Seybold (http://blog.hotdesign.com/2008/10/what-is-css/) about the advantages of CSS layouts. And, if anything, those advantages are more pronounced now than ever. Heck, even IE8 does a decent job of rendering CSS layouts.
As I see it, table layouts have precisely two advantages:
1. Outlook 2007 has a brain-dead rendering engine, so if you’re producing HTML e-mails, you need to use tables.
2. Table cells are the only elements in HTML that expand and contract based on adjacent content.
That’s it. If you’re not creating HTML e-mails, or unless you have some overriding need to have part of your page scale because of the amount of content on other parts of your page, there’s no reason to use tables for layout.
I hear you Bill. I’m amazed this conversation still exists yet it seems every few weeks I see another post proclaiming we should all go back to using tables for site layout.
Nice presentation by the way. The comics are great.
The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.
My thoughts exactly.
My homepage is currently structured with divs. It was easy to do, and it looks great in Opera, Firefox, and Chrome, but guess what?! IE sucks and makes my page look a pile of crap. I need to write special code for IE? How is that more maintainable?
I’d rather switch my page to tables, than screw around with IE. I don’t even have a copy of IE to work with. I agree that CSS is much better in theory, but as long as people use IE and Microsoft refuses to be standards compliant, I don’t think CSS for structure is the greatest idea.
Just because you didn’t get it working on your site, don’t blame css as though you can’t build a site that works across browsers. This site uses css and works in IE for example as do many, many others.
IE is a lot more standards compliant than you’re giving it credit for. It certainly lags behind other browsers, but for the most part IE fro version 7 on is css2 compliant.
CSS is better in both theory and practice. You do have to put in a little time to learn how to layout a site with css, but once learned it’s not hard to do.
I can understand your frustration, but it’s not the fault of css. Many people are able to build sites using css as a layout and getting them to work cross-browser including IE without any difficulty.
I come from a developer background and am now working as an SEO consultant (I know, Boooo and all that) so I am definately an advocate of divs and I have to disagree with:
‘Search engines don’t care one bit if the code behind your page uses tables or divs. Search engines are interested in your content, not your code.’
I agree to an extent but I have here 2 very good reasons why tables are definately worse for SEO:
1. Accessibility issues arise more frequently due to excessive coding – ok so this can be attributed to bad coding but it’s such a common issue that it has to be taken into account
2. As you mentioned, pages built in tables have to load twice (something I didn’t know until reading this post) add to this that the example you showed:
Some content here
and
Some content here
clearly illustrates how much extra code is required for tables. With many sites (big, e commerce sites for example) having many different sections of text and images and other media throughout a page the code just grows and grows, taking browsers longer to load page content.
With Google’s latest algorithm update (Caffeine) emphasising page load times as a SE ranking factor it is now more important than ever from an SEO stand point to reduce the amount of code on a webpage.
You make good points. As far as the speed issues, Google didn’t really talk about load times affecting ranking until after I wrote this post. Now that they have indicated that load times will be a ranking factor I would agree that divs make more sense.
I’m not disagreeing with anything you say. I guess I’ve never been convinced of the seo benefits. Even though I think css is the better way, I’ve seen some very poor and slow loading css driven sites and some pretty well coded and quick table driven sites.
I think there’s more potential for errors with tables, but I know there are people who can code a search friendly site that’s still table-driven. I would never develop the site that way, but I know there are people who can. You can still develop an accessible site with tables. Even thought there’s more potential for errors, it doesn’t mean there will be errors.
The load time though, is now reason enough to recommend css over tables for seo. I just wrote this post a couple months before Matt Cutts mentioned how some at Google were pushing for that to be a factor.
By the way sorry the code in your comment didn’t display. I’m not logged into the site right now, but next time I am, I’ll see if I can fix it. The secret is you have to use < and > for the angle brackets or it gets interpreted as actual code. You can probably also wrap the code in a blockquote.
Great debate. I would have to say,use divs and tables for what they are designed for. If you want your page to behave like a table or part of it, use a table.
For instance, if you want colmns with different colour backgrounds to be the same length, use a simple table and style it with css. Then you can use divs inside your table.
I have nothing against using tables. In fact I use them all the time when I want to present data. The key issue is not to use tables for the layout of your site template. That’s always going to be better done using css.
I am currently a consultant with an enormous company that forces us to support IE6. I am in the middle of a major project that we tried to code with proper CSS, but it’s incredibly frustrating and time consuming. If you need to create a modern site that supports an older browser, CSS imposes huge costs. This is simply not a point I am willing to debate.
My primary UI guy is a CSS ideologue and spends half his time fighting with stylesheets to make it work in every browser. Items misaligned, trouble getting the position of floated elements, absurd hacks, you name it. Eventually it works, but at what cost? Believe me, the clean code you talk about it gone. In my career I have worked with two types of people, fanatics and realists. Saying things like, “all people who use tables are…” quite frankly is absurd. Tables are still very useful for layout given that most sites are still essentially boxes that never move, but adjust in size as needed. CSS is very useful for styles regardless of how you do the layout.
Sure you can move stuff around easier with divs “just in case” you need to in the future, but nobody ever does. I also kept all my university textbooks “just in case” I would need them… guess what?
Some times you just need to get it done and move on. I support reasonable use of tables for backward compatibility.
Yes, but you can get it done just as quickly with css. If you aren’t it’s not because of the language.
If you read the post you’ll see I never once said you couldn’t use tables. I understand people have old code and sometimes they just need to fix it. If you’re constantly having to fix old code though, I would recommend looking into the feasibility of redeveloping the site. Maybe it’s not feasible in your case, but it might be worth looking into.
Nothing in this post is meant to condemn people from using tables for site layout. If your dealing with a site that was built with tables then you’re probably going to continue using tables on that site.
However please don’t imply that css can’t work for old sites or makes it more difficult to work on an existing table driven site. Neither is true.
very nice article, good job, i wanted to add my comment based on my own humble experience.. CSS is like a a sword, once you master it, you could be a powerful warrior, and if you truly go advanced with it, you’ll never ever consider tables… once you start writing complicated web apps, that consist of heavy javascript code for the layout, you’ll feel how important CSS is..
Thanks Rami and interesting analogy. I agree that once you master css you can be very powerful with it. From what I can see most people who argue against css simply haven’t taken the time to learn to master it.
I must respectfully disagree.
There are SOME layouts that to use entirely CSS requires an inordinate amount of extremely messy code to represent.
One example, is to have a banner across the top, a “side banner” down the left, with a background image that must align with the top banner in the corner, and then content within the area below the top banner and to the right of the side banner. In this case, it is almost impossible to get CSS only to render this as desired, either the width or the height of the side banner will be wrong, or the background image will appear to “disappear” or not be long enough, or be too long, or the content will bleed over into the side banner if you change the width of the browser. And all of this is absolutely hilarious when you attempt to make it work in multiple versions of IE and every other browser, let alone on an iPad or iPhone.
In theory, CSS is the answer, the problem is that the way browsers deal with SOME of it is not only not standardized, but can actually have the exact opposite result – for example position: absolute can cause a column to move to the left in one browser and cause it to move down in another, and cause it to move up in yet another.
I find that if I have to spend more than a 5 hours trying to figure out the combination of CSS statements to achieve the result I want on just one page, and I can do it in a table (a VERY SIMPLE table), in less than 15 minutes, then the dream of CSS has not been achieved yet.
I look forward to the day when a page renders the same way in all browsers for specific CSS statements. Second best would be to have a KNOWN set of definitions for how a browser brand will render a certain statement, then we can generate the css file according to what browser, but that’s a work around.
You can respectfully disagree, but I’m still going to say you’re wrong. Let me apologize in advance because what I’m about to say may come across as harsh.
There’s a huge error in logic in your argument. You make the assumption that because it takes you 5 hours to develop a layout in css that it’s the same for other people. That’s not the case. The limit isn’t the language, it’s your current skill level in using the language.
I speak English fluently. I’m lucky if I can still remember 50 words in Spanish. If I tired to reply to your comment in Spanish it would take me hours, even days, to put together a few coherent sentences. The conclusion isn’t that it takes a long time to communicate in Spanish. Spanish is a beautiful language that many people use to communicate quickly and effectively each and every day.
The conclusion is I don’t know the language well enough to communicate in it. The limiting factors isn’t the language, it’s my ability to use the language.
Same thing with the issue you’re having with css. The limiting factor isn’t the language itself, it’s your current skill with the language. That’s not meant as a knock against you. Right now it’s easier for you to code certain layouts with tables. Other people would find it just as easy to code the same layout with css.
I’m not suggesting it’s trivial to learn css, but it’s also not accurate to say the language itself is causing your specific layout issues.
I’ve linked to this article in a post as part of a project I’m doing on web design styles.
I agree with using divs and css to display content for what I think is a pretty simple reason – if I want to change the look of my site I can write a new style sheet using the same div IDs and the site is suddenly completely different. the ability to do this is what switched me from using the table-based layouts I was first taught. Even though browser compatibility is better (or supposed to be) with tables, the lack of flexibility when I inevitably changed my mind about the design meant I basically had to build the whole site again. Four-fifths of the way through an assessable project isn’t the best time to have to redo a table-based layout.
Thanks Emma. Appreciate it and I think this post being more recent is the more relevant one. As you can see I still strongly favor css layouts, but I think many of the arguments on either side of the debate get a little silly at times.
By the way I forgot to mention it when I commented on your post, but I did enjoy reading it.
I came to web design by way of VB. (Don’t laugh, my skills probably saved my job.) I had not heard about this controversy, being a WYSIWYG kind of guy. I will need to learn more about how to use css\div to do a page layout. Good Article and a lot of gold in these comments.
I promise I’m not laughing. We all came to web design in our own way and with our own skills. There’s nothing wrong with how you got here.
This debate is mainly from those who code by hand I would think. Early on you had to use tables to layout a site well. I think many people who spent the time learning how hold on to that knowledge instead of trying to learn the css way and in holding on to the known create arguments to defend their use of tables.
If you look at the source code of most sites (especially the ones you like) you’ll discover that most and nearly all use css for page layout.
I agree with what you are saying, however I think with the advancement of HTML 5, tables will start to disappear. The more professional sites are *usually* built using div/css scripting and now table cells as most sites require absolute positioned content which most sites are not using.
I agree that there will always be some people that cling on to tables, but I don’t think we will have to suffer too much for much longer,
Miles
What others are saying about this post
CSS vs Tables: The Debate That Won’t Die | Design Newztripwire magazine | tripwire magazine
Tweets that mention CSS vs Tables: The Debate That Won’t Die | Van SEO Design -- Topsy.com
70 Awesome Articles for Designer and Developers | tripwire magazine
70 Awesome Articles for Designer and Developers | huibit05.com
The Daily ALIEN » Blog Archive » Web design style: basic design