What is the advantage of tableless html?

[tphelps19]

Ok guys, I know this is a CSS forum and I came here specifically for that reason. I’m not trying to be argumentative or anything like that, I just want someone who actually knows what they are talking about to give me a clear & concise answer as to why html tables are so bad? Before you answer, let me tell you what I’ve already heard and why none of those answers are actual answers:

1) HTML tables were meant for tabular data and not for layout.
My Response: HTML came before quite a bit CSS so if it wasn’t meant for layout then what was?

tags? Lol….I don’t think so.

2) CSS & DIVs make for a nicer appearance.
My Response: This makes absolutely no sense whatsoever considering you can use CSS on every table element to acheive the same exact result.

3) DIVs require less actual code than HTML tables.
My Response: This is somewhat correct but if you take into account the CSS code you have to write to compensate for the traditional table attributes such as cellpadding, cellspacing & border, it pretty much is a wash.

4) Different browsers handle tables so differently that it’s hard to create a consistent look among all browsers.
My Response: This is the only factual response I’ve heard but I still don’t understand how different companies refuse to agree on a standard to have their browsers render code and people think the answer is to use a different coding method because of it? What’s to stop the same thing from happening again down the road? What happens when Apple or Firefox or Microsoft don’t want to agree on how certain elements/attributes actually render on their browsers? What then? We’ll be right back in the same boat. To me this is the only legitimate issue but the root problem I don’t think was addressed.

Again guys, I am not looking to pick a fight but I am legitimately trying to understand why so many people think tables are this terrible bad thing that should never ever be mentioned when discussing web design. I have 12 years experience designing web pages and I honestly have not found one thing I can’t do with tables. Only problem I’ve had as stated above is different browsers not using agreed standards. So what is it that I’m missing? I don’t mind learning tableless HTML and in fact I think I’m going to have to learn how to switch from tabled to tableless HTML real soon (which I really wish there was an easy tutorial for hard-core table HTML guys like me to follow). So please, if you have an educated & factual answer, please reply because I have searched & searched and I still don’t understand why tables are so bad and what exactly they couldn’t do that people needed so badly?

[TheDoc]

Maintainability is a huge factor. With a few strokes of CSS you can completely change not just an appearance of a website, but its layout as well. With tables you run into so many nesting problems that it just becomes such a mess to deal with when you need to make changes.

[JohnMotylJr]

I dont think tables are atrocious in web development because my ASP.NET experience dictates that most controls render as tabled elements. A question, rather than a comment (or factual), if you have a web page created in tables, couldn’t it be less markup and more semantic to use elements that are designed for the purpose. I know that somewhat goes with your third point but i think you would have more control using css than the described attributes. I understand your points and concern. I personally do not use tables, mainly because they taught us not to in college (minus ASP.net). I am curious to see what others say on this matter.

[Kitty Giraudel]

Tables are not modular. CSS is.

[Paulie_D]

Let’s turn the question around: What is the advantage of table based html?

In the past, it was the only way to achieve anything close to the layouts we wanted. That time is long past and, for all the other reasons mentioned above…let’s just NOT use tables unless they are specifically called for!

[Kitty Giraudel]

The 3rd slide of http://zomigi.com/downloads/The-Future-of-CSS-Layout_FOWD_121022.pdf says:

Problems with table layout
• Complicated/bulky markup
• Accessibility problems
• Slower browser rendering
• Rigid designs
• Spacer gifs

[wolfcry911]

http://stopdesign.com/archive/2004/07/27/throwing-tables.html

[JoniGiuro]

Don’t forget that mobile browsers are getting more popular, so we need to move/hide elements with mediaqueries and css without breaking the whole page

[rkieru]

1.) Tables predate CSS; very true. Tables however were never designed to be used as a structural element in this fashion, it’s merely something we designers did out of necessity. Tables ‘worked’ for what we wanted to do, so we used them.

2.) I’ve never heard this argument unless perhaps it is related specifically to the appearance of ones code. Then yes I can see it as a fair argument as fewer nested elements (hopefully) equates to easier-to-read code.

3.) That CSS you are writing also means that it is easier to modify and maintain your code over a long period of time. Done correctly CSS allows for such an exponentially greater level of flexibility that hanging on to tabular structure as ‘okay’ is similar to preferring betamax over blu-ray.

4.) Most browser developers are becoming better at accepting standards. The most common issues now are nothing like ‘marquee’ and ‘blink’. It’s more “Does Browser A support this feature? If not, can I MAKE it support it”. Mostly this is done with prefixing (-webkit, -moz, -o, -ms, etc). Situations where the markup or css needed to achieve the same result being radically different across browsers is very rare.

