Hey all,
I've always wondered why tables for layout are so despised in the webdev community. I've never used tables for my layout, I personally find them too restrictive. But I have seen websites that use tables for layout, and some of them are quite nice. So i ask you: why is it so terrible?

Thanks,
~Trey

Its a reasonable question.

I always just assume tables were some relic from the late 90s like
Tamagochi toys or Michael Bolton CDS.

But you are right. The more you look around, the more websites you
see that were built using tables.
Even the Drupal default distro has a couple of table based themes packaged.

I guess the reason some designers like tables is that
1)There seem to be fewer cross browser issues than CSS positioning
2)It might be easier conceptually for coding newbies.

On the other hand
1)It can be a nightmare to recode a new layout.
2)There is a magnitude of extra code that can affect load time performance.
3)In extreme cases maybe some negative SEO impact.

I am sure Lady In Red will have some comments

Tables for layout aren't bad. There's just a better way to do it.

A little history....

When tables were first used to lay out web pages, it was acknowledged from the beginning that doing so was a hack. Tables were supposed to only be used for what they are defined as being for -- tabular data. But in the absence of a real better way to do it, tables were fine.

What precipitated the push toward so-called "table-less" layouts has really been more of a push toward separating structure from display rules. The purported benefit there is cleaner code, without having to repeat certain rules over and over in the HTML. Now, style rules can similarly be applied to tables, so let's let LadynRed jump in and tell us why the tables themselves are so bad.

One reason you've already pointed out: They're restrictive. Div layouts are more fluid, and don't require things like one-pixel gifs to work correctly. Without going into every aspect of tables for layout, consider that you can create a menu using a table, even specify CSS rules for it, but is it not more semantically correct to use an unordered list, which a menu IS?

tim

You might want to read thru this presentation:
http://www.hotdesign.com/seybold/

When CSS is rendered across all browsers the same without stupid css hack and trick to et around it is the day I stop using tables to solve layout problems. Spend a day sortin out a css issue or put it in a table and get on with promoting your site ten minutes later - its your choice!

Originally Posted by thefandango

When CSS is rendered across all browsers the same without stupid css hack and trick to et around it is the day I stop using tables to solve layout problems. Spend a day sortin out a css issue or put it in a table and get on with promoting your site ten minutes later - its your choice!

Yup, let's forget about accessibility and just focus on our own lazyness to learn how to be proper webmasters

When CSS is rendered across all browsers the same without stupid css hack and trick to et around it is the day I stop using tables to solve layout problems

That's such a TIRED argument

Well then, you're going to be behind the times for a long time to come. Coded properly, the 'hacks' needed to make IE work correctly should be minimal - and IE IS the big problem when it comes to browser bugs. IE8 is a big improvement, but it still has a few bugs, but still nowhere near it's predecessors.

Genuine developers will take nanoseconds to locate the source of this source-code...

<!-- guest welcome message -->
<br />
<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<thead>
<tr>
<td class="alt1">
<strong>Welcome To Webmaster-Talk.com</strong>. <font>You are currently viewing our webmaster forum as a <strong>guest</strong>!</font> </strong><br>
<br>
By registering, you will have access to all post topics, communicate privately with other members (PM), upload graphics, and access other special features such as <strong>revenue sharing</strong>! Registering also gives you a <strong>reduced AD</strong> forum browsing experience. <br><br>Registration is fast, simple and absolutely free so please <a href="http://www.webmaster-talk.com/register.php"><strong>Click Here to join our webmaster forum today</strong></a>! <br>
</td>
</tr>
</thead>
</table>
<!-- / guest welcome message -->

Yes yes, it's not "for layout". You mean by "for layout" - for some kind of broad overall layout, since everything involved in html is either content or layout code.

Even so, I think that's not a good division to make. Inside a google (etc) account panel where table "blocks" extend left and right with the screen, that's still clearly "layout work".

