Campus Home Nested Tables - Templates Lesson
My campus site has navigation along the left side of the screen and lower navigation along the right. When content is added the table will split and distort.This is the sliced mock-up after saving it in ImageReady. As you can see the text which represents the content is not aligned along the top of the table cell as it should be. Also there isn't much text and it is not formatted correctly. We can begin to fix that, by adding the valign="top" attribute to the content cell.
Next I paste in several paragraphs of text, here is the site with many paragraphs.
Because I have so much text the table cells are stretching and the images at the left and right of the content are not displaying correctly. When viewed in Internet Explorer, the logo is way down near the bottom of the page. Netscape breaks this table even more, the gold navigation at the left is spread out. This is a real mess.
I need to create nested tables, or tables within tables. By creating an "outer table"
which will hold the page contents and inner tables within its individual cells I can prevent this spread.
Here is the plan for the outer table design of the outer table.
Now I create a table with the side navigation, it contains 2 columns and a row for each button and for the logo. I have left the border on so you can see the structure. outer table with borders.
Here is the outer table without a border
Now I create a separate table for the collage and lower navigation with a border. I need 3 columns and 5 rows. The first row which contains the collage spans 2 columns. To see the 2 columns look at the bottom of the table and you will see a row of spacer gifs which defines the 3 columns. Next the URL displays in the third column of the first row. An empty cell which spans 4 rows is the first item in the second row of the table. Then the lower button "search" which spans 2 columns. Each additional button is displayed in its own row, and all buttons span 2 columns.
You may be wondering why the row which contains the spacer gifs which define the columns are displayed on the bottom of this table, instead of at the top which is the traditional placement. Since the www of the url is partially displayed in top table and also in this inner table, a row of spacer gifs would cause the www to split with a single pixel spoiling the effect. Here is the table with the row of spacer gifs at the top. As you can see there is a problem.
table with a spacer gif that causes problems
Now I insert the left navigation into the left cell of the outer table.
outer table with left navigation
Not exactly what I want but it is a start. Next I paste the collage and lower navigation into the pink/purple cell.
outer table with left and lower navigation
The inner text is being squished, when the site is viewed in Netscape. To correct this I return to my original code and note that the text was set to be in a column with a spacer.gif which was set to 178 pixels. I copy and paste in code for this image < IMG SRC="images/spacer.gif" WIDTH=178 HEIGHT >
Now the page has room for the text. site with spacer gif which determines size of text cell.
I remove the background color from the left and right hand outer cells and remove the border.
final nested tables for campus home page.
This page required 3 tables:
After you do this a few times you begin to develop an eye for where to create the outer and inner tables. As a general rule, place elements which split apart into inner tables.