Why CSS and not tables?

Oh no, not another CSS vs Tables rant, you say?  Well, not really.  Read on....

I've been a web developer since way back in 1996, back when there was no such thing as CSS layouts.  I'm what you call "old school", and my programming methods will sometimes show it.  Hey, it's hard to teach an old dog new tricks, but I realize I have to keep up or I'm going to become obsolete.  So a few years ago I started learning more about CSS, and the more I learned the more I liked it, but I also hated it.  I have what you call a love-hate relationship with CSS.

So you are a startup web developer or perhaps you are just someone wondering why there is all this bad stuff about using tables floating around the internet.  Maybe you are wondering what all the fuss is about CSS.  Whoever you are, whatever you are doing, just stop and read this article and I will save you a ton of headaches by simply following this one rule....and you don't have to feel bad about it either when someone knocks you because it's the RIGHT way of doing things and the most productive way.


First off I want to get this out there so you know where I'm coming when I provide you with the advice that will follow.  I am not a part-time hobbyist web developer.  I am not a guy who built my own website and now thinks he knows everything there is about web standards.  Most importantly, I am not a know it all about anything....I just know how this business works because I do this full time from my home.  So listen up.

CSS is great for a layout.  Since almost every single browser out there dating back to IE 6 can handle almost any CSS layout you throw at it, you would be crazy to use tables for your layout.  The reason CSS is better is because you can make changes to CSS so much quicker than you can with old fashioned tables, the site will load faster, and, best of all, you can accomplish more complex layouts with CSS than you can with tables.  So even if you are just doing a basic layout for a site, use CSS.  You will be happy you did in the future.

When to use tables

Don't listen to CSS purists who treat tables as if they are the kid on the block and no one wants to be friends with anymore even though he's a nice guy and gets the job done.  If you need to display data in your website, don't waste your time trying to get divs to behave like a table.  It's silly.  Just build your stupid table and be done with it.  Your visitors won't give a rats ass if you have a table or a bunch of divs.  Your client won't give a shit if you used divs or tables.  All they care about is that the site works.  The only ones who care are the idiot purists who think their way is the only way of doing things because somehow they became right and we old timers became wrong.  Maybe their college professor taught them something that they shouldn't.  I don't know.  Use tables when you are displaying data.

Now, despite what they tell you it is also advisable to use tables for laying out your content unless you need the added functionality that CSS brings (like overlaying 2 objects).  You see, tables can use CSS, and when you create them you SHOULD use CSS.  You should also use CSS on the contents of your tables.  There is NOTHING wrong with it.

The reason for using tables within your CSS layout is because you are going to run into compatibility issues with layered CSS.  Sure, that content you just spent an hour putting into your layout looks great in Firefox and Chrome, but when you pull it up in IE it looks like ass.  "Where did this padding magically come from?", you'll wonder.  Then you'll spend time googling for a fix and try several things but it will break in one browser and work in another.  By the time you are done with it, you've lost half your hair and your wife left you because you spend more time with your computer than you do with her.  To top if all of, you'll get a call from your client telling you that it doesn't look right in IE, only to find out that they are running in compatibility mode.  What's that you say?  Jon, just tell them to NOT run IE in compatibility mode?

Oh that works in a fantasy world.  You see, from the client's point of view other people are going to visit in compatibility mode (and the client is right, because people who use IE regularly are generally ignorant about what mode IE is running in), so you must now spend a couple hours more finding out how you can change your CSS so that it works in IE compatibility mode without breaking it in other browsers. Eventually at some point you will find a solution to all your problems:  "Just use this javascript code to get it working in IE!" the website will proclaim.  At that point a thought may start to seep into your brain about something not being all together right about the universe, and you'll start having doubts as to what is real and what isn't.  "Wait a minute", you will say, "I thought that I was supposed to only use CSS, what's this crap about javascript?"   And that is when it will dawn on you:  you could have spent around half an hour putting together that content with an HTML table, it would have worked just fine, and your client wouldn't have been any the wiser.

So use CSS for your layouts.  It doesn't not take much work to do that, it's easy to learn how to create and float divs.  But when you start putting that content in, don't be ashamed to make friends with the kid down the street.  He's simple, he's been around for quite awhile, and he really works well with others.  He also like CSS too, because you can easily style and TD, TABLE, or TR tag.