I know exactly what you mean, however, since I like divs for the same reason as everyone else - they give you a more graphical -style control over the precise layout of every item on the page. It's very good for people who can never be comfortable with iterative and other approaches to establishing where to put things. It is a terrible pain, above all, for people who veer away from the commandline. Bless them.

This is my favourite div-based design yet - in which I make nice little coloured blocks out of divs - what I like doing most is cutting out graphics and finding "clever" ways to replace them...

<html><head></head>
<body>
<div id="layer0" style="background-color:#ffffff; padding:15px; position:absolute; top:185px; left:225px; width:430px; z-index:99"> 
<font face="verdana,helvetica,geneva">
If you don't want to be fat but are, you have a very healthy chance of 
becoming thin, so give it a go. Start by being honest with yourself about what you like which happens also to 
be bad for you in terms of making you not as thin as you want to be. Other than that there really isn't a 
great deal of work or complicated ****. It's easy. But honesty, of course, is a tough thing to achieve, and 
this guide will mainly help you achieve that, above all. Make a list of what you ate today, or yesterday, or usually, or anything. Just start to analyse yourself.<p>
</font>
</div>

<div id="Layer1" style="background-color:#abcfee; position:absolute; left:72px; top:60px; width:215px; height:197px; z-index:1"></div>
<div id="Layer2" style="background-color:#afcbec; position:absolute; left:327px; top:110px; width:215px; height:197px; z-index:2"></div>
<div id="Layer3" style="background-color:#cccbea; position:absolute; left:585px; top:52px; width:215px; height:197px; z-index:3"></div>
<div id="Layer4" style="background-color:#abbcaa; position:absolute; left:94px; top:301px; width:215px; height:197px; z-index:4"></div>
<div id="Layer5" style="background-color:#abcaae; position:absolute; left:348px; top:341px; width:215px; height:197px; z-index:5"></div>
<div id="Layer6" style="background-color:#aeefee; position:absolute; left:597px; top:278px; width:215px; height:197px; z-index:6"></div>
</body>

For years, Internet Exploder has ALWAYS needed one form of hack or another to make it work with CGI, Javascript and now CSS.

Yet the entire web community sits by and let's the GARBAGE continue instead of supporting other browsers and flushing the Microcrap product down the drain.

I just spent hours fixing a floating DIV issue that blew up one of my sites
in Internet Exploder. A two column table design would have had NO ISSUES.
And looked IDENTICAL! Those of us with talent can make tables do ANYTHING
we want them too. Without worrying about margin collapse, overflow, closing floating divs, hacking to keep Microsoft garbage happy, et....

Lady N Red claims she hates Microsoft but yet she advocates forcing code to work with their garbage software.

I am supporting Google Chrome and Firefox any way I can.

Not to be rude, but maybe just *maybe* it's because these people aren't used to eating off one, that's why they don't like them. Jk..Sorry, but that was coming.

Meh. What I'm seeing here is that we'll all have to agree to disagree. People who use tables highly value them (hey, they work), and those who use divs look down on them as we use a more "pure" form of web design.

As far as the complaint of cross-browser compatibility goes, yes, I agree tables are very good for fixing problems in that respect. But if you're experienced enough you can almost always easily fix any div layout problems you have. If you're *really* good you can make a flexible div layout with little to no cross-browser problems whatsoever (this depends on the complexity of your site, though.) I find that table-based layout's contents can be hard to shift, especially if you're using sliced images.

IMHO, I believe that tables can be fine to use for layout - to a point. You have to get your money's worth out of them. If there's a specific situation where only a table can do the job, you should use it. However, if there's a relatively simple div-based layout that you can use, you should use that. Until CSS3 is widely supported, we will still be seeing many table-based and table-implementing layouts (and probably for some time after then, but you won't have any excuse to use them after that). Of course, that may take some time, because of one browser <cough>IE</cough> that's behind on standards.

~Trey

Lady N Red claims she hates Microsoft but yet she advocates forcing code to work with their garbage software.

