Campus 2nd Level Nested Tables - Templates Lesson
My second level campus template is even more complex than the home page. I have unique page sub-navigation along the left, main navigation along the top, and lower navigation along the right. My content is displayed in 2 columns so I will need a content table with 2 cells. A portion of my content will display in a cell which is mauve and this content will display in the same table as the lower navigation. Oh boy, my head hurts just thinking about this page.original sliced admissions page
When I add text I have a problem just like I did on the opening screen.
admissions page with text added
The page breaks mildly in Internet Explorer, and really goes to pieces in Netscape. Below I have a screen shot of the page viewed in Netscape. The red arrows illustrate how the navigation and URL have been pushed down the page.
I will need to use nested tables again. To plan my strategy I place a border around the original table to
identify where my "inner" tables will be placed.
admissions with border & no text
The logo, photos, and main navigation can all be placed within a "top table" (red).
The sub navigation for each section page will be placed together in a left table. (green)
Two columns of text will be created by making a table of 2 cells. (purple )
Last table will contain the white text displayed over a mauve background, the url, and lower navigation. This table will be referred to as the right table. (blue)
I see one problem area, the slice which contains the URL needs to be re-done. Below I have shown how the image was sliced so that
the top part of the url can go in the "top" table and the remaining image can be placed in the "right" table.
I mention this somewhat picky detail, because I often find I need to re-slice once I begin to create my
nested table structure.
I re-slice the image and name the 2 new slices I created.
Now I use ImageReady to create a new version of the page. It is shown below with borders on.
Re-sliced admissions page with borders
Now I need to create my outer table. It has a top row which spans 3 columns, and contains the "top" table. The second row contains one cell which contains the table with the left navigation, another cell with a simple 2 cell table which will hold text, and a third cell with a complex table which displays mauve, lower navigation, and the partial URL. I colorize the cells to match my earlier plan.
| top table logo, photos strip and main navigation here |
||
| left table sub-navigation |
content table 2 columns of text |
right table mauve box, url, lower navigation |
My table is a little puny at this point. To hold the shape of my table I add spacer GIFs to each lower cell which hold open the cell to the appropriate width.
At this point you may be wondering how I calculate the size of the areas. The top table is the width of the logo (105) plus the width of the photo strip (535) for a total of 640. The left table is the width of the "apply online" button (105).
The content table is trickier since there are no images displaying in this cell. I can either calculate the size of the "right table" and then put whatever is left into the content table, or I can use the ImageReady code to give me a clue. At the top of most tables created by ImageReady is a row of spacer GIFS which determine the layout of the table. Here are the spacer GIF cells. Cells 2-6 make up the content area. (45 + 100 + 73 + 65 + 76 = 359)
< TR>
< TD>
< IMG SRC="images/spacer.gif" WIDTH=105 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=45 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=100 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=73 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=65 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=76 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=68 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1> < /TD>
< TD> < IMG SRC="images/spacer.gif" WIDTH=40 HEIGHT=1> < /TD>
< TD>
< IMG SRC="images/spacer.gif" WIDTH=45 HEIGHT=1> < /TD>
< TD> < /TD>
< /TR>
The right table size is determined by adding up cells 7-10 (68 + 23 + 40 + 45= 176)
The new and improved outer table
 spacer gif - width 640 added
top table |
||
|
spacer gif - width 105 added left table, sub-navigation |
spacer gif - width 359 added content table |
spacer gif - width 176 added
right table |
First I create the top table which holds my logo, photos and main navigation. On this lesson page the rollover code does not work. The top table is displayed here with a border.
 |
 |
|||||||
 |
 |
|||||||
 |
 |
 |
 |
 |
 |
|
 |
|
Now I assemble my left navigation table. Since I am one of those "dinosaur web developers" who understands HTML, I use BBEdit to create the tables, and make sure the rollover code from ImageReady is pasted into my page. Those of you who know DreamWeaver may find building both the table and rollovers in that program is easier.
Eventually I produce this "left" table (shown with and without borders) which holds the sub-navigation for the page.
|
|
The content table is very simple.
<table width=359 cellpadding=4 cellspacing=4>
<tr valign="top">
<td> first column of text goes here</td>
<td> second column of text goes over here</td>
</tr>
</table>
By adjusting the cellpadding and cellspacing I can control the placement of the text and the amount of room between the text columns. If these settings do not give you the look you want, try adding a third table cell and place a spacer GIF set to the width you need between columns of text.
Finally I have the right table.
| white text over mauve background |  |
||||||||||
|
spacer gif width 68 |
 |
 |
|||||||||
 |
|||||||||||
 |
|||||||||||
 |
|||||||||||
|
|
||
|
spacer gif width 68 |
|
|
|
|
|
|||
|
|
|||
|
|
|||
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |