Question about borders with CSS

[Enigmatic]

This is a difficult question to ask without being able to show an example, but I'll try with the following. I have a site where I use a lot of borders. For most sites, you just see a border that is solid, dotted, or has some sort of gap by using cellspacing. At any rate, I want a border with cellspacing, but I want the spacing inbetween to be colored (a different color). Is it possible to do this with CSS?

As of right now I am supplementing CSS and table borders with images to make the effect. But as you can imagine, this really slows down load times. Here is the coding I am using at the moment to create the effect I want. Sorry for the length...

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="PSD%20Files/Top-Left-Corner---One-Side.gif" width="6" height="6"></td>
<td class="TopBottomSides-OneSide"><img src="PSD%20Files/Top-Bottom-Sides---One-Side.gif" width="6" height="6"></td>
<td><img src="PSD%20Files/Top-Right-Corner---One-Side.gif" width="6" height="6"></td>
</tr>
<tr>
<td width="6" class="LeftRightSides"><img src="PSD%20Files/Left-Right-Sides.gif" width="6" height="10"></td>
<td align="center" valign="top" class="BlackBackground"><br>
<br></td>
<td width="6" class="LeftRightSides"><img src="PSD%20Files/Left-Right-Sides.gif" width="6" height="10"></td>
</tr>
<tr>
<td><img src="PSD%20Files/Bottom-Left-Corner.gif" width="6" height="6"></td>
<td class="TopBottomSides"><img src="PSD%20Files/Top-Bottom-Sides.gif" width="6" height="6"></td>
<td><img src="PSD%20Files/Bottom-Right-Corner.gif" width="6" height="6"></td>
</tr>
</table>

Also, I have a php script that I am using that has allowed me to do this, but it is not in css. This seems to be creating the effect I want, but I don't know how to take php coding and "turn it into" css coding. Here is the code for that:

/* Main Table Properties */
table.main { width: [%style.MAIN_WIDTH%]; }
table.main-border { background-color: [%style.MAIN_BORDER%]; }
tr.main-background { background-color: [%style.MAIN_BGCOLOR%]; }
table.row-border { background-color: [%style.MAIN_ROWBORDER%]; }

The tr.main-background command seems to fill in a different color inbetween the spaced border. Sorry if this is confusing, but again, seeing this might help you to understand my problem. If anyone needs to see what I'm talking about in order to help, please tell me where to e-mail you, since putting links to our web site is not allowed in this forum. Thanks,

Enigmatic

[Hester]

Let's break this down. What are we seeing below?

table.main { width: [%style.MAIN_WIDTH%]; }
table.main-border { background-color: [%style.MAIN_BORDER%]; }
tr.main-background { background-color: [%style.MAIN_BGCOLOR%]; }
table.row-border { background-color: [%style.MAIN_ROWBORDER%]; }

We're seeing PHP add colour values for table elements that are associated with classes. So now let's rewrite this in pure CSS, using specific colours:

table.main {width:100%;}
table.main-border {background-color:yellow;}
tr.main-background {background-color:green;}
table.row-border {background-color:red;}

What the code is saying is this:

1. Style tables with a class of "main" at 100%.
   
2. Style tables with a class of "main-border" with a yellow background.
   
3. Style rows (tr) with a class of "main-background" with a green background.
   
4. Style tables with a class of "row-border" with a red background.

See? So now all we have to do is add the classes used above into your HTML:

<table [b]class="main main-border"[/b] border="0" cellspacing="0" cellpadding="0">
<tr [b]class="main-background"[/b]>
<td><img src="PSD%20Files/Top-Left-Corner---One-Side.gif" width="6" height="6"></td>
<td class="TopBottomSides-OneSide"><img src="PSD%20Files/Top-Bottom-Sides---One-Side.gif" width="6" height="6"></td>
<td><img src="PSD%20Files/Top-Right-Corner---One-Side.gif" width="6" height="6"></td>
</tr>
<tr>
<td width="6" class="LeftRightSides"><img src="PSD%20Files/Left-Right-Sides.gif" width="6" height="10"></td>
<td align="center" valign="top" class="BlackBackground"><br>
<br></td>
<td width="6" class="LeftRightSides"><img src="PSD%20Files/Left-Right-Sides.gif" width="6" height="10"></td>
</tr>
<tr>
<td><img src="PSD%20Files/Bottom-Left-Corner.gif" width="6" height="6"></td>
<td class="TopBottomSides"><img src="PSD%20Files/Top-Bottom-Sides.gif" width="6" height="6"></td>
<td><img src="PSD%20Files/Bottom-Right-Corner.gif" width="6" height="6"></td>
</tr>
</table>

Note the table tag gets two classes, which would be better combined into one. I can't use the last class in our example as we need another table tag for that.

This should now give you a table of width 100% (from the class "main"), with a yellow background (from the class "main-border"). The first row should have a green background (from the class "main-background") and so on.

You might need to add more cellspacing to allow gaps for the colours to show.

Hope this all makes sense!