The Case for Tables

One of the things that people say that professional web developers do is that they use divs instead of tables. They say that divs are better, more flexible and were meant for layout. But are they really?

Well, sort of. The two main methods for div-based layouts use either floats or absolute/relative positioning - neither of which were meant for the job of layout, and neither of which, admittedly, do a very good job. You'll probably agree with me that absolute positioning is horrendous when it comes to a layout with a footer, and how hard it is to get the elements to float correctly on every single browser (****ing IE6).

So, why have people stopped using tables? They do the job the same way, the content validates completely and end-users can't tell the difference. The reason is the same reason that perfectly working iPods are discarded a few months after the news "generation" comes out: hype.

When something new or flashy comes out, everybody ignores the bad qualities about it and rushes to adapt it. The same thing with divs: end-users - the people that actually matter - can't tell the difference, but using them attracting the scorn of your nerdy peers.

Divs do have the flexibility advantage - you can float them wherever you like without the need for spacer gifs. But really, think about it: in a two-columned layout, tables could do the same job with less hassle. How may times have divs did something for you that tables couldn't?

I'm fairly comfortable using divs - making several colomns with ease. But for my next project, I'm sticking it old-school. Does it really matter what I use?

EDIT: I've taken back my arguments, and nothing has been hurt except for my ego.

As a programmer, divs make more sense to me.. they are like bottomless boxes (or objects). They can hold just about anything. They may be somewhat more difficult to give structure, but from a code standpoint, they seem like the only thing to use. Not to mention when you have a number of nested divs, they are much easier to follow than nested tables.

Tables are great for displaying data... again, from a programmers standpoint, they have the same structure a database table does... rows and columns... which makes displaying data easy.

There are times when a table may be "easier", but to me, divs just make more sense. I think it comes down to personal preference.. for now at least.

Im sure some of the DIVs vs Tables warriors will chime in soon...
Sam

tables are fraught of cells and rush of other stuff like width , height size padding etc., if you change something in layout , table or layout will mess out., div are always good because they can control by css or giving style, and they wil not get affected if you change something , or by changing other element in same layout.,

div tags are realiable and they dont have default height or width to disturbe other tags, they mend according to object which are existed in.

With a few simple CSS rules, tables can be set to almost anything. A big pro is that they're universally supported by all browsers. No more box-model hacks.

Some of you may point out that tables aren't "modern" and schematic or something like that. But does a website for so-and-so retirement home or so-and-so restaurant need to be "modern"? Do end-users know the difference between divs and tables? No. And they'll never care.

But, I do admit that divs are good. They're flexible and not constrained by other divs and can do some pretty fancy stuff. But, I'll say again: for a simple layout, tables could do the same thing in less time and somewhat better.

I will challenge almost anyone in the world to a race: We get the same layout in .psd format, and see who can finish faster. I will use nothing but notepad, and no tables. You may use Dreamweaver, but tables for layout. The design must function in all major browsers, including IE6. Bet you 100 bucks I finish first.

P.S. I can finish most single page layouts in about 2 hours. I hope you're up to the challenge. My record for a single page is under 20 minutes.

I'll use Aptana Studio, and whatever technique I see fit for the task. If you give me a 4-columned layout with lots of cells, I may decide that divs may do the task better than tables. I'm saying that div/table usage depends on the situation. There are those layouts that tables cannot do without things like spacer GIFs, but there are also layouts that could be done using tables without any ill effects.

All I'm saying is that in almost every case, divs will be faster. Plus they'll load better, will have cached styles, and are easier to work on when doing programming. I've never found a situation where I thought tables were actually better, except when sorting data, which they are fantastic for.

This is not to say that some pretty brilliant things haven't been done with tables in the past. I just think that time has passed, however.

I'm with Wayfarer - of course . I can lay out a site a LOT faster using divs and CSS, even by hand, than someone using an ugly mass of nested tables. Tables were NEVER meant for layout and should NOT be used for layout. Anyone still clinging to tables for layout is not, IMO, a true modern, professional web designer - you're hanging on to 1997. I've been designing and building sites for about 12 years, I learned to build using tables - but I will NEVER go back to those bad old days!

I won't get any further into this, this presentation by many recognized web gurus says it all: Why Tables for Layout is Stupid

Floats were NEVER meant for layout either, you know. They were meant to align images correctly not massive columns. The div system is flawed, w3c should come up with something better.

