Tables are not bad. But the problem with building a site based on tables is
that *each page that loads* has to load all of the table code too. For
pages with somewhat complex table layouts, that could constitute quite a bit
of code. There is no way to externalize that code so that it can be cached.
When bandwidth is money, there is significant financial incentive to
eliminate as much of that approach from your site as possible.
In addition, have you ever come back to a page with a complex table layout 2
or 3 years later? How much time does it take you to really understand what
your thinking was? For me, it can be quite a bit.
When you use CSS to layout a page, you can put all of that CSS in an
external file. That file is fetched once from the server, and then it is
cached, so, it's never fetched again, at least not during that session.
Thus, all your layout information is *not* downloaded with each page.
In addition, a well built stylesheet lists the styles with selectors in some
logical order and with some sensible names, so that it's easy to see at a
glance which styles control which logical elements on the page.
Comparing a table-based page's layout markup with a CSS-based page's layout
markup, is often quite shocking. The latter is so very simple compared to
the former.
Finally, there are significant accessability enhancements to pages that are
built with CSS rather than with tables. For example, when a screen reader
reads a table based page, it reads the table's content left-to-right, and
top-to-bottom (I assume an arabic/hebrew page or some other eastern/asian
page would be read differently). This is often NOT how the content is
logically placed on the page, and the result is a big jumble.
With a CSS page, this is quite different - since you deal with logical
regions of the page differently in CSS, your content is all grouped in good
semantic order. And that shows when screenreaders get ahold of it.
To see what I mean, if you have Firefox, and can easily disable CSS, go
here -
http://66.165.96.216
First look at that page with CSS enabled. Then look at it with CSS disabled
(this is how a screenreader would see it). See the difference?
