6

Everybody is referring to how content should be separated from layout and I am one strong advocate of that architecture, I find it easy too to use CSS to layout, much much easier than tables,

But why oh why, do big names still use tables for layout? (Google Shopping is the biggest offender), eBay, Amazon, BaseCamp... great websites wouldn't you agree? I just need to understand their motives, so that I know for sure: am I missing something? is it really easier or faster or cheaper to use tables?

Google shopping code snippet:

enter image description here

Improve this question

8 Answers 8

Reset to default
10

Possible reasons:

  1. They're using the lowest common denominator web browser. In other words, they're trying to render reasonably well in older browsers. Because these sites get huge amounts of traffic even a browser with .1% of the browser market can add up to a significant number of users. So in an attempt to support those users they shy away from more modern markup and use markup still supported by those browsers.

  2. The code is old and has not been updated. This can be because of cost issues or logistically issues.

  3. They don't want to. Their sites are obviously well trafficked with their current code so they see no reason to change any of it.

Improve this answer
2
  • 4
    Many successful websites are hybrid table/css designs. Things just lay out better that way in the long run. The most humorous I've run across was the developer who thought all tables were bad and was trying to use CSS and divs to emulate them, even on tabular data. div soup is even uglier than table tag soup. Along the lines of "When the only tool you've got is a hammer, then everything looks like a nail." There's room for many tools in web design.
    – Fiasco Labs
    Oct 2, 2011 at 18:40
  • 1
    that makes a lot of sense, never thought of number 1! but i disagree with the answers below, it is much easier to play with css, much easier to layout and much more scalable... things layout much better in css, tweaks are all over the internet it usually takes 10 minutes to fix for all older browsers, PS. Google search site DID upgrade to new CSS, kudos :)
    – Ayyash
    Oct 4, 2011 at 4:36
3

It some designs, it is very difficult to correctly align content between each others in css, especially 3 columns setup mixed with vertical alignment (like in your example).

Tables provide a rock solid compatibility between browsers, desktop, mobiles, etc ..

Another reason is ... mail clients. A cut and paste from a web browser can render very bad in a mail client, officle client, etc ..

Improve this answer
3

tables are not as flexible as CSS if you need to change the layout later on, but many times they take less effort than attempting to render the same things in CSS using tons of CSS hacks to make all browsers render the same or almost the same (for instance IE).

Improve this answer
3

Perhaps also because they know that next standard, HTML5, accepts (though does not encourage) the use of tables for layout, q.v:

If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document. There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model. The border attribute may be specified on a table element to explicitly indicate that the table element is not being used for layout purposes. If specified, the attribute's value must either be the empty string or the value "1". The attribute is used by certain user agents as an indication that borders should be drawn around cells of the table.

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

Improve this answer
2

Building websites using HTML & CSS is not an easy task. Issues such as Cross Browser Compatibility, fixed/fluid layouts, floating nature of elements etc are general problems which web designer's often come across. To keep the layouts intact, and to render elements at a perfect place, web designers often make use of tables. More over, you can use 100% width for your website content, perfect placement for your elements, which will be resolution free, where as using CSS, often web designers stick to fixed layouts or make use of JavaScripts.

For more detailed info: Click Here

Improve this answer
1

I started coding in 1996. Obviously, I became and expert at coding tables quickly. Tables are quick and easy and really consistent when combined with CSS.

Creating a layout using only CSS or only tables because you think it's the right thing to do, is foolish.

"The right thing to do" is usually a combination of things, including your coding skill level, potential lifespan of the site, other coders, and the technology of your users.

If you have 8 hours to spend on a project and it will take 7 hours to develop using only CSS (for layout) or 2 hours using only tables time (for layout), you'd have only a limited time for anything else, like content or SEO.

Just try to develop something that is fairly easy to maintain, fairly easy to learn, and works just the way you want it to most of the time. Anything other than that is a total waste of time.

Improve this answer
5
  • according to the measures you put forward i would definitely choose CSS, really i still dont understand how can tables be easier to build? i used dreamweaver to maintain them and it was fairly easy, but it NEVER brought me the results I wanted, besides, there is an ugly face of CSS as well, its called Absolute Positioning, and THAT is I would say as bad as all table-layout, but it is faster and much more maintainable, and gets you far more options
    – Ayyash
    Oct 6, 2011 at 4:53
  • Here's how to build a table: <table><tr><td></td></tr></table> You can make that more complex, if you want to, but that was REALLY easy, a lot easier than CSS. If you are building tables in WYSIWYG Dreamweaver, you're letting it mangle your tables. Tables, like anything else, are really easy to master -- but they are limited.
    – Evik James
    Oct 6, 2011 at 14:28
  • 2
    :))) here is how u layout in css <div></div>
    – Ayyash
    Oct 7, 2011 at 16:33
  • While I agree with you for the most part, you should also understand that to novice developers, this sort of advice could be dangerous. Sometimes the right thing to do is find a way to allocate more time to development (or get more manpower), as compromising best practices to save time can end up costing you more time/money/headaches in the long run. It's often hard for novices to see the benefit of devoting extra time to use semantic markup/OOD/unit testing/separation of content and presentation/etc. So they're more likely to arrive at the wrong conclusions using the calculus you suggest.
    – Lèse majesté
    Dec 8, 2011 at 21:19
  • All good advice is dangerous when applied in the wrong manner or at the wrong time. That's what experience is for. There are no "absolute best practices". Each situation is different and should be considered differently.
    – Evik James
    Dec 8, 2011 at 23:53
1

If I were banned from using tables, I would probably emulate them with CSS. They are so natural. A few years ago I would blindly accept all that preaching about the evil of table layout - now I'm choosing what's more convenient. Plus in ASP.NET we have nice table control class. BTW I'm also using table layout in desktop apps (XAML WPF) - I haven't heard any suggestions to deprecate tables there.

This has been on SO: https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

Improve this answer
2
  • 1
    Deprecating tables would be like deprecating air, water, or pizza.
    – Evik James
    Oct 6, 2011 at 15:29
  • If you're emulating a table with CSS, then you're probably doing the reverse--you're not using a table when you should be. There are genuinely tabular layouts that would not be semantically incorrect to use a table element for. But that's not the same as using a table to create a 3-column layout or to help you vertical-align content in a non-tabular layout.
    – Lèse majesté
    Dec 8, 2011 at 21:09
1

Sometimes use table layout can decrease the complexity of the code, because the CSS counterpart is less intuitive.

Too often I add a CSS rule to achieve one goal, but this rule often will have side-effects which you then need to fix. It is because the rule was not designed to solve my problem, and I am the one using its side-effect to solve the problem.

And often I added a lot of margins/paddings/floats/overflows rules to achieve my layout, but after a month I really couldn't tell which set of rules are for this layout goal. There is no standard way to achieve one layout, so if I pass my code to the next person they can only tweak it but never fully understand all the side-effects.

Take the most common 'Equal Height Column' layout for example, there are many ways of doing it. One requires 2 layers of wrappers, and a better solution is no less counter-intuitive. What about needing a sticky footer? Just wrap the header and content again! Pretty soon you will find your design to be rigid and unmodifiable.

Don't get me wrong, I hate to see table as the top container. I just want to point out that CSS can get as ugly as tables from time to time. So it is up to the developer to decide which will be more effective at the end of day.

Improve this answer
1
  • All true, but I think this really shows that developers need to speak up regarding the design/development of the CSS standard and also the way popular browsers implement them. That's the real solution, not reverting back to an old evil that in 99% of cases has more disadvantages than benefits.
    – Lèse majesté
    Dec 8, 2011 at 21:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.