Because of my user base I HAVE to support down to IE6, that's out of my hands. However, the 'fixing' I have to do for that horrid browser is extremely minimal, since I know what it's problems are and I know how to code w/o triggering the majority of them. It causes me very little stress and takes very little time.

While we're on the topic...w3schools, where so many of us have learned everything we know, redid their website and I am yet to find a div(plus it's loaded with inline CSS)
I just thought that was a little funny.

Curious to see where this thread goes to..

Originally Posted by racer x

While we're on the topic...w3schools, where so many of us have learned everything we know, redid their website and I am yet to find a div(plus it's loaded with inline CSS)
I just thought that was a little funny.

A Little Funny? It's hysterical.

Let's all hope this is just the beginning of some common sense coming back into creating web pages.

Stay tuned....they may keep the <Center> command yet.

As long as Microsoft exists and keeps producing garbage browsers,
tables will live forever.

Did any of you catch the article today?
Survey says, 60% of corporate America is NOT going to upgrade
to Windows 7.

$5 says Microsoft will want bailout money soon.

By the way, Microsoft is one of the top three money spending
lobbyists in D.C.

So, you had to fix a site for Internet Explorer. Who amongst us has not spent at least as much time fixing things for IE, even with table layouts? By the same argument that tables for layout should stick because of IE, we should all go back to coding sites with Netscape proprietary code. I think everyone should use AOL, too. It rocks.

tim

Personally I find it easiest to build my sites to work in IE6 & 7, and then make small adjustments to work in decent browser like FireFox and Safari. Sounds backward I know, but it works for me.

With regards to tables in design, I would never understand why anyone would choose to use them these days. Sure, they might be easier to achieve certain things but they offer far less control overall and lead to very poor coding practices as well as over-bloated and slow sites.

I've had to redesign or alter the design of several sites over the past couple of years that were table-based designs and it's such a nightmare, you have to go through and change every single page. Who would choose to work in that manner?

Personally I find it easiest to build my sites to work in IE6 & 7, and then make small adjustments to work in decent browser like FireFox and Safari. Sounds backward I know, but it works for me.

The reason I find that backwards, is that it is much easier for me to build first for Firefox, because of the Firebug extension. Every browser has slight differences, even a few inconsistencies between Firefox and Chrome or Safari, for example, but I don't have a better tool for making live editing inside of a real browser than Firebug. IE8 (which has IE7 built into it), does have the new Developer's tools, which comes close, but it's still not as good to me.

Oh give me a break. You are advocating styling that is nonsensical.

Align text in a table "align="
Center align text <center>

But apparently no, thats all madness, and we should instead use margin left and right auto declarations.

It is not a tired agguement. CSS iss not consistent and you need HACKS - seriously I cant understand how any intelligent person would be claiming a system that required "hacks" was better than employing a tabled layout!

Originally Posted by LadynRed

That's such a TIRED argument

Well then, you're going to be behind the times for a long time to come. Coded properly, the 'hacks' needed to make IE work correctly should be minimal - and IE IS the big problem when it comes to browser bugs. IE8 is a big improvement, but it still has a few bugs, but still nowhere near it's predecessors.

CSS iss not consistent and you need HACKS

CSS itself is very consistent, it's the BROWSER, most heinously IE, that is inconsistent. As for NEEDING hacks, I would argue that you do NOT "need" hacks, IF you understand the problems of the browser that made them necessary at all! It is possible to code in such a way that you do not trigger those bugs - you obviously don't want to take the time to learn that

As for nasty, tabled layouts well.. I maintain nearly 250 web sites. If they were all done in tables, it would take hours and hours for maintenance as you MUST touch EVERY single page when dealing with tabled layouts, where as I can make sweeping changes to every page by merely making changes to ONE file - the CSS. The hours it saves me in maintenance and re-designs is all I need to NEVER use a table for layout, EVER again. Sorry, but I refuse to go BACKWARDS to the 90's to that sort of coding.