共用方式為

Efficiency: Tables vs. CSS for layout

  • 發行項

In a post I made a few days ago, I said that tables were inefficient for layout out data, and someone asked why tables are less efficient.  There are numerous reasons for this, and I want to explore some of them.

First, lets look at size.  If you take the example I used in a previous post, comparing sizes of a straight table plus some style vs, CSS style sheet we get the following chart:

1 Page 2 Pages
CSS + HTML 844 (html) + 573 (css) = 1417 bytes 1688 (html) + 573 (css) = 2261 bytes
Tables + HTML 1347 bytes 2694 bytes

From this, doing only a single page, it looks like tables wins out, but as soon as you start using that same layout on more than one page, using a separate CSS style sheet really takes over.

Another point to look at, is the consistency of changing all of those pages.  With the CSS style sheet, if you want to change the background colour on the header from blue to pink, there is only a single file to change.  If you want to do this on 2 html pages, you now have two files to modify.

Accessibility and viewing the pages with non-PC devices also becomes a bit of an issue with tables.  Tables are great for reporting tabluar data (like I posted above), but what about people who are viewing pages with a screen reader?  The page doesn't quite flow in the same way with tables as it does CSS.  Or what about that person who is viewing your page on a mobile phone or other small screen device.

Tables aren't evil, but they do have their place.

Comments

  • Anonymous
    June 17, 2005
    While I agree with this completely, unfortunately still due to browser rendering bugs in all browsers not just IE you still have to use a table for some layout. I do not want to turn this into an IE bash as sometimes these things go. If I were to place blame on anyone it would be the w3c as some of the differences in browsers are things not specified in the html xhtml specifications. So it is up to the developers of the browsers to interperate. Now using a Table for layout but specifying it's specifics in a style sheet is definately and advantage.

    Unfortunately using the div tag for a complex layout requires a lot of javascript and additional css mark up to get a layout to work correctly in different browser. Hence the size thing doesn't work very well. Sometimes depending on the layout a table with CSS behind it will be more efficient. When the browsers get this fixed or the w3c sets standards more defined. Then things will be happy.
  • Anonymous
    June 17, 2005
    I agree that there are some cases where you need to worry about standards compliance, especially for those cases where accessibility is an issue -- but that's not a common "requirement" for many web sites, although some may want to make it a requirement for all (and that's understandable for those that can't easily view those sites). But I don't agree with most of your reasons that are listed here:

    If you use a table but still use css styles for those tables then the size difference will be minimal -- sometimes tables are even more efficient.

    As for consistency, and changing only one file, again if you use css styles with your tables then this is not an issue at all.

    And while screen readers may have issues have tables, my mobile phone browsers typically give a better view for tables than a pure css solution -- not to mention supporting older browsers far better.

    So if I need to consider accessibility as a requirement I will try to limit my use of tables, but if I just need something that works, especially for mobile users and those with older browsers, then I will stick with tables, along with using css styles of course. And while I hate to say it, so far I have far more requests to support mobile users and older browsers than I do for accessibility.
  • Anonymous
    June 17, 2005
    I use tables + html and apply external css class to individual controls. I find it very easy to operate.
    What is your experience with this style?