Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Creating the Main Layout Table

-Open worksheet.htm if it's not already open

-Choose Insert--> Table

Insert Table Dialog

-Set the following table parameters:

  • Rows: 3
  • Columns: 2
  • Width: Leave blank
  • Border: 0
  • Cell Padding: 20
  • Cell Spacing: 0

-Click OK

Set an ID and Align the Table Centered

With the table still selected use your Properties inspector to:

  • Assign Table ID: mainTable
  • Align: Center

Writing CSS ID Selectors for Table Cells

Before we actually assign the IDs to our <td> tags, let's write the ID selectors in our style sheet.

-Open project.css

-Create a new line below the body selector and enter the following rules:

#mainTable {
	border: 1px solid #000000;
	/*/*/line-height: 1.5em; /* */
 }

What it does: #mainTable sets a 1px black border (which Netscape 4 ignores) and line-height to a nice, spacious 1.5em units. The nested double comments around the declaration hides the style from Netscape 4, which does not do very well with line-height. An em unit is a proportional measure that maintains a relationship based on the size of the font.

 #mainTable td {
 	padding: 20px;/*Pads each table cell in modern browsers*/
 }

What it does: #mainTable td sets the padding for each table cell inside the table. Although Netscape 4 does not honor this property on a table tag, we do not need to hide it because it will not cause problems... it will simply be ignored. You may be wondering why we've bothered to set this rule since we have assigned 20px padding directly on the <table> tag. There are two reasons. First, Netscape 4 does honor padding set directly on the tag and, second, it gives us the opportunity to change padding (if the need arises) for modern browsers via CSS.

 #maincontent {
 	border-left: 2px dotted #333;
 	font-size: 14px;
/*/*/font-size: 100%; /* */ }

What it does: #maincontent defines the main table cell. The left border is set to 2px dotted #333 (dark gray). Netscape 4, of course, completely ignores this... but it causes no problems and does not need to be hidden. Font-size is set to 14px for Netscape 4 and to 100% for modern browsers. As you recall, we set the font-size on the body element to 14px, so modern browsers interpret this rule as being 100% of 14px. We hide the % size from Netscape 4 because it just does not handle this unit very well.

 #sidebar {
 	width: 200px;
 	font-size: 12px;
/*/*/font-size: 85%; /* */ }

What it does: #sidebar serves to fix the width of the left table cell. Font-size is set to 12px for Netscape 4 and 85% for modern browsers. The 85% is based on the body element's 14px font-size (14px times 85% = 11.9px). Of course, a browser will round 11.9px up to 12px.

 #header {
 	background-color: #333333;
 	color: #CCCCCC;
 	background-image: url(csst_bg.gif);
 }

What it does: #header sets the background color of the header cell to #333333 (dark gray), sets text color to #CCCCCC (light gray), and sets a background-image (csst_bg.gif).

 #footer {
 	background-color: #333333;
 	color: #CCCCCC;
 	background-image: url(csst_bg.gif);

 }

What it does: #footer sets the footer cell background color, text color, and background image to the same values as the header cell.

-Save and Close project.css

Merging the Header and Footer Rows

-Switch back to worksheet.htm

-Click inside the first table cell and drag to the right to select both cells in the header row

Merging the Header and Footer Rows

-With both cells selected, click the Merge icon on the Properties inspector to merge both cells.

-Click inside the first table cell of the bottom row and drag to the right to select both cells in the footer row... then merge them, too.

Your table should now look like this:

The Header and Footer Rows Merged

Assigning IDs to the Table Cells

Now that our selectors are written we can assign them to our table cells.

-Insert your cursor in the header row

-Right-Click its <td> tag on Dreamweaver's Tag Selector bar (along the bottom left edge of the Dreamweaver design window)

Assigning an ID

-Choose Set ID--> header

-Insert your cursor in the footer row

-Click its <td> tag on Dreamweaver's Tag Selector bar (along the bottom left edge of the Dreamweaver design window)

-Choose Set ID--> footer

-Insert your cursor in the left cell of the middle row

-Click its <td> tag on Dreamweaver's Tag Selector bar (along the bottom left edge of the Dreamweaver design window)

-Choose Set ID--> sidebar

-Insert your cursor in the right cell of the middle row

-Click its <td> tag on Dreamweaver's Tag Selector bar (along the bottom left edge of the Dreamweaver design window)

-Choose Set ID--> maincontent

Your table should now look like this:

The Table with all IDs Assigned

Code Check

At this point, your page source code should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Default Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 <link href="project.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <table border="0" align="center" cellpadding="20" cellspacing="0" id="mainTable">
 <tr>
 <td colspan="2" id="header">&nbsp;</td>
 </tr>
 <tr>
 <td id="sidebar">&nbsp;</td>
 <td id="maincontent">&nbsp;</td>
 </tr>
 <tr>
 <td colspan="2" id="footer">&nbsp;</td>
 </tr>
 </table>
 </body>
 </html>