……

As someone with 12 years of experience I suspect you’re aware that this is an evolving industry. The nice thing about it is that we as designers get to be part of that evolution. Tabular layouts are dated. Once you accept that as truth and move on I guarantee you’ll be happier for it.

[pkinchla]

example of the power of css:
[Css Zen Garden](http://www.csszengarden.com/ “Css Zen Garden”)

why the structure of your markup matters and reasons not to use tables except for tabular data:
[Designing With Web Standards](http://en.wikipedia.org/wiki/Designing_with_Web_Standards “Designing With Web Standards”)

[Senff]

In real life, an actual table can be used as a chair (as long as it’s small and not too high, you can sit on it). That doesn’t mean that they should, and doesn’t mean that they negate the value of actual chairs. Tables have their own function, and so do chairs.

And it’s the same with HTML-tables and CSS.

[joshuanhibbert]

The separation of content and style.

[tphelps19]

Oh you guys….gotta love developer’s answers to things. :-P Ok, just to make sure I don’t leave anyone out I’m going to go through each person’s response:

TheDoc: I hear ya on the maintainability and nesting. Actually I think that is one of my struggles is just understanding how you position things with DIVs and CSS. With tables it’s very specific. If you use {float : left} does that mean the furthest most left? How do you put something before it if you don’t want it all the way over? This is why I said I wish there was an easy guide for us old timers who come from tabled design.

_John_: I’m so glad you are a .NET guy because from what I’ve seen so far I think a lot of the “CSS over tables” thing is much like the .NET push over VB6. I am a Microsoft guy too so I know the features of .NET and I still can’t tell what .NET can do that classic ASP with COM objects couldn’t? Actually I take that back, the only thing .NET does that I think it really nice is to have compiled code as to do a great job of hiding source code as much as possible. That’s about it. I asked numerous developers and finally a few of them said the REAL reason behind .NET was so developers could ask for $15k more per year, lol. Now before you respond to this, truly think about what I’m saying: I understand there are things out now that don’t work with classic ASP but is that really because they couldn’t have? Or is that because Microsoft (like with everything else they make) decided to roll it into another product that only works with the newer software and make boatloads of $$$ off it in the process? I cannot tell you how often I see this. Windows ME is a great example of why we can’t always trust products that Microsoft rolls out as the “latest & greatest”. ;-)

HugoGiraudel: I’m not sure what you mean by “modular” in your first comment. If it’s anything like the term refers to furniture then you just mean seperate pieces? I’m trying to learn more about how DIVs work so pardon me for not knowing more. As far as your listed problems with tabled layout, I disagree with almost all of them:
“Complicated/bulky markup” – No more than CSS is complicated to me. I hear the bulky part but is that really that big of a issue to a developer? :)
“Accessibility problems” – If you’re talking about browsers not producing the same result that is really more a browser problem than a code problem. That’s like saying Windows 8 doesn’t support a game you bought in 2000 and you’re saying the problem is with the game.
“Slower browser rendering” – This is a myth. Browser rendering is based upon network bandwidth & CPU power and I think we can all agree computer processing power to render almost any webpage is neglegable these days and in terms of bandwith my research shows that CSS files actually take up more bandwidth requirements unless you use a content delivery server or some kind of caching. But really, 99% of the time this is a moot point both ways.
“Rigid designs” – Not sure exactly what you mean by rigid but I don’t think it necessary has to do with the table itself. I’m not saying you should use tables for everything, I just think the traditional reasons everyone is pushing are almost all false.
“Spacer gifs” – Not sure what you mean on this either. Spacer gifs have always worked fine for me. However I did notice that in HTML5 there was one major feature of tables that was completely removed and I think it’s a big reason people blame tables when they really should blame the HTML5/W3 organization as well as the 4 primary browsers: they removed the ability to have properties of parent element’s propegated down to children elements. So if I have a table inside a table and the top level table I set a height of 200 and the table inside I set a height of 100% that no longer means the table inside will be at 200 with HTML5. This has literally screwed up tons of my previous work and I see people blame tables all the time and it’s complete BS. Of course something is going to not be as good if you start taking stuff away like this.

wolfcry911 & pkinchla: I read both links you sent and both of them were equally pointless, no offense. Neither of them gave any real reason as to why tables are the problem and not the browsers who choose to completely dismiss functions of tables. One of the articles even said a reason for CSS over tables is because of the common 3 column format of a website but didn’t go on to say what the problem was with a 3 column format? Again no offense but they made no sense to me.

