DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: Jay's Firehouse


DreamweaverFAQ.com » Tutorials » Tables » Tutorial Listing


Nesting Tables to Create Borders

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 &quot;outside table has a border of &quot;4&quot;</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 &quot;2&quot; and
cellpadding set to &quot;5&quot;</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&quot;edge&quot;.</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 &quot;edge&quot;, but
the cellpadding is set to &quot;0&quot; (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 &quot;1&quot;</p>
<p>The cellpadding of the nested table is &quot;20&quot;</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&#153;</p>
<p>This DOES work cross-browser</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

::This page last modified 8/13/2013 at 04:37::

Copyright © 2001-2021 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice