Q. How do I get a colored border around my table, but not each cell, that works across browsers?

A. To simulate a colored border around your table with cross-browser compatibility, you must insert a table within another table. This process is known as Nesting Tables.

Nesting Tables to Create Borders

Author: Jay A. Grantham
Author's Site: WebsiteIC.com

The Terminology

I will be using the word "edge"—referring to the line that goes around a table or content, the effect that is the goal of this tutorial. Although a "colored border" is what is ultimately produced, the word "border" is an attribute of a table, row or cell and I will be using that word as it is intended. It is important that you understand this to avoid confusion.

Now for a little bit about tables, there are a few attributes that you should know. I will briefly explain them here, then I'll go over the "edge".

cellspacing: the amount of space between each cell in a single table. cellpadding: the amount of space between the content and the inside cell wall. border: the outside edge of a table (<table>) AND each row (<tr>) or cell (<td>). The outside borders are "shaded" to give a beveled look and the inside (<tr>, <td>) borders are "flat". The color (if not specified) that is used for the border is a default system color. bordercolor: the outside edge of a table OR a cell. If the bordercolor attribute is specified only for <table> then in IE it will be applied to <td> also. IE will let you give the bordercolor attribute (separately) to <table>, <tr> and <td>, but NN will ignore the <tr> and <td> bordercolor and use the default. The bordercolor will also be shaded in NN to give a bevel effect. nested table: a table that is inside a cell.

To set table and cell color attributes in Dreamweaver use the Properties Panel (Windows> Properties), make sure the panel is expanded (small arrow in bottom right corner). For <table> attributes the Properties Panel uses Bg Color and Brdr Color for background color and border color, respectively. The <tr> and <td> attributes are referred to in the Properties Panel as Bg for background color and Brdr for border color.

Tip: When working with nested tables it is helpful to use the Tag Selector (bottom part of document window) to see where you are in the hierarchy when changing table attributes.

The bold selector is the "active" tag and in this case is a nested table.

The Steps

1. Create a table using one of the following methods:

• Insert» Table (screenshot)
• Click the Insert Table Icon on the Object Panel
• Windows ctrl+alt+t or Macintosh cmd+opt+t

Row = 1
Column = 1

Cell Padding = set to the width of the edge you want. For this demo we'll use 5.
Cell Spacing = 0

Width = set to the (total) size of your table in percentage or pixels. For this demo we'll use 400 pixels.

Border = 0

In the Property Inspector (Window» Properties) set the Bg Color (background color) to the "edge" color of your choice. For this demo we'll use #000066.

The table will look like this when previewed in the browser:

This is the code used to make the above table:

<table width="400" border="0" cellspacing="0" 
			cellpadding="2" bgcolor="#000066">
 <tr> 
 <td>&nbsp;</td>
 </tr>
 </table>

2. Place your cursor inside the single cell of the table that has just been created.

Tip: Use the Tag Selector in the lower left of the document window to select the table cell tag (<td>). Then place your cursor inside the cell.

Or in Code View:

<table width="400" border="0" cellspacing="0" 
			cellpadding="2" bgcolor="#000066">
 <tr> 
 <td>&nbsp;</td>  (Place 
			your cursor in place of the Non-Breaking 
			SPace and remove the &nbsp;)
</tr>
</table>

3. Create the nested table. Insert a table as you did the last time.

Row = X
Column = X
Cell Padding = X
Cell Spacing = 0
Width = 100%
Border = 0

X = value of your choice

You now have a Nested Table.

Set the background color(s) of the Nested Table from within the Property Inspector (Window» Properties) to your page color, or the color of your choice.

The Final Code

<table width="90%" border="0" 
			cellspacing="0" cellpadding="4" 
			bgcolor="#000066">
 <tr>
 <td>
 <table width="100%" border="0" 
			cellspacing="0" cellpadding="5" 
			bgcolor="#FFFFFF">
 <tr>
 <td>Table Content</td>
 </tr>
 </table>
 </td>
 </tr>
 </table> 

Any text this color (above) is a variable.

The Examples

See some examples here or download them here.

Available Extension(s)

1. Go to http://www.macromedia.com/exchange/dreamweaver/
2. Scroll down to "Find more extensions"
3. Choose Tables
4. From there you can download the "Nested Table Border Color Trick" by Eric Marden for a quick-n-easy way to add the effect.