JoniGiuro: The mobile world I haven’t gotten much into but that one you could have a very valid point.

rkieru: I hear what you’re saying and agree, I think I’m starting to understand the flexibility a little better of CSS. The only part I disagree with you on is the last paragraph you wrote on how this industry evolves and we need to evolve with it. I go back to what I said about .NET (and everybody in IT should agree with this) that companies like Microsoft know that the way you exploit as much money as possible is to force people to change regardless if change is actually necessary. Why in Windows Vista/7 did they have to change the location of so many options within the control panel? They didn’t change any of the functionality of the partifuclar control panel than with XP, only thing that changed was the location and how hard it was to find. The only reason to do that is to keep people upgrading and keep things moving, that ensures Microsoft keeps rolling in the $$$. Young guys typically don’t realize this until later in life but as an old mentor of mine once said, “think in terms of money and everybody’s motives become crystal clear”. :) But I do think you’re correct that we need evolve, trying to fight problems like this is almost futile. I just hope people can spot the legitimate changes from the phony ones.

joshuanhibert: I think you are misunderstanding what I’m saying, I use CSS all the time and keep my style seperate. And I can use CSS with tables all day long just like you can use them with DIVs. Btw, browsers will continue to support tables for YEARS. Mark my words, 15 years from now they will still support them.

Senff & andy_unlease: Pretty funny analogy but just like everyone that I’m talking about you’re not giving any actual reason, you’re stating a blind opinion (no offense).

All in all guys, I think I see a little of the benefits of CSS & DIVs, but I don’t see the amount of those benefits to be so great that it warranted a complete overhaul on the whole internet just to get rid of tables. And like I mentioned above, I do think that companies who push this stuff do have alterior motives a lot of the time. HTML5/W3 Org is a perfect example, they completely removed a very crucial feature of tables with no explanation of why whatsoever. I’ve looked to try and find a reason why parent attribute propegation was removed with HTML5 and I can’t find anything. I wonder if it wasn’t intentional for reasons noneother than $$$. It’s really not that far fetched if you think about it.

But if anyone has a good tutorial/guide that will help old timers like me get up to date with using DIVs for layout that would be very helpful. I think something else that has hurt me is a lot of what I’ve been working with is CSS & Javascript because I’m not much of a Java guy. The syntax of Java to me is unbelievably confusing. How could anyone write that and think that is as simple as it could possibly be?!?! Lol. That’s why I like good ol’ VB6. :-)

Thanks again guys.

[JohnMotylJr]

@tphelps19, this is going to sound off topic but VB6, really? Are you at least using VB.NET?

JoniGiuro: The mobile world I haven’t gotten much into but that one you could have a very valid point.”

This is where the industry is/has been going. There are plenty of awesome resources out there for getting into using the latest web technologies. So lets say you want to start developing a mobile app. Understanding the latest html5/css3/jQuery, you can make super simple applications with that understanding using PhoneGap. I would suggest start getting into Java because with Java you can create some KILLER applications and even cross talk your Javascript and Java code together.

Just like tables, VB6 will be dead soon, if not already.

Resource: http://phonegap.com/

Learning semantic markup: http://google.com

Joke for your amusement:
Q: Why do Java developers wear glasses?
A: They can’t c#… lol sorry but i had too.

[joshuanhibbert]

@tphelps19 I didn’t misunderstand you at all. Using tables for layout is using markup to alter the style. You asked for reasons not to use tables in HTML and I gave you an appropriate answer. It seems you may have misunderstood that answer?

Others have already explained it; if you need to change the layout when using tables, you need to alter the markup. That is not a separation of content and style as you claim to use.

To go into detail: I use divs (and other elements) to section off related content, not for styling purposes but for accessibility (i.e. screen readers). I am a firm believer in not using additional markup for styling. Using tables for layout is, without a doubt, using markup—and lots of it—for styling. That is quite clearly not a separation of content and style, and it is also flat out ignoring semantics and accessibility.

I’m not sure if it’s only me, but I get the feeling that you are simply trolling all of us. There is an amazing amount of evidence as to why you shouldn’t use tables above, but it seems as though you have made your mind up, and are simply looking to argue the point.

Just because you are familiar with one layout technique, and are yet to learn another, does not make the one you are familiar with the best option. It just means that currently, it’s your only option.

Finally, just as you are claiming that no one is giving actual facts, just opinion, you are also only sharing opinion, and an outdated one at that. If you are honestly trying to understand why, then you need to be more open.

[Author]

Posts