In addition to Larry's comments, also see <a href="http://phrogz.net/css/WhyTablesAreBadForLayout.html">http://phrogz.net/css/WhyTablesAreBadForLayout.html</a> and <a href="http://en.wikipedia.org/wiki/Separation_of_presentation_and_content">http://en.wikipedia.org/wiki/Separation_of_presentation_and_content</a><br>
<br><div class="gmail_quote">On Sun, May 1, 2011 at 11:44 PM, Larry Garfield <span dir="ltr"><<a href="mailto:larry@garfieldtech.com">larry@garfieldtech.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<div bgcolor="#ffffff" text="#000000">
Table-based markup:<br>
<br>
1) Is worse for search engines. Search engines handle semantic
markup better, because they can extract useful information about the
page from the markup. Tables confuse them and they cannot rank the
data on the page as well.<br>
<br>
2) Is more verbose. While your eyes may have grown accustomed to it,
that makes the page load more slowly. With the proliferation of the
wireless web (back to dialup speeds we go!), that is a significant
problem. The usual example I use here is Slashdot, which switched
from table-based to pure-CSS layout back in the early '00s and saved
multiple *gigabytes* of data transfer per month. That translates
into $$$, as well as a faster user experience.<br>
<br>
3) Is harder to maintain. Really. Even in a CMS.<br>
<br>
4) Is not accessible. By "accessible" I mean "makes sense to
something other than a pair of human eyeballs". Screen readers,
search engines, assitive technology (for people that are partially
disabled), etc. all work better with intelligent, semantic markup
than with purely visual markup.<br>
<br>
5) Is harder to build. Really. Especially in a dynamic system like
Drupal, table-based layout makes it harder to build a flexible page.<br>
<br>
6) Doesn't scale down to mobile browsers. Mobile browsers will be
the majority of web traffic within 2 years or so by some estimates.
In some parts of the world it already is. Good semantic designs
scale down to 4" screens far more easily than tables. I'd go as far
as saying that "adaptive design" (where the layout changes depending
on the size of the screen automatically) is simply impossible with
tables.<br>
<br>
7) Doesn't offer anywhere near the expressive power of CSS. If
you're trying to get a visual effect fancier than three columns with
fixed rectangular color regions, you need to use CSS for styling.
Tables just can't do that.<br>
<br>
Not to put too fine a point on it, but if all you're thinking about
is "a good looking theme", use Photoshop, not the web. Building a
web page is about far far far more than simply painting a picture,
and if you want to do more than paint a picture that has columns in
it you need to use CSS-based layout.<br>
<br>
"Personal preference" is not even on the table (no pun intended) for
why CSS-based design is better than table-based. It's not a
"prejudice of the lazy". It's a prejudice for using the right tools
for the job they were intended for, and using them properly. That's
not a subjective statement, nor one simply based on which one
learned first.<br>
<br>
Yes, it's time for you to learn CSS. Fortunately, it's much easier
than it used to be since modern browsers finally support CSS
properly (now that IE 6 is a virtually non-existent player in most
markets). <br><font color="#888888">
<br>
--Larry Garfield</font><div><div></div><div class="h5"><br>
<br>
On 05/02/2011 12:07 AM, Warren Vail wrote:
<blockquote type="cite">
<div>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial">I was just
getting ready to tackle my first theme in Drupal
7, and is my practice, looking through the themes to find
for one to hack into
being mine, when I found that none of them used tables for
layout. Now I
have heard many people voice the opinion that tabled
layouts (which I’ve
been quite successful with) are bad, and CSS (which I am
less prepared to deal
with) are good. And in my ages of experience I have, up
until now,
assumed that the expressed choice between good and bad was
based on (as it
often is) what people had learned vs what they had not,
and did not want to
have to bother to learn, so I said nothing until now</span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial"> </span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial">Now I see
that Drupal 7 (a product I have some respect for)
seems to have none, in those that I have looked into, at
least. Did what
I had perceived to be merely a prejudice of the lazy make
it’s way all
the way into the D7 Platform, or is there some legitimate
reason for abandoning
tabled layouts that I have missed (must I finally buckle
down to my own
laziness and tackle CSS to that depth)?</span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial"> </span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial">Why are
Tables BAD and CSS GOOD (keep in mind, I’m
after a good looking theme, and not good looking code,
necessarily, since none
of my end users will ever look at the code). I am looking
for some reason
other than good looking code (or someone’s vision of
correctness) to get
behind CSS for my themes, and believe me “being easier”
won’t
convince me much either. I’m guessing there must be some
other good
reason I’ve missed. </span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial"> </span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial">What would
that be?</span></font></p>
<p class="MsoNormal"><font face="Arial" size="2"><span style="font-size:10pt;font-family:Arial"> </span></font></p>
<p class="MsoNormal"><em><b><i><font color="navy" face="Arial
Black" size="2"><span style="font-size:10pt;font-family:"Arial Black";color:navy;font-weight:bold">Warren
Vail</span></font></i></b></em></p>
<p class="MsoNormal"><font face="Times New Roman" size="3"><span style="font-size:12pt"> </span></font></p>
</div>
</blockquote>
<br>
</div></div></div>
</blockquote></div><br>