NESTED TABLES

TRIPLE BORDER BACKGROUND LAYOUT

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, to achieve a bordered look like on this page you just keep putting a table inside a <td> tag, but do not close any of your tags until after your last nested table. Then close everyone you opened. 

So lets try it!!

 First we will add an outer table. Then we'll add our <tr><td> tag.  Then inside the <td> tag instead of adding data we will add another table. And inside that table we'll add two tables.The last one will hold our data.
 
Note:   To add more borders just repeat the inside table codes.   

If you are a newbie you may not know what an invisible.gif is. I call mine vspacer.gif. It is like it says, a spacer and it's invisible. If you don't have one as yet, download it here invisible image and use it to add a space. This little gif can be sized to whatever you need. You will notice here that I have included a vspacer  on my layout.  Please do experiment with it.  Change the sizes to suit your page.  If you feel you don't need it, just remove it.

Click here to see the results.See results
 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
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 Triple Border table</title>
</head>

<body text="#ceac62" bgcolor="#003300">
<img height=50 src="vspacer.gif" width=1 border=0>

<table border="2" align="center" bordercolor="#ceac62" bgcolor="#33ff00" cellpadding=20 cellspacing=0 width="85%">
<tr>
<td><table border="2" align="center" bordercolor="#ceac62" bgcolor="#003300" cellpadding=20 cellspacing=0 width="100%">
<tr>
<td><table border="2" align="center" bordercolor="#ceac62" bgcolor="#000000" cellpadding=30 cellspacing=0 width="100%">
<tr>
<td>
<table width="80%" align="center">
<tr>
<td>

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

</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>

</body>
</html>

Background  and tutorial was created and is the property of Dorothy Rheaume.  All rights reserved.