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?
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.
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.
Without having a ton of time to formulate a response right now, my main practical argument for div's versus tables is speed and flexibility. It takes so much less time to build websites without tables. TheDoc touched on it above - the ease of changing positions, colors, how elements interact, etc is so much more flexible without tables.
I used to build exclusively in tables about 9 years ago. I had no idea how limiting and time consuming it was until I switched. Recently I had to work on a project that required a table design and being forced to go back and work in tables reminded me how awful they really are to work with comparatively speaking.
I find that tables are useful when it comes to displaying data needed to use in that format. They are not to be avoided like smoke bombs, but are to be used sparingly.
The reason this is emphasized for many is because some people used to and still do use tables for the entire layout. This makes the webpage inflexible, decreases SEO optimization, and overall, is just messy when it comes to CSS.
It's fine to use a table now and then to display data, just don't use it for the whole layout.
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!
Client: "How about you put the sidebar on the left rather :$"
Me: "Ok, #sidebar { float: left; }"
You can visually restructure a site with CSS without touching HTML. The first CSS work I ever did was to reskin some apps themes without touching the html. I'm pointing that out to show the flexibility of CSS when needed.
Tables and absolute positioning isn't too fun :p
To be honest, I don't think any one in this thread will convince you though. I'm not sure how often you develop sites, but give yourself a 3 month challenge and only use html/css. It's tedious in the beginning (like most new tools) and once you "get it" I'm sure you'll love it.
If you don't appreciate the power of using divs, sections, articles, headers, navs, footers etc and you don't care about semantics in development then I genuinely don't feel that you'll understand why using tables for anything other than tabular information is a bad idea.
I would suggest you do some reading on HTML5 and CSS3.
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.
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.
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. :-)
@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.
@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.
As @joshuanhibbert has said, semantics and lightweight markup are key to a clean and efficient website - if your markup is full to brim of tables, rows, columns etc it will undoubtedly be a mess and is not an efficient or smart way to develop.
The only time I used tables was when I was 14, using a bootleg copy of MX doing my first ever website, after that I learned how to use divs and ul's etc, then with HTML5 we now have even more elements to make our code even cleaner and more expressive.
A good litmus test for great HTML is if you can read it (via the source) and understand the hierarchy and the information contained within. If you have an endless set of tables I guarantee that would not be readable or semantic, and if you don't care about that, more fool you.
A hell of a lot less of a headache when styling, that's for sure. lol I really think it comes down to using tables for they are meant for - tabular data.
Look at it this way: Would you rather write and style more markup, or less? Imaging building an entire website of nothing but tables, just like the old days - no way Jose!
John: LOL yes I know, I know.... my .NET friends tell me this all the time. The thing I learned first was classic ASP / VBScript and it worked so great for everything I needed so I didn't see any need to change. It wasn't until Microsoft forced things to go to .NET that I realized what they were doing. The problem is though I can't figure out what exactly what .NET does that ASP couldn't? (Other than the previous mentioned compiling of code). I'm going to have to learn it no doubt but the reason I think .NET was for was because classic ASP/VBScript was just too easy and MS wanted to protect the industry more (that might not be it but MS has a huge history of doing that). I have struggled a lot trying to learn .NET because it's so radically different. I mean, when it first came out the name confused a lot of people and then they tried to call it "ASP.NET" making it seem like it was just an upgraded ASP when it fact it was a complete overhaul. Do you have any recomended online guides/tutorials you'd recommend for someone like me who is coming from classic ASP/VBScript trying to learn .NET? I really need one if you do.
joshuanhibbert & andy_unleash: Not sure what trolling means but I assure you I'm not just trying to argue, trust me I wouldn't have to come online to do that. ;-) But admittedly, people tell me all the time I have an argumentative personality so sorry if I come across that way.....guess I just call things like I see them with no regard on offending anyone. But to your point, I probably should have been more specific as to what I meant: you and several others are giving reasons and I think I'm seeing some of them but others I'm just not seeing the "WHY" behind them. For example, you said above that to change the layout the have to alter the markup. Why is that a problem? Whether you make changes to an HTML file or a CSS file isn't it all the same? If it's something that will be used repeatedly on multiple pages then I use include files. I honestly don't understand the difference. Is it time savings? For me I am super fast at tabled html becuase you are right it's the only way I've ever known. Can you give me a very specific case or example of what you're talking about? I think I need something very black & white to understand what you're saying.
I know I am going to have to learn tableless HTML so that's why I want to find a good tutorial for guys like me, but at the same time I want to try and understand the real reason behind why people say there is such a drastic difference. From what I think I've gathered about the use of DIVs, one big advantage is that DIVs just have more flexibility than tables in terms of not being restricted by a parent container necessarily? Someone above gave the example that if you want to move it to another side you just do {float : left}? That I can see as an advantage because I think you can layer your data?? That was one big thing with tables was very hard to do.
Everyone: I think I am starting to see some of the advantages of CSS & DIVs over Tables, not quite as die hard as most of you yet but I'm seeing some of them. Some of the advantages are very clear & straight up because of the restrictions of tables and being contained the way they are. And other advantages like I said earlier are because certain functionality was specifically taken away from tables in HTML5. To be honest with everyone, I think this is what really gets me going about any major change in technology. So many people just blindly buy into the common knowledge them of "technology is always changing" to mean that any change must be a necessary one and that's just not true. If you need an example just look at most of Microsoft's product changes (menu being replaced with ribbon, control panels moved around and named something different, user interface changes but with absolutey no functionality change, etc, etc, etc).
For example, you said above that to change the layout the have to alter the markup. Why is that a problem? Whether you make changes to an HTML file or a CSS file isn't it all the same?
It's not a problem per se, but you should consider best practices. Your style sheet contains your style, and your HTML contains your content. As soon as you start using tables for layout, you are blurring the lines between the two. This means that you can no longer simply open your CSS file to make stylistic changes, you have to edit the HTML also. Now this may not be a big deal for you as an individual; it is obviously what you are used to doing. But as soon as you start working in a team, this can increase the workflow.
Put simply, nothing on the web is black and white, and it is fairly rare that there is only one correct way to handle something. There are better ways to handle things though, and tables aren't the best way to handle layout. They introduce little quirks that can be avoided, and make it more difficult to edit styles.
Tables were never meant to be used as they have been; that is our fault (web designers). CSS still doesn't have sufficient layout tools, but it is heading in the right direction. My biggest recommendation to you would be to force yourself to use a different layout technique on your next project. Nothing will teach you the benefits like actually doing it, and it will certainly be more of a learning experience than reading through this thread, as much of what is being said makes sense to those who use CSS for layout, but not for those who use tables.
Finally, if you do decide to use CSS for layout, I would recommend having a read of an article I wrote on using inline-block instead of floats. This is another interesting topic of conversation; there are those who prefer floats, and those (like me) who try and avoid using them for layout. Either way, hopefully the article will teach you something new: http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Ideally, I believe an html page without any CSS, should look like a well structured and easy to read written document. It shouldn't look much different than a document typed up in a word processor, since the whole idea of most pages is just to convey information.
The beauty of CSS layout comes in the ability to take this rather plain, but highly readable document, and infinitely design it to look however we want, without ever touching the original html markup.
joshuanhibbert: Ya know, I can understand where that would be a benefit as a team and why having a clear seperation like that would be definitely beneficial. Yea, I know I'm going to have to learn to change.... just really hate learning new stuff all the time. Wish we could just have one language and stick with it. I actually think if we could magically reinvent the internet and create a single language for everything it would be awesome. No more having tons of languages (java, .net, asp, html, php, ajax, etc). My personal opinion is I think eventually we (humans) are going to have to standardize somewhat on codebases that get used if we ever truly want to have a 100% working form of technology. That may sound crazy but honestly think about how many errors happen every day to the average user, whether it be in a browser or running an application. Those errors aren't caused because of some capacitor just decided not to pass it's charge on when the semiconductor gates open....nope, it's almost always because of some kind of incompatibility in code and the application not knowing what to do. If we ever truly want a chance at perfection, we need to stop having 87 different kinds of programming languages. Otherwise you'll get more fiasco's like HD-DVD and Blu-Ray caused. Every company wants "their" product to be the standard and just like Apple & Microsoft, and they never want to share. I would love it if the free market could dictate the standard but history has shown us that when people are "free" to set those standards they rarely if ever get set.
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?
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.
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.
Without having a ton of time to formulate a response right now, my main practical argument for div's versus tables is speed and flexibility. It takes so much less time to build websites without tables. TheDoc touched on it above - the ease of changing positions, colors, how elements interact, etc is so much more flexible without tables.
I used to build exclusively in tables about 9 years ago. I had no idea how limiting and time consuming it was until I switched. Recently I had to work on a project that required a table design and being forced to go back and work in tables reminded me how awful they really are to work with comparatively speaking.
Tables are not modular. CSS is.
I find that tables are useful when it comes to displaying data needed to use in that format. They are not to be avoided like smoke bombs, but are to be used sparingly.
The reason this is emphasized for many is because some people used to and still do use tables for the entire layout. This makes the webpage inflexible, decreases SEO optimization, and overall, is just messy when it comes to CSS.
It's fine to use a table now and then to display data, just don't use it for the whole layout.
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!
Client: "How about you put the sidebar on the left rather :$"
Me: "Ok, #sidebar { float: left; }"
You can visually restructure a site with CSS without touching HTML. The first CSS work I ever did was to reskin some apps themes without touching the html. I'm pointing that out to show the flexibility of CSS when needed.
Tables and absolute positioning isn't too fun :p
To be honest, I don't think any one in this thread will convince you though. I'm not sure how often you develop sites, but give yourself a 3 month challenge and only use html/css. It's tedious in the beginning (like most new tools) and once you "get it" I'm sure you'll love it.
If you don't appreciate the power of using divs, sections, articles, headers, navs, footers etc and you don't care about semantics in development then I genuinely don't feel that you'll understand why using tables for anything other than tabular information is a bad idea.
I would suggest you do some reading on HTML5 and CSS3.
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
http://stopdesign.com/archive/2004/07/27/throwing-tables.html
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
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.
example of the power of css: Css Zen Garden
why the structure of your markup matters and reasons not to use tables except for tabular data: Designing With Web Standards
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.
The separation of content and style.
@senff - that is probably the best analogy for this I have ever heard.
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.
@tphelps19, this is going to sound off topic but VB6, really? Are you at least using VB.NET?
This is where the industry is/has been going. There are
plentyof 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.
@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.
As @joshuanhibbert has said, semantics and lightweight markup are key to a clean and efficient website - if your markup is full to brim of tables, rows, columns etc it will undoubtedly be a mess and is not an efficient or smart way to develop.
The only time I used tables was when I was 14, using a bootleg copy of MX doing my first ever website, after that I learned how to use divs and ul's etc, then with HTML5 we now have even more elements to make our code even cleaner and more expressive.
A good litmus test for great HTML is if you can read it (via the source) and understand the hierarchy and the information contained within. If you have an endless set of tables I guarantee that would not be readable or semantic, and if you don't care about that, more fool you.
A hell of a lot less of a headache when styling, that's for sure. lol I really think it comes down to using tables for they are meant for - tabular data.
Look at it this way: Would you rather write and style more markup, or less? Imaging building an entire website of nothing but tables, just like the old days - no way Jose!
John: LOL yes I know, I know.... my .NET friends tell me this all the time. The thing I learned first was classic ASP / VBScript and it worked so great for everything I needed so I didn't see any need to change. It wasn't until Microsoft forced things to go to .NET that I realized what they were doing. The problem is though I can't figure out what exactly what .NET does that ASP couldn't? (Other than the previous mentioned compiling of code). I'm going to have to learn it no doubt but the reason I think .NET was for was because classic ASP/VBScript was just too easy and MS wanted to protect the industry more (that might not be it but MS has a huge history of doing that). I have struggled a lot trying to learn .NET because it's so radically different. I mean, when it first came out the name confused a lot of people and then they tried to call it "ASP.NET" making it seem like it was just an upgraded ASP when it fact it was a complete overhaul. Do you have any recomended online guides/tutorials you'd recommend for someone like me who is coming from classic ASP/VBScript trying to learn .NET? I really need one if you do.
joshuanhibbert & andy_unleash: Not sure what trolling means but I assure you I'm not just trying to argue, trust me I wouldn't have to come online to do that. ;-) But admittedly, people tell me all the time I have an argumentative personality so sorry if I come across that way.....guess I just call things like I see them with no regard on offending anyone. But to your point, I probably should have been more specific as to what I meant: you and several others are giving reasons and I think I'm seeing some of them but others I'm just not seeing the "WHY" behind them. For example, you said above that to change the layout the have to alter the markup. Why is that a problem? Whether you make changes to an HTML file or a CSS file isn't it all the same? If it's something that will be used repeatedly on multiple pages then I use include files. I honestly don't understand the difference. Is it time savings? For me I am super fast at tabled html becuase you are right it's the only way I've ever known. Can you give me a very specific case or example of what you're talking about? I think I need something very black & white to understand what you're saying.
I know I am going to have to learn tableless HTML so that's why I want to find a good tutorial for guys like me, but at the same time I want to try and understand the real reason behind why people say there is such a drastic difference. From what I think I've gathered about the use of DIVs, one big advantage is that DIVs just have more flexibility than tables in terms of not being restricted by a parent container necessarily? Someone above gave the example that if you want to move it to another side you just do {float : left}? That I can see as an advantage because I think you can layer your data?? That was one big thing with tables was very hard to do.
Everyone: I think I am starting to see some of the advantages of CSS & DIVs over Tables, not quite as die hard as most of you yet but I'm seeing some of them. Some of the advantages are very clear & straight up because of the restrictions of tables and being contained the way they are. And other advantages like I said earlier are because certain functionality was specifically taken away from tables in HTML5. To be honest with everyone, I think this is what really gets me going about any major change in technology. So many people just blindly buy into the common knowledge them of "technology is always changing" to mean that any change must be a necessary one and that's just not true. If you need an example just look at most of Microsoft's product changes (menu being replaced with ribbon, control panels moved around and named something different, user interface changes but with absolutey no functionality change, etc, etc, etc).
As always, appreciate the comments guys.
It's not a problem per se, but you should consider best practices. Your style sheet contains your style, and your HTML contains your content. As soon as you start using tables for layout, you are blurring the lines between the two. This means that you can no longer simply open your CSS file to make stylistic changes, you have to edit the HTML also. Now this may not be a big deal for you as an individual; it is obviously what you are used to doing. But as soon as you start working in a team, this can increase the workflow.
Put simply, nothing on the web is black and white, and it is fairly rare that there is only one correct way to handle something. There are better ways to handle things though, and tables aren't the best way to handle layout. They introduce little quirks that can be avoided, and make it more difficult to edit styles.
Tables were never meant to be used as they have been; that is our fault (web designers). CSS still doesn't have sufficient layout tools, but it is heading in the right direction. My biggest recommendation to you would be to force yourself to use a different layout technique on your next project. Nothing will teach you the benefits like actually doing it, and it will certainly be more of a learning experience than reading through this thread, as much of what is being said makes sense to those who use CSS for layout, but not for those who use tables.
Finally, if you do decide to use CSS for layout, I would recommend having a read of an article I wrote on using
inline-blockinstead of floats. This is another interesting topic of conversation; there are those who prefer floats, and those (like me) who try and avoid using them for layout. Either way, hopefully the article will teach you something new: http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/Ideally, I believe an html page without any CSS, should look like a well structured and easy to read written document. It shouldn't look much different than a document typed up in a word processor, since the whole idea of most pages is just to convey information.
The beauty of CSS layout comes in the ability to take this rather plain, but highly readable document, and infinitely design it to look however we want, without ever touching the original html markup.
joshuanhibbert: Ya know, I can understand where that would be a benefit as a team and why having a clear seperation like that would be definitely beneficial. Yea, I know I'm going to have to learn to change.... just really hate learning new stuff all the time. Wish we could just have one language and stick with it. I actually think if we could magically reinvent the internet and create a single language for everything it would be awesome. No more having tons of languages (java, .net, asp, html, php, ajax, etc). My personal opinion is I think eventually we (humans) are going to have to standardize somewhat on codebases that get used if we ever truly want to have a 100% working form of technology. That may sound crazy but honestly think about how many errors happen every day to the average user, whether it be in a browser or running an application. Those errors aren't caused because of some capacitor just decided not to pass it's charge on when the semiconductor gates open....nope, it's almost always because of some kind of incompatibility in code and the application not knowing what to do. If we ever truly want a chance at perfection, we need to stop having 87 different kinds of programming languages. Otherwise you'll get more fiasco's like HD-DVD and Blu-Ray caused. Every company wants "their" product to be the standard and just like Apple & Microsoft, and they never want to share. I would love it if the free market could dictate the standard but history has shown us that when people are "free" to set those standards they rarely if ever get set.
Thanks to all of you who posted. Ciao.