Comparing table-based and CSS-based versions of the design

The table-based version of the Yacht Club design (shown in Figure 1) uses the following techniques:

• Content is placed in a table that has two columns and three rows.
• Header and footer table cells use spans to merge them into long cells.
• The buttons use the Dreamweaver Rollover Image behaviors and each uses two images, one for the on and one for the over state of the links.
• The header, left column, and footer each have a background color on their cells.
• The content text wraps around the sailboat image by virtue of the image align and hspace attributes.

Note: The images used in the layout in Figure 1 come from a Community MX stock photo collection by photographer Jillian Kossin. You can download the collection for free from Community MX.

Figure 1. The table-based version of the design

Note: The last technique above, along with many HTML attributes and properties used for design, is deprecated in favor of CSS techniques that accomplish the same task. Deprecated attributes are being dropped from the specifications, though browsers—for now—continue to render them.

The CSS-based version of this design (shown in Figure 2) uses the following techniques:

• Content is placed in various DIVs, which are generic boxes that you can use in place of cells.
• The buttons are pure CSS and require no images, thus making it easy to add or delete links.
• The illusion of equal-height columns is accomplished with the use of the faux column technique.
• The images that contribute to page design go into the CSS document, and the images that provide content (such as the logo) go into the HTML document. This separates content from presentation.
• The content text wraps around the sailboat image by virtue of the float property.

Figure 2. The CSS-positioned layout of the design

When converting a table-based layout to a tableless layout, you could switch your table markup to DIVs. Some developers advocate this technique as a way of visualizing the conversion between one method and the other. It might help you visualize what DIVs you will need in order to build an equivalent structure.

The table code for The Yacht Club website looks like this (some content has been truncated to make this code easier to read and to save room):

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" ">
     <tr>
          <td colspan="2"><img src="images/headerBG_table.jpg" width="780" height="144" alt="Yacht Club" /></td>
     </tr>
     <tr> 
          <td width="200" valign="top" bgcolor="#AAC7CE">
               <h3>Welcome!</h3>
               <p>Donec eu mi </p></td> 
          <td width="500" valign="top">   
               <h1> Luxury Yachts</h1> 
               <p> <img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310"
               hspace="10" align="right" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit..</p>   

               <h2>Sail to the Bahamas</h2>
               <p>Lorem ipsum dolor </p></td>
     </tr>
     <tr bgcolor="#005C3F">
          <td width="0">&nbsp;</td><td width="0" id="footer">
               <p>&copy; 2009 Luxury Yachts - bring a cup for a bailout</p></td>
     </tr>
</table>

The table tag could be thought of as the container DIV, and the tr and td elements convert to the header, sidebar, content, and footer DIVs. All presentation code—such as the bgcolor attribute—is removed and will be replaced in a style sheet. The DIVs are given semantic IDs that describe their structural function in the layout.

<div id="container">
 
<div id="header">
     <img src="images/headerBG_table.jpg" width="780" height="144" alt="Yacht Club" />
</div>
 
<div id="sidebar">
     <h3>Welcome!</h3>
     <p>Donec eu mi</p>
</div>
 
<div id="mainContent">
     <h1> Luxury Yachts</h1> 
     <p> <img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" hspace="10" align="right" class="fltrt" />Lorem ipsum.</p>    
     <h2>Sail to the Bahamas</h2>
     <p>Lorem ipsum dolor </p>
</div>
 
<div id="footer">
     <p>&copy; 2009 Luxury Yachts - bring a cup for a bailout</p>
</div>
</div>

This switch from table markup to DIVs is certainly one route you can take, but you would have to start from scratch in developing your style sheet and perform many of the steps from Part 1 of this tutorial to float, clear, center, and put into place all the other basic features of the layout shell.

There is an easier way: You can develop the page with a CSS starter page. Beginning with Dreamweaver CS3, Adobe provides more than 30 CSS layouts that you can use as the starting point of almost any design.

Page 2 of 10

Previous Page

Next Page