Table's Vs DIVS… The couch model

Sadly, this question still comes up in the web design community … Why use DIVS/CSS when I can use tables? That's like asking: why sleep on a bed when I have a couch?

The analogy

Granted, couches are comfortable, they are easy to fall asleep in, and in general there are not too many differences between falling asleep on the couch and falling asleep on a bed... They are both fairly effective. One thing… couches are not made for falling asleep in and beds are. By design you will get a better sleep in a bed than you will get in a couch because a bed is designed for a good night sleep and a couch isn't. As deep as your sleep is on the couch, and as comfortable as you think you are in you 3 foot wide space of fluffiness, you're going to wake up in aches and pains with your neck arched in weird positions. Eventually you'll have to move to your bed. If, by chance, you don't wake up naturally from the couch and have no intentions of moving to your bed for the night, your significant other will more than likely be hollering at you to "get up and go to bed!" At this point, your eyes will be crusted over, your mouth will taste like a rotten version of you last meal, you will be fully clothed and wrinkled with the back pockets of your shorts or pants somehow be positioned on the side of your leg. In addition, your neck will ache, and you will have to make that awful walk to bed which will feel like you have just died… and actually you might die if you fall UP the stairs because your legs are so weak after a hard day's work and that relaxing sleep on the couch. Not to mention, your relationship will be strained. The longer you wait to get off the couch, the harder it is to go to bed. When all is said and done and you finally "hit the sack" with that nice fluffy pillow under your head, you'll stretch out in all directions on your king size bed, let out a slight smirk of comfort and think to yourself: "wow, I'm never going to fall asleep on that couch again. If only I had just gone to bed earlier I would've have been so much better off". As good a sleep as it is on the most comfortable couch in your house, it's so much better just to go to bed.

Tables have always been a hack

Couches are a hack for going to bed just as tables are a hack for creating web layouts. Sooner or later, just like your going to have to go to bed after a long comfortable nap on the couch, you're going to have to start using CSS for layouts after your long and very comforting time with tables.

From day one, using tables for layouts has been an "accepted hack". Before the "X" in HTML , there wasn't any other way to create complex page layouts. Tables were the best, and most logical way to go about accomplishing the task, and they worked very well. There were no considerations of semantics or extensibilty. If the page looked correct, it was correct. No one realized until, in many cases, the last few years that tables were actually not intended to be used in the way that people had become so familiar with. When browsers began adapting CSS compatibility with (IE 5, NS 4 and above), and semantic markup started to become more and more relevant, the time came to make the switch to CSS. The problem is, web designers (and I was one of them) became so comfortable with "sleeping on the couch" and using tables that no one thought it was necessary to make the switch over to CSS for page layouts because it seemed too difficult. Just like getting up and going to bed after a nice long nap on the couch, switching over to CSS layouts is not easy, but once you finally do it, you realize you were an idiot for falling asleep on the couch in the first place.

DIVS/CSS are the correct tool for creating layouts

Beds are the correct tool to use to sleep on just as DIVS/ CSS are the correct tools to create page layouts. There are many reasons why CSS should be used instead of tables but they all stem from one simple fact: XHTML is not a formatting language, it is a markup language. CSS is the formatting language for the mark up language. HTML should be used to describe content on a page (just like XML does), while CSS should be used to present the content in a usable fashion. A separation should always be made between content and presentation for the sake of flexibly and semantics. Tables defeat this purpose and go completely against this concept. The proper use of tables in XHTML is not to create layouts, it is to describe tabular data (spreadsheets, comparisons, etc). DIVS or, DIVISIONS are the most proper way to describe page DIVISIONS. Keep it clean, keep it semantic, keep it eXtensible… use "DIVS".

Listen to your significant other, and the rest of the semantic web design community; Stop sleeping on the couch. Go to bed!