Explanation of building nested table page layouts
This page will walk you through building a nested table page layout step by step. We will try to briefly explain the things we are doing and why to help you understand how this works.
Place your code or information here
to keep the surrounding theme around your page.
|
This is just a simple page specifying a background and centering banner image on the page.
Needed Code
<body background="YourDIR/codeback.jpg">
<center><img src="YourDIR/code.jpg"></center>
<br>
Place your code or information here
to keep the surrounding theme around your page.
</body>
Place your code or information here
to keep the surrounding theme around your page.
|
|
We decided we wanted a darker border surrounding the page, so we added our first table.
Note: The div statement has been added so the page will be centered.
Needed Code
<body background="YourDIR/blue015.jpg">
<div align="center">
<table border="0" cellpadding="7" cellspacing="0" width="95%"
background="YourDIR/codeback.jpg">
<tr><td width="100%">
<center><img src="YourDIR/code.jpg"></center>
<br>
Place your code or information here
to keep the surrounding theme around your page.
</td></tr></table>
</div>
</body>
Place your code or information here
to keep the surrounding theme around your page.
|
|
|
Still not happy we added another table before the dark background so we will have a slight frame around the page.
Needed Code
<body background="YourDIR/codeback.jpg">
<div align="center">
<table border="0" cellpadding="5" cellspacing="0" width="95%"
background="YourDIR/blue015.jpg">
<tr><td width="100%">
<table border="0" cellpadding="7" cellspacing="0" width="100%"
background="YourDIR/codeback.jpg">
<tr><td width="100%">
<center><img src="YourDIR/code.jpg"></center>
<br>
Place your code or information here
to keep the surrounding theme around your page.
</td></tr></table>
</td></tr></table>
</div>
</body>
Place your code or information here
to keep the surrounding theme around your page.
|
|
|
In this sample we increased the cellpadding value to make the frame wider.
We also added a table around the banner image to offset it a little bit. Pay close attention to the changes in the code to do this.
Needed Code
<body background="YourDIR/codeback.jpg">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="95%"
background="YourDIR/blue015.jpg">
<tr><td width="100%">
<table border="0" cellpadding="7" cellspacing="0" width="100%"
background="YourDIR/codeback.jpg">
<tr><td width="100%">
<center>
<table border="0" cellpadding="5" cellspacing="0" width="5px"
background="YourDIR/blue015.jpg">
<tr><td width="100%"><img src="YourDIR/code.jpg">
</td></tr></table></center>
<br />
Place your code or information here
to keep the surrounding theme around your page.
</td></tr></table>
</td></tr></table>
</div>
</body>
Place your code or information here
to keep the surrounding theme around your page.
|
|
|
We changed the table border around the frame to a width of 2, to see if it would hilight the frame enough, but we didn't care for it, so we removed it in the next sample.
Needed Code
<body background="YourDIR/codeback.jpg">
<div align="center">
<table border="2" cellpadding="10" cellspacing="0" width="95%"
background="YourDIR/blue015.jpg">
<tr><td width="100%">
<table border="2" cellpadding="7" cellspacing="0" width="100%"
background="YourDIR/codeback.jpg">
<tr><td width="100%">
<center>
<table border="0" cellpadding="5" cellspacing="0" width="5px"
background="YourDIR/blue015.jpg">
<tr><td width="100%"><img src="YourDIR/code.jpg">
</td></tr></table></center>
<br />
Place your code or information here
to keep the surrounding theme around your page.
</td></tr></table>
</td></tr></table>
</div>
</body>
Place your code or information here
to keep the surrounding theme around your page.
|
|
|
|
|
We added a darker graphic to hilight the page for this one.
And changed the banner image graphic to the darker one.
You will notice that we added 2 new tables to this layout to frame out the darker blue.
Needed Code
<body background="YourDIR/codeback.jpg">
<div align="center">
<table border="0" cellpadding="5" cellspacing="0" width="95%"
background="YourDIR/back1a.jpg">
<tr><td width="100%">
<table border="0" cellpadding="10" cellspacing="0" width="100%"
background="YourDIR/blue015.jpg">
<tr><td width="100%">
<table border="0" cellpadding="5" cellspacing="0" width="100%"
background="YourDIR/back1a.jpg">
<tr><td width="100%">
<table border="0" cellpadding="7" cellspacing="0" width="100%"
background="YourDIR/codeback.jpg">
<tr><td width="100%">
<center>
<table border="0" cellpadding="5" cellspacing="0" width="5px"
background="YourDIR/back1a.jpg">
<tr><td width="100%"><img src="YourDIR/code.jpg">
</td></tr></table></center>
<br />
Place your code or information here
to keep the surrounding theme around your page.
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>
</body>
| 
