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.