As for your link, it presents a few common arguments and a few common misconceptions. Tables will not make search engines hate you. How, exactly, are divs more accessible than tables? (haven't they tried IE6?) The few extra bytes it takes for table are negligible these days. And the other stuff (like easier redesigns and visual consistency) can be done using CSS with tables. CSS isn't reserved to divs, you know.

No one said divs were more accessible than tables. I don't think that fact is in dispute. Sometimes people spout it in the SEO forum, but it is nonsense, of course.

The point, for me, since I am a programmer also, and code on both the front, as well as the back end, is that the smaller HTML footprint of <div> based layouts makes a huge difference for me when generating markup dynamically. The workload is markedly reduced. The more tags I have to to open and close the higher the probablility of making a mistake. When generating large parts of a website dynamically, even small mistakes can be very frustrating since they will affect a greater part of my site.

Keeping styles seperated from the markup is also just good practice: each part of the site has it's own function, and can be worked on independantly of the whole. I understand your point that CSS can be applied to anything, but I just don't see tables for layout as having much to offer. They are good for seperating data into flexible columns, however, so if a page takes on the feel of data, I don't have a problem with using them on larger areas if it seems correct.

Floats aren't perfect either, but they offer better opportunities than tables IMO. Eventually we will have CSS grids, but the web is evolving much slower these days, and it seems that we can't even break out of the CSS 2.1 bubble.

I'm not saying you're a bad developer or anything, I'm sure you are fine. I wouldn't want to work with your markup, however, unless you were generating clean, semantic, tableless markup.

Originally Posted by yerich

The div system is flawed, w3c should come up with something better.

It's called HTML5 - http://www.w3.org/html/wg/html5/

There are lots of new container elements being proposed that would virtually make the DIV tag redundant.. an example...

<body>
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
 </header>
 <nav>
  <h1>Navigation</h1>
  <ul>
   <li><a href="articles.html">Index of all articles</a><li>
   <li><a href="today.html">Things sheeple need to wake up for today</a><li>
   <li><a href="successes.html">Sheeple we have managed to wake</a><li>
  </ul>
 </nav>
 <article>
  <p>...page content would be here...</p>
 </article>
 <footer>
  <p>Copyright © 2006 The Example Company</p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

I think I've heard about that, but knowing how quickly Internet Exploder adopts new standards, we won't be able to use that for a few more years yet.

IE8 will be standards compliant when it's finally released, it's even passed the Acid2 test for the first time EVER. So, you won't have THAT long to wait at all.

As for tables - that's an argument you're not going to win with, they are just not the best choice. One MAJOR thing about using CSS for layout is that I could change an ENTIRE web site by making changes to ONE file - the CSS file. It's possible to not even touch the HTML pages at all to change a site - take a good look at CSS Zen Garden, it's a perfect example - 1 HTML file, many CSS variations and hundreds of layouts. Lets see you do THAT with tables-based layout -- you can't. You have to touch EVERY page. The time savings for maintenance and re-design alone make CSS-based layouts preferable.

You're not ever going to change MY mind.. or anyone else here who makes table-less layouts. Maybe when you get out of high school and work in the real world you'll learn what the rest of us learned long ago.

But now there's the Acid 3 test, which Microsoft said that IE8 will not pass.

One MAJOR thing about using CSS for layout is that I could change an ENTIRE web site by making changes to ONE file - the CSS file.

You're assuming something here. You're assuming that when I say use tables, I'm saying to do:

<table width="700px" height="500px" colspan="2" cellpadding="2" cellspacing="4" etc.>
<tr width="700px" height="200px" etc.>
And so on...

I'm supporting CSS all the way. Best idea ever. It makes it really to change stuff. It's easy to manipulate using DOM. When I say "use tables", I mean "use tables with CSS". So you would have:

<table id="wrapper">

With a CSS rule:

#wrapper {
width: 760px;
margin: 0 auto;
background: url('wrapper-background.png') #A5051A;
etc.
}

But the thing with tables is that you don't have to mess with floats. Since tables are basically grids, and we're making gird layouts, wouldn't tables make sense?

Listen, I respect your opinion, and you present some good arguments. But i really feel like that a lot of people are using divs for the sake of using divs.

What you're doing is still using a table, you can call it a 'wrapper' if you want, that doesn't change it's nature - a table.

People are using divs because tables were meant for tabular data. People are using divs because they are more flexible and easier to maintain. To say that people are ONLY using divs for the sake of using them is terribly naive and well.. inexperienced.

But the thing with tables is that you don't have to mess with floats

That statement just tells me that you don't want to bother to learn how to deal with this concept and cross-browser compatibility. No one here will argue that IE isn't a pain in the butt - it has been the bane of web designers for many years, but it's not THAT hard to learn to deal with it's vagaries and it's not THAT hard to learn to work with floats. Yes, it's a learning curve..but anything new is.

I already know how to deal with divs. I made a fluid layout with both a max-width and a min-width, two columns, and drop shadows using the sliding doors technique (btw, fluid drop shadows are really hard). I came up with this thread because I had to use the expression() hack for IE6 to get the min-width and max-width to work properly, which cost a large performance hit. I was thinking that if I had used tables, I wouldn't have to do that because IE6 had native min and max-width support for tables only. I also realized that my layout would have worked just fine using tables.

This led me to think: "Why am I using divs? Are they really that much better?" And then I realized that I was using divs for the sake of using them, and I wasn't taking full advantage of their flexibility.

And I will admit that I'm inexperienced, with less than a year and a half making websites seriously, and mostly PHP anyways. But hey, I'm only getting started, I have the rest of my life to catch up (While I pay for your pensions and healthcare).

I'm now going to go back to divs, and I'm going to take back everything that I said about tables being better.

because I had to use the expression() hack for IE6 to get the min-width and max-width

I hate to break it to you, but that's a very BAD solution. Expressions cause the browser to constantly re-evaluate and when it does that it can chew up memory like mad - and it can and does CRASH the browser. You don't have to believe me..

http://developer.yahoo.net/blog/arch...formanc_6.html

There are other javascript solutions to make up for IE6's lack of min/max width/height support that will not crash a browser.

She's right, I've looked into it, and expressions do exactly what she is describing. I have heard that there are some ways to get around the constant looping, but I didn't feel the need to look too deeply into it, since there are so many other good ways to deal with this issue.

A majority of the slowdowns that the user experiences happen on the client-side, so it is very important that this side of the code be as optimal as possible.