What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
150 Comments
- judicar, on 04/09/2009, -3/+80For sale: One dead horse, well-beaten.
- boozedrinker, on 04/09/2009, -4/+46Awesome article. It just sucks that EVERYTHING is hell because douchebags still let IE6 have such a huge market share :-\
- MacTyler, on 04/09/2009, -9/+48I love how half the people in here with no professional experience at all can just say, "oh whatever works best". Sorry guys but in the professional world it does matter. Sure Sally's local business site you coded in tables doesn't make a difference, but have a look at all the professional web startup sites, why do they ALL use divs if it, "just doesn't make a difference".
I am not just trying to be a jerk, just please understand there is a reason people do things. - carbonetc, on 04/09/2009, -1/+39Personal preference is definitely not the answer. There are specific, measurably beneficial reasons to use CSS over tables, as any web developer worth anything knows (mostly centered around accessibility, semantics, separation of presentation from content, etc). It's only the amateurs who think there's no difference.
But there is a good reason the debate still rages. If floats and positioning were really the answer, no one would find tables at all appealing. Tables would be all cons and no pros. There'd be no reason to talk about them ever again. People often argue (even in the comments above) that once you get used to CSS all your problems are solved and you never look back, but in my opinion these people have trained themselves to make excuses for CSS. There's koolaid to be drunk on both sides. The truth is, both approaches are profoundly inadequate.
The grid is a fundamental component of graphic design. It's just as essential to design as any of the benefits of CSS are to development. Thus any layout technology that doesn't respect the grid can't be considered successful. Workable, sure, but not successful.
When people argue for tables, they aren't really arguing for tables. They're arguing for a technology that respects the grid. Tables respect the grid, whereas divs are spectacularly bad at respecting the grid. If something as simple as a three column liquid layout that's flush on the bottom actually requires a detailed tutorial to teach someone how to do it, the underlying technology is failing at its job. You shouldn't have to hack the technology even a little bit just to accomplish the simple and the intuitive. The tool should work for you, not against you.
Until we have something that respects semantics, accessibility, etc (like floats and positioning) AND respects the grid (like tables), our development tools remain woefully deficient. I don't know what the ideal solution would look like exactly, but certainly overflows need to be smarter, unnested divs need to be somehow slaved to each other so their dimensions are dependent (e.g. overflow in one div causes another to expand), unnested divs need to be anchorable relative to other divs (e.g. top left corner of div2 sticks to bottom right corner of div1), dealing with the vertical dimension shouldn't make you want to shoot yourself... you get the picture. The next generation of HTML/CSS makes a few strides in these directions, but there's still a very long way to go.
If we keep making apologies for CSS in its current state we take our eye off the goal. Kind of ***** is better than very *****, but it's still *****. There'll be a day where we wondered how we put up with tables OR floats/positioning for layout for so long.
And I say all this as a 7+ year professional, for what it's worth. - inactive, on 04/09/2009, -10/+42Ah, the tables versus div debates again. Sounds like a broken ***** record. Do what works for your given needs or the needs of your client. Well thought-out tables don't have to be useless, and poorly thought-out CSS is trash. End of story.
- Armor1901, on 04/09/2009, -0/+26God Bless the people who enjoy and are talented at building and maintaining websites. I myself am a network engineer, and I love nothing more then sitting in front of a router's CLI and configuring that thing for hours on end. All computer discipliens are NOT equal, however. I would rather shoot myself in the face if someone told me I had to build a website though (at least build one properly, with the use of CSS and whatever the hell it is you guys use). Kudos to you guys.
- kingkool68, on 04/09/2009, -14/+32CSS Table layouts are just as bad as table tag layouts. Just replace <tr> and <td> with <div> and you're back to the same unsemantic mess. If you need help figuring out what semanticelements to use, print this out and tape it next to your monitor. http://keryx.se/resources/html-elements.xhtml
--
twitter.com/kingkool68 - scarwars, on 04/09/2009, -2/+19why on earth would you paste your twitter thingy at the end?
Not enough friends? - caitlinwoodward, on 04/09/2009, -1/+16Not a big problem if you know what you are doing.
- lifeandtimes, on 04/09/2009, -4/+19Gotta love the "all browsers support tables!" argument. /s
1. Tables are for data, not page layout.
2. CSS layouts are not hard. All it takes is a little practice.
The third, and nearly the most important in my eyes, is that if designers/developers continue to design web pages for the least advanced web browser because it is easier than how is web design supposed to advance? Don't want to mess with IE6's quirks? Use conditional comments and load a basic style sheet that only it will see. Use a more advanced style sheet for the more standards compliant browsers. - dchaffin, on 04/09/2009, -3/+16@MacTyler - I wish I could digg your comment 100 more times. I could not agree more with your statements.
Duct tape wasn't invented to fix cars, but given enough of it I could make sure my hood wouldn't fly open going down the road. However, if I took it to a professional mechanic I certainly would expect him to fix it right.
Same goes for the table/div argument. Sure, I'm super excited for the new semantic structures in HTML5, but until 2022 comes along, DIVs and the other block elements discussed in this article are WAY more appropriate for layout than tables and CSS is extremely good at laying out with DIVs if you know what you're doing. Any professional web developer working in 2009 should certainly know HTML and CSS. I started working seriously with CSS in 2002 and I do not miss table-based layouts in the least.
TIP: ALWAYS work with Firefox and/or Chrome (with its incredible 'Inspect Element' feature) first and if you do it right you should only need to make minor "fixes" for IE 6 & 7. - nitrusoxyde, on 04/09/2009, -3/+15Tables being 'easy' the the amateur excuse for not learning to do thier job. DIVs are ***** easy. Float and Clear are the two most basic CSS tags in existence - refusing to learn them is like refusing to use a hammer because you know how to use a screw driver.
- MacTyler, on 04/09/2009, -3/+13uhhhh..... just leave the technical stuff to us.
- bpapa, on 04/09/2009, -0/+9Glad this was the first comment, it grates my goat whenever I hear the phrase "divs vs. tables." It's tables vs. semantic markup.
- RadiantSilver, on 04/09/2009, -2/+11100% height is still broken with DIVs. And for compliance, modern browsers have made it stop working with tables as well. I'm still bitter about this.
- carbonetc, on 04/09/2009, -1/+9If you haven't heard a reason then you haven't done any web development research at all. This information is everywhere.
The most important reasons off the top of my head:
1) Semantic integrity. Information is tagged according to meaning and hierarchy rather than its placement on the page. This makes the data potentially more understandable to machines (like Google crawlers), makes microformats possible, etc.
2) Separation of content from presentation. See http://www.csszengarden.com. You can't appreciate how important this is until you have to swap out the visual design of a 100 page website built by an amateur while leaving the content unchanged.
3) Accessibility. To a blind person the layout is irrelevant. The data makes sense by virtue of its hierarchical organization. If your data is organized based on its placement on the page rather than its logical structure, it can be confusing if not unusable with a screen reader. With CSS you don't have to make sacrifices (ideally) on the data side or the layout side. They remain mostly independent.
4) Platform-friendliness. Related to accessibility. A site might get displayed completely differently on a mobile phone. Most or all of your CSS may even get stripped away. If your data is organized logically without making sacrifices for layout, this isn't much of a problem. The website is still usable. But a 700 pixel wide table locking down the layout isn't fun when viewed on a 200 pixel wide screen. As a larger variety of devices start connecting to the web this will only get more important. - smedrick, on 04/09/2009, -0/+8And you, sir, also deserve kudos. I have a pretty decent understanding of networking and protocols, but what you do is an art as much as it is a science.
- joshcxa, on 04/09/2009, -2/+10When I switched to using divs I hated going back and updating my old table layouts. The customisation wasn't there. Looking at the code is much easier on the eye as well. There is just so many more benefits
- teabagginz, on 04/09/2009, -1/+8hell has no wrath like IE6 does.
- MacTyler, on 04/09/2009, -3/+10And that is why you are still doing websites for Sally's business.
- johnnysaucepn, on 04/09/2009, -1/+8The reason that we use semantic code and css is because it's better for the customer, better for maintenance, better for mobile platforms, and better for accessibility. It's a means to an end, not an end in itself.
Sally may be happy with her tabled layout, but her customers and her search engine results might not be. More than that, you won't be when you have to overhaul it for new browser engines and completely rewrite it when she changes her branding. - Aidenf77, on 04/09/2009, -0/+7What's wrong with self-training? People have to start somewhere. I'd say that what I've "taught myself" (through Google searches and communities like Coding Horror and Stack Overflow) has proven to be far more valuable than anything I learned while completing my Comp Sci degree. The fast moving industry rendered most of my programming curriculum archaic by the time I even started the course work.
I think we all agree that a better markup and CSS standard is "long overdue," but you're overlooking the fact that Microsoft has had a paralyzing grip on the landscape for more than a decade. Initiatives like Mozilla's Firefox are weakening that hold but the effects are still evident even now.
I would also disagree that Web Dev is the easiest of comp sci. Achieving true cross-browser compatibility is something of a black art and takes a certain amount of creativity; something that isn't in huge demand in other comp sci disciplines. Also, the sheer amount of knowledge and experience required to be effective and valuable at your job is staggering. HTML (and all its derivatives), XML (and all its derivatives), CSS, Javascript, JSON (and other serialized data forms), Actionscript (and the flash environment), Pearl, Python, PHP, C#, VB.NET, Java, Ruby, SQL (and all its derivatives), tying all that together nicely with AJAX and web services... the list could go on! Any developer worth their salt has probably had to encounter a good 80% of the things just mentioned. That's a lot of specialized information and is not, as you would put it, always easy. Did you mean web designer? That'd make a little more sense considering it's a specialized focus area within web development. - N01SE, on 04/09/2009, -7/+13Christ, anybody can pick up a programming/markup language and make really ***** software with it, and the software market is filled with self-trained morons. For ***** sakes man, learn to use the ***** div element, write semantic markup, and quit whining because you have to alter the way you develop, get use to it, you're a software professional (okay, maybe that's a stretch)! Web dev is by far the easiest area of computer science and it blows my mind how many companies are still stuck back in the late 90's web, and even more so, how unacceptably slow this area has progressed compared with computer graphics, A.I., information retrieval, etc. The new modules in CSS 3.0 / HTML 5 are long overdue. How are we still talking about this *****?
- zeebo, on 04/09/2009, -1/+7You should really put the effort into learning css. Rather than a whole bunch of tables, or divs, for the type of pages you're talking about making you could probably simply have the heading tag, a menu, and the content
- zeebo, on 04/09/2009, -1/+7In two words: Internet Explorer.
Unlike the rest of computer science which is largely free to do what it wants thanks to the wide availability of languages and platforms, once you leave the server you have to think about what is going to be used to view it, and unfortunately that means contending with Internet Explorer, which drags behind every other browser by a sizable margin.
As long as Microsoft sees standard web technologies as a direct competitor to Windows as an application platform, we can probably expect that Microsoft will drag its heels as much as possible, knowing that since they bundle IE into Windows and that it gets a sizable user base as a result, it will force us all to make sure that things work in IE, which right now means no immediate planning for HTML 5, SVG, Canvas, CSS3, etc. - MacTyler, on 04/09/2009, -3/+9Some other reasons for stylesheets and divs
- When you have a backend run site with PHP you need to have design irrelevant code that allows you to keep the functionality of your site unchanged while completely overhauling the look of it
- Separate formatting for printing with a print.css stylesheet
- If you want to make your website customizeable, ie drag and drop sections
- Stylesheets and divs use less total code
- Seperate stylesheets can be used for different devices - lifeandtimes, on 04/09/2009, -1/+7A resume stating you prefer tables and inline styling would be a joke now-a-days. The employer might wonder whether or not the applicant had bothered to read up on the current state of web design.
- Cl1mh4224rd, on 04/09/2009, -0/+6> "I would rather shoot myself in the face if someone told me I had to build a website though (at least build one properly, with the use of CSS and whatever the hell it is you guys use)."
Black magic. Shhhhh... - fracktica, on 04/09/2009, -4/+10If you ever have a customer that requires a site to be accessible to someone with a visual impairment, table based layouts can be a big PITA for screen readers.
- jessecollins, on 04/09/2009, -3/+8I think it's just personal preference. Personally for me divs are the way to go. My recommendation is divs and using blueprint css (http://www.blueprintcss.org/) which has some special CSS for IE (to eliminate discrepancies between IE & the rest) and your site will render on all browsers the same.
- lifeandtimes, on 04/09/2009, -0/+5This article, from my quick glance, isn't neccesarily a table vs div article. One of the points it makes is that some people tend to abuse divs just as some people abuse tables. New designers/developers can sometimes make the mistake of using a divs for everything and just giving each div a unique id/class. That completely defeats the purpose of using a div based layout over a table based layout. The article is basically trying to point that out. I've heard of this problem from other sources as well.
- MacTyler, on 04/09/2009, -2/+7I am not just saying, "everyone else is doing it". I am saying all of the PROFESSIONALS are doing it, there is a huge difference. Don't you think that the most respected people in their fields know more than the average guy on digg telling me it "doesn't matter". I am just saying it does matter, maybe not for your project, but if you want to be the best don't give me your résumé saying you use tables and inline styling.
- Fleagleman, on 04/09/2009, -2/+7Oh God, these stories on Digg always create a viper pit of Digg user 'experts' who are just waiting to either post their dribble about how much more they know about the subject than the person who wrote the article, or are just waiting to pounce on some poor shmuck who makes the mistake of trying to add some additional info or insight into the matter. Some people just can't wait to tell you how wrong they think you are.
- dittonara, on 04/09/2009, -1/+6LOL at artsforeveryone's source code
- sodoh, on 04/09/2009, -0/+5Sorry but I am not into Equestrian necrophilia
- pingveno, on 04/09/2009, -1/+6Using different stylesheets for different media is one of my favorite CSS features. In the past I have created web sites that have menus and must be able to be printed. It's trivial to take out a menu.
#menu {
display:none;
}
Wikipedia uses the same technique. When you print out an article it uses a printing stylesheet that nicely formats the page for your printer. - cloudberries, on 04/09/2009, -2/+7@MacTyler
Absolutely. After using these things for long enough, you start to appreciate the semantic difference between tables and divs, and exactly why one is not a replacement for another. Building a website using tables is like hammering in a nail with the heavy end of a screwdriver.
It's just not what they were designed for, and their use in websites may not seem like an important thing, but when you think of browser cross-compatibility, and how your website will be looking on text-browsers, or when it's being scanned by tools to assist the partially sighted, for example, then these important issues come to light. - MacTyler, on 04/09/2009, -1/+5uh, who said anything about, "CSS Table layouts"
- solid12345, on 04/09/2009, -3/+7Thank you. I am a decent designer first and a web designer second, tables are easy for me but my clients can't get it through their heads that I am not a coder by nature, but they still demand a site, I end up giving them a table-based site. Sure it may be cheesy and 1999ish but most my clients are local, I charge a fair rate and don't screw them over with a 3,000 dollar website with nice flash intros and CSS for their ma and pa restaurant when all their customers want to do is jump on the site real quick and find a menu and know they exist.
- WoollyMittens, on 04/09/2009, -3/+7Tables are for data in a tabular form. Use the HTML elements for what they're meant to do. You can find how at http://www.w3c.org/
This discussion was ended more than 5 years ago, why does this article even exist? - lifeandtimes, on 04/09/2009, -1/+5Have to agree. If a designer fills a page with divs without realizing why they should use divs instead of tables than it completely defeats the purpose. Great link btw.
- magamiako, on 04/09/2009, -5/+9Keep in mind that all browsers understand tables and how they work. Not all CSS layouts and elements are supported in all browsers. While separating design from content is ultimately a good idea, as of right now it's still kind of on the fence.
- cloudberries, on 04/09/2009, -0/+4Hell on IE6 appears improperly formatted, with bits all over the place
- cloudberries, on 04/09/2009, -1/+5Generally, the customer never thinks about these things, you're right - but that doesn't mean you shouldn't give them quality goods.
Sure, I'll agree there's a hell of a lot of developer discussion which matters only to accessibility geeks and the like (I count myself amongst their number), but there are a lot of reasons why developing table-less layout skills will benefit your customers, mainly that, as a developer, it gives you the flexibility to explore the full range of design options, rather than limiting yourself to what can be achieved with tables alone.
And your pedantry about text browsers is missing the point. A well thought out design should work on almost any browser*, without any extra effort on the developers part. I don't really care about text-based browsers myself, but the techniques that I apply to web design allow me to make sites that will at least appear structurally sound if anyone ever does choose to view them on a text browser.
(*except IE6) - lifeandtimes, on 04/09/2009, -1/+5CSS is not powerful? boggle
- dreamache, on 04/09/2009, -3/+7It's hilarious that there is still even a debate about table layouts vs. css layouts. I would have expected this article 5 years ago, but now? Jesus..
- 7aji, on 04/09/2009, -0/+3"More lines of code mean larger file sizes, which mean longer download times."
I'm not sure that code takes that much space. However designing with tables was very annoying and senseless while with divs, I group elements that share the same properties like menu, header, article, footer, etc... It just makes sense! - smedrick, on 04/09/2009, -0/+3WOW. I'm amazed the site renders.
- daveluke1, on 04/09/2009, -0/+3Free Horse!
-
Show 51 - 100 of 157 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is