CSS or Tables – still confused?

Looks like the confusion is still on! Whether to use CSS or Tables?

Being an HTML and CSS developer as you are all aware that in some situations you can’t avoid Tables mainly in the case of data grids, complicated forms, etc.

Give UP and Use Tables
Give UP and Use Tables

Though we have a very good replacement of tables with CSS and dynamic layers which is very light in KB’s compared to the tables which always keep a heavy pressure on-page to load, we sometimes tend to use Tables to avoid Browser compatibility issues, to save time, etc.

If you’re wasting time fighting with CSS and you all know we are, they have got a small tool to judge the same. Download the Give Up and Use Tables timer. And I am sure you will take more time to build a layout or interface with CSS than building the layout using Tables, am I right folks?

The team at Giving Up and Use Tables has come up to prove scientifically that the maximum amount of time that you/we should need to make a layout work in CSS: it’s 47 minutes. And they say “Take three minutes to build a table. And ten minutes to get a donut. Bill the client for an hour. Done.”

But as far as my opinion is concerned I prefer CSS, and I am sure there will be some more options in near future to build more powerful data grids with CSS.

So CSS or Tables?

17 thoughts on “CSS or Tables – still confused?”

  1. Try the tools on this site – multi-column layout generator. It’s not so slow to design CSS layout.

  2. The Floating Frog

    The golden rule is that you should only use tables for tabular data, layout and structure should be comprised of modern CSS and XHTML techniques. This seems to be a stupid argument resurrected out of nowhere, what were you thinking? ;)

  3. The real question is: why is CSS designed so stupidly and implemented so ineptly by various browsers that simple layouts that take 5 minutes with tables can take hours and hours and hours and hours to get working with CSS in the browsers you need to support?

  4. What a stupid question. Clearing on the CSS article bandwagon that is running at the moment, fishing for site visitors. “Tables”, semantic HTML elements related to the tables module in XHTML, are for tabular data.

  5. CSS FTW.

    If you are using tables for layouts then you should just stop developing. Hand your designs off to someone else who will turn your psd’s into xhtml pages.

    CSS isn’t hard you just have to go at it for a while when you getting started. Once you master it, you will understand the flexibility and control that you have over using ugly, horrible, incredibly nested, gross tables.

  6. If you use tables for a layout of any medium to large number of pages, got forbid you need to change the layout. If you design your layout correctly, with css any changes would be a fairly simple css change in one file vs having to completely re-write all you’re pages to adjust your table layout.

  7. Absolutely Yes.

    Your CSS-ONLY for layout is a absolute NONSENSE that I cannot but deride and reject emphatically.

    I am not designer. I am a server side developer that many times am forced to layout pages for content, more than tabular. Don’t preach to me separation of concerns as I eat this dog food every day. Indeed CSS – AS OF TODAY – is perfect for formatting your text and decorating elements. For layout is an absolute piece of trash. I have no time to infinitely explore positioning and overflow and all that garbage that is so broken across browsers.

    CSS-ONLY for layout is a bonanza for you who want to give importance to your job and your activities which, under normal conditions should be rather trivial. Don’t take it as an insult. Designing websites is an wonderful profession. This garbage CSS layout is sick. Layout in a desktop application built with Swing or GTK for instance is snap to grasp and implement – even the infamous gridbag. What is that idiotic element called DIV which would not stay put no matter how you want to stretch it? This whole business of laying out HTML is a hack for a solution cooked by a debilitated committee expected to spew its next creation in a decade with an implementation projection of 2025 – or maybe 2075? Nonsense.

    Did you guys ever think of the hundreds of millions of dollars that waste to hack your DIV’s? Did you think about the time you could’ve spent with your close ones, or relaxing or have a life away from the keyboard? How about the billions of kwatts that, mind you, increase the carbon footprint into extinction if you were to believe Mr. Gore? How about the poor you could feed with the wasted money?

    You, wonderful designers that you are, should demand that the next generation of CSS would be implemented in the next browser version. You should push and demonstrate in the streets to make IE6 illegal – possibly its maker too as they have no respect for our time and efforts.

    Besides, you should also appreciate such words: practical, efficient, time to market, return on investment, simple, common sense and other good words that would force this W3C body to stop chocking life out of us and let us be.

    I took a look at the upcoming CSS layout technique – much better. Until then, here’s the answer: Start with DIV’s and end if TABLES if needs be. Ignore or deride opposition.

    See you and 2075.

  8. @florin – I second what you say. CSS is a nightmare when it comes to layouts. It does not work the same way consistently and it takes ages to get right.

    I am a programmer and have worked with CSS and table based layouts for years and despite my best efforts at trying to use CSS only for layouts, I have come to the conclusion that it is a big waste of time to hold religious views about CSS vs Tables.

    This whole discussion about tables not supporting the semantic web concept while CSS does is also BS. The way the semantic web was initially envisaged was that it should be possible to mark the “meaning” of a content and have the content be displayed appropriately using stylesheets which can be easily changed or modified. That is, the HTML should convey information while stylesheet should convey look and feel.

    Example:
    ID :103301
    Name:Samuel Jackson

    So now the way the employee_id and the employee_name will be rendered can be managed using CSS and external stylesheets. Also, by setting specific rules within the CSS it would be possible to support accessibility (screen readers etc), print capabilities, different types of browsers and clients etc. p, div, span etc were to used to group together content of a similar semantic meaning and the CSS styles will be used to render the content based on the meaning of the content.

    But that is now how things actually turned out in practise.

    Most of the CSS frameworks out there use the class and id attributes of the tags to markup the design of the content instead of marking up the semantic meaning of the content. Also, the class and id attributes are given names which specify design rather than semantic meaning.

    Examples:
    class=”unit two-columns” (Elastic Framework)
    class=”unit two-columns same-height” (Elastic Framework)
    class=”yui-u first” (YUI)
    class=”span-6 append-1″ (Blueprint CSS framework)

    Also, the argument that table-based layouts are inherently far more verbose than DIV based layouts is also BS. You may have a div marked up like this:
    but to get this working you will need to attach a number of long stylesheets and a whole lot of CSS and it would still not work very well across browsers. If you just used tables, you would have used colspan=”8″ and achieved the same result in less time and have it working across browsers without additional tweaks, complicated style sheets etc.

  9. The example should read like this:

    Example:
    ID : 103301
    Name : Samuel Jackson

    The tags were stripped off my earlier post.

  10. @Dimitris

    we at wittysparks are open for all kind of comments except spam messages. readers are free to express their either feeling.

    you comment was not deleted by wittysparks. there might be some issue at your end while submitting.

  11. As web developers we can sometimes get caught up in wanting the technology to do something advanced and specific.

    when in fact we can use a different technology much easier.

    For example, sometimes it’s much easier to use a table to organize data than it is to make complicated CSS-based layout with floating DIV’s and the like.

    We have to remember, the reason why we use technologies like CSS is because it should speed up development time.

    Simple Logic is:

    When it starts to slow us down, then maybe we’re going a little overboard.

    so always keep monitoring time you give and output you get…

    and judge yourself whether use Table or CSS at particular time for particular thing.

    you can not stick to the one as they can not replace each other.

  12. Tables are only easier because you have been doing it for years. If you had been doing CSS layouts for 10-15 years and table-based designs were introduced, you would think the ideas was stupid.

  13. i couldn’t agree more that CSS only for layouts is straight up ridiculous… who dictated that as the “rule” anyhow? in a world of mash-ups and blended solutions, maybe we can give a little here… i know i have!!!

    until certain browsers become obsolete, the only thing CSS is going to do to my tabular data is style it! and i still use CSS to style overall… and it is great for that purpose. i think the coding purists who got it in their head that everything has to be laid out by CSS are being ridiculous… either ridiculous or they don’t have to make things work in multiple browsers… or perhaps they enjoy spending longer on a task then necessary.

    and I wholeheartedly disagree with Doug above. for one, it really did not take me 10-15 years to learn how to get an HTML table to work out… it took about 1 day. and if it takes me 10-15 to get CSS layouts to work like they should (especially in IE6) then i still won’t think my ideas are stupid! give me a break!!! that just argues all the more that i should GIVE UP AND USE TABLES.

  14. It seems the people who prefer tables (for layout) are the backend developers. Here in the comments and also the writers of the scripts I often make templates for. And I can see where they are coming from: knowing the differences in how some browsers render css can be quite frustrating when you just start out.

    While most frontend developers seem to prefer CSS all the way. Not a problem for them, since they do it day in day out. And in that case it’s actually really straightforward.

    Personally whenever I have to recreate a layout for a script, usually with tables for layout, I just strip it all out and recreate it from scratch using css.
    For me it’s quicker than figuring out how all these nested tables work together. And also a bit more professional, you know the semantic web and all that good stuff.

    Of course using tables for tabular data is just fine, that’s why they exits in the first place.

    @ Big Rig
    “who dictated that as the “rule” anyhow?” That would be the W3C, founded by Tim Berners-Lee, the inventor of the WorldWideWeb, html and creator of the first browser.

    And what about presenting a different layout/size for screen, handheld and print when using tables for layout, without recreating the site?

    What about screenreaders, how do they interpret tables? As tables or as layout?

Comments are closed.

Scroll to Top