Home
Recipes
Graphics
Tips & Tricks
Christmas
Treats
About me
Links
Venice,Florida
Help Page
email me


LEFT BORDER BACKGROUND LAYOUT

Nested Tables

What are Nested tables? Simply put they are tables placed inside a <td> tag. This is used frequently when designing webpages to allow the content of the inner table to be unaffected by the outer table. For example, if you wanted to include a navigation bar on the left side of your page, you could include it in a inner table and make another inner table for your text, etc. There are many different ways to get the same results. This is how I do mine.

So lets try it!!

First we will add an outer table. And inside that table we'll add two tables, one to hold our navigational links, and one for our text, etc.

Click here to see the results.See results
Note:  
  1. Navigational table... <td width="20%">  replace the "20%" with the approximate width to accommodate your link text on one line.

  2. Include the attribute <valign="top"> this brings the image/text to the top of the area.

  3. In my layout I also use an invisible image to help in the layout of my page. Download it here invisible image/right click and save and use it to add a space. This little gif can be placed anywhere you want to leave a space and you can size it to whatever you need. Please do experiment with it.

  4. The link default colors for visited and unvisited are bright blue and red. You can use them if you like.  But if you want to change the color, size, etc. like I did, just copy and paste what is in red into your document, placing it just below your head tag. Make changes to color, size, etc. to suit your page.

    5.   Include the style type shown below in red in your document. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE TYPE="text/css">

body {margin:0px; background-repeat: repeat-y;
}
a:link {text-decoration:none; font-family:verdana,arial,sans-serif,serif; font-weight:normal; font-size: 12px; color:#ffffcc;}
a:visited {text-decoration:none; font-weight:normal; color:Red}
a:hover { text-decoration: underline; color:#ffffcc;}
</STYLE>

<TITLE>Sample Left navigational table</TITLE>
</HEAD>

<BODY text="#ceac62" bgcolor="#003300">
<P>&nbsp;</P>

<TABLE BORDER="0" bgcolor="#00ff00" WIDTH="100%">
<TR>
<TD valign="top" align="center" width="20%">
<BR>

<table border="2" align="center" bordercolor="#ceac62" bgcolor="#000000" cellpadding=8 cellspacing=3 width="95%">
<tr><td align="center"><A href="add your url">Home</A></td></tr>
<tr><td align="center"><A href="add your url">Recipes </A></td></tr>
<tr><td align="center"><A href="add your url">Gallery</A></td></tr>
<tr><td align="center"><A href="add your url">My Groups</A></td></tr>
<tr><td align="center"><A href="add your url">Awards</A></td></tr>
<tr><td align="center"><A href="add your address">Email Me</A></td></tr>

</table>
</td>

<TD valign=top align="center">

<TABLE borderColor="#ceac62" cellPadding="14" cellspacing="4" width="90%" bgcolor="#000000" border="3">
<TR>
<TD>

<p align="center"><IMG height=50 src="vspacer.gif" width=1 border=0></p>
 <p> Text area

</TD></TR></TABLE>
</TD></TR></TABLE>


</BODY>
</HTML>

Tutorial was created by Dot Rheaume and is the property of Dotty's Diner.  All rights reserved.