Nesting Tables to Create Borders
Author: Jay
A. Grantham
Author's Site: WebsiteIC.com
The Examples
Download
these examples.
Example A:
Windows screenshot NS 4.75
| This is a nested table |
The "outside table" has a border of "4" |
| text |
This doesn't work because NN will shade the border
This does NOT work cross-browser
|
|
<table width="300" border="4" cellspacing="0"
cellpadding="0" bordercolor="#000066">
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="5">
<tr>
<td>This is a nested table</td>
<td>The
"outside table has a border of "4"</td>
</tr>
<tr>
<td>text</td>
<td>
<p>This doesn't work because NN will shade the border</p>
<p>This does NOT work cross-browser</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Example B:
Windows screenshot
NS 4.75
| This is a regular table with border set to "2" and
cellpadding set to "5" |
The border color is set to a shade of blue (#000066).. it
does accomplish a border around the whole table, but it also
puts a border around each cell.. and the border color is not
uniform between browsers. Notice the line between cells is
not the same thickness as the outside"edge".
This does NOT work cross-browser
|
<table width="300" border="2" cellspacing="0"
cellpadding="5" bordercolor="#000066">
<tr align="left" valign="top">
<td>This is a regular table with border set to "2" and
cellpadding set to "5"</td>
<td>
<p>The border color is set to a shade of blue (#000066).. it
does accomplish a border around the whole table, but it also
puts a border around each cell.. And the border color is not
uniform between browsers. Notice the line between cells is
not the same thickness as the ousted"edge".</p>
<p class="warn">This does NOT work cross-browser</p>
</td>
</tr>
</table>
Example C:
|
This is a nested table with the "edge", but
the cellpadding is set to "0" (on the nested
table). Notice how awkward the text looks right up against
the sides.
This DOES work cross-browser
|
|
<table width="300" border="0" cellspacing="0"
cellpadding="4" bgcolor="#000066" >
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<p>This is a nested
table with the "edge", but
the cellpadding is set to "0" (on the nested
table). Notice how awkward the text looks right up against
the sides.</p>
<p>This DOES work cross-browser</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Example D:
|
This table is nested inside THREE tables
to have a three color edge You can add as
many nested tables as you would like, but
Netscape doesn't like to go too deep.
This DOES work cross-browser
|
|
|
|
<table width="300" border="0" cellspacing="0"
cellpadding="3" bgcolor="#000066">
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="3" bgcolor="DEA315">
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="3" bgcolor="#8D0000">
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
<tr>
<td>
<p>This table is nested inside THREE tables
to have a three color edge You can add as
many nested tables as you would like, but
Netscape doesn't like to go too deep.</p>
<p class="tip">This DOES work cross-browser</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Example E:
|
The edge of this set of tables is "1"
The cellpadding of the nested table is "20"
The background of the nested table can be any color
you choose
I think this is great for extracted text, or a special
note.. almost looks like a PostIt™
This DOES work cross-browser
|
|
<table width="260" border="0" cellspacing="0"
cellpadding="1" bgcolor="black" >
<tr>
<td>
<table width="100%" border="0"
cellspacing="0" cellpadding="20" bgcolor="white">
<tr>
<td bgcolor="#FFFFCC" align="left" valign="top">
<p>The edge of this set of tables is "1"</p>
<p>The cellpadding of the nested table is "20"</p>
<p>The background of the nested table can be any color you choose</p>
<p>I think this is great for extracted text, or a special
note.. Almost looks like a PostIt™</p>
<p>This DOES work cross-browser</p>
</td>
</tr>
</table>
</td>
</tr>
</table> |
