Join the List
Bravenet Home
|
Webmaster Tips and Tricks
Newsletter Archives
Multi-Colored Table Borders
December 20th, 2000
In a previous issue, we showed you how to create a border effect on your
tables by placing a table inside another, with the first table given a
cellpading of 1 pixel and a background color of black. This has the effect
of displaying a 1 pixel black border around the inner table. Here's an
example.
<table border="0" cellpadding=1 cellspacing=0 bgcolor="#000000">
<tr>
<td>
<table border="0" cellpadding=10 cellspacing=0
bgcolor="#FFFFFF">
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
An astute Bravenet member saw this trick, and showed us that by using layers
of outer tables, we can create multi-colored border layers for a cool effect
to our inner table. So, for a double-colored border, we use three tables,
two outer and the main inner table, and so on. Here's an example of a
triple-table that creates a dual-color border.
<table bgcolor="#000000" cellpadding="1" cellspacing="0" border="0">
<tr>
<td>
<table border="0" cellpadding="3" border="0" bgcolor="#FF8000">
<tr>
<td>
<table border="0" bgcolor="#ffffcc">
<tr>
<td>
Here is our Text!
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Try pasting this code into a page and see what happens. We have coded
the first border at 1 pixel and black for a nice crisp outer border. The
second border table creates an orange border of 3 pixels, while the main
table with content is yellow and we have padded that with a value of 10
pixels. Play with the variations of this process to get the effect you are
looking for. This works in both IE and Netscape and offers real control over
table displays without resorting to IE-specific tags of border colors.
Finally, a word on indentation -- you'll note that we have indented each
instance of the <TR> and <TD> tags. This is essential if you have other
people working on your pages, as non-indented table code is very hard to
examine and will waste time. In fact, get into this habit even if you
are the only person working on your code. You'll thank yourself when you
start using nested tables!
|
|
Build your very first live Database Driven Website using PHP & MySQL. Instantly apply working code examples from the book to your Website. Get it Now! 295 pages.
|
|
Write faster loading, dramatically smaller pages. ‘Now You Too Can Easily Create Modern 'Table-free' Websites Using CSS from scratch’. Get it Now! 480 pages.
|
|
 |
