No doubt, for the requirements you set up, the table based code is cleaner/simpler.
Once you get beyond a simple site column frame like we're discussing here, semantic (x)html/CSS starts to really shine. For instance, the blumentals.net menu is currently:
- Code: Select all
<table width="100%" cellspacing="4" cellpadding="4" border="0">
<tbody><tr>
<td width="100%" valign="top">
<table width="100%" cellspacing="0" cellpadding="4" border="0">
<tbody><tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="index.php" class="menulink">Overview</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="features.php" class="menulink">Features</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="tour.php" class="menulink"><b>Screenshots</b></a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="compare.php" class="menulink">Compare</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="benefits.php" class="menulink">Benefits</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="download.php" class="menulink">Download</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="order.php" class="menulink">Purchase</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="upgrade.php" class="menulink">Upgrade</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="testimonials.php" class="menulink">Testimonials</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="faq.php" class="menulink">Support and FAQ</a></td>
</tr>
<tr>
<td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>
<a href="friend.php" class="menulink">Tell Your Friend</a></td>
</tr>
</tbody></table><br/> </td>
</tr>
</tbody></table>
it could be:
- Code: Select all
HTML
<ul id="subnav">
<li><a href="index.php">Overview</a></li>
<li><a href="features.php">Features</a></li>
<li><a href="tour.php">Screenshots</a></li>
<li><a href="compare.php">Compare</a></li>
<li><a href="benefits.php">Benefits</a></li>
<li><a href="download.php">Download</a></li>
<li><a href="order.php">Purchase</a></li>
<li><a href="upgrade.php">Upgrade</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
<li><a href="faq.php">Support and FAQ</a></li>
<li><a href="friend.php">Tell Your Friend</a></li>
</ul>
CSS:
#subnav li{display: block; list-style-type: none; margin: 0; padding: 0;}
#subnav li a{
background: transparent url(/images/am.gif) 0 50% no-repeat;
color:#003495;
font: 11px Tahoma,Verdana,Arial,san-serif;
padding: 4px 4px 4px 15px;
text-decoration:none;
}
bonus: css is cached after first page load!
The main problem with table code comes with regard to maintenance. Your display stuff is mixed in with your content. If later you want to change the design, you'll need to edit each page of your site. The non-table version will allow you to change the design on the fly while only editing a single CSS file. For instance, what if you decide you want a fixed width layout? Or, what if you want Sub area to appear first in the browser, say to the left of the Main area? Or below the main area? These changes are trivial with CSS.
I think the ability to change your layout/styling site wide from a single spot is massive and could/should be used a lot more around the web. There are amazing analytics tools around now. Why aren't more people tweaking their websites to respond to analytics data? Or experimenting with small changes to see if they help 'conversions'? Yahoo does this constantly - moving the search box 30 pixels left or changing the order of buttons... All of this can be accomplished very quickly with CSS. Doing it to a table based layout (even in a templated cms system) is cumbersome and doesn't allow site owners to adapt quickly. Most of us "launch" a site and then add/remove entire sections or just let it sit until the next launch. Instead, we should be analyzing, changing, analyzing, changing... A site launch being only part one of an ongoing process - an ongoing process enabled by modern web technologies, CSS in particular.
Then there's accessibility, page-weight (loadtimes/bandwidth costs), source order, nesting, semantics (and related drop in SEO), td styling headaches...
Make the jump Karlis! It's undeniably heartburn inducing at the beginning but once you get over the hump (and there's lots and lots of help out there) you'll see it's the only way to go! Plus, your editor is so damn good at it...
10 cents,
will