This left cell uses the attribute id="left_shoulder". A second row contains a transparent 1 x 1 pixel.gif stretched to 160 pixels. That cell uses the attribute id="left_shoulder_spacer".

 

 

You're looking at two tables: a 3-column table sitting inside a 3-column table. The two are normally quite snug, but for the sake of illustration the inside table here is pushed down a bit by a <p> tag and its border attribute is set to "1". Re-size the browser window and you'll see that it collapses nicely -- unless your browser refuses to break the long URL (below).

Check out the source code to see the class and id attributes of the different parts of the tables (e.g., the outside table uses the attribute id="wrapper_table", the inside table uses the attribute id="content_table").

The table design is based on the argument below, which suggests to me that our traditional "top.html" file is going to have to reside in the inside table.

"Let's say your page, like many, is one big table, right after the BODY tag you have a TABLE tag and right before /BODY you have the /TABLE tag. For that page to resize dynamically with the window your best place to start is to have all you percentage-sized cells in one column from top to bottom, don't overlap dynamic cells, doing this, all columns are hard-coded to the pixel but one, and the one column that is dynamic should contain no COLSPAN or ROWSPAN properties. If you need additional formatting in the dynamic column, nest a table inside the cell and set it at 100% WIDTH. This will help the initial table render cleaner and the nested one may help push the table into place. If you overlap dynamic cells with COLSPAN and ROWSPAN properties the resulting pixel-sized cells will rarely render to your satisfaction."

From:

www.webreference.com/authoring/languages/html/tables/resize/

 
This right cell uses the attribute id="right_shoulder". A second row contains a transparent 1 x 1 pixel.gif stretched to 160 pixels. That cell uses the attribute id="right_shoulder_spacer".