Table Borders: Light and Dark

In the previous example we set a single color for all the borders of the table. In this page we'll look at setting the "light" and the "dark" borders separately. Note that currently only MSIE recognizes the markup necessary to set the light and dark borders separately. (See Table Borders: All Three Border Color Attributes At Once about putting all three attributes in the tag.)

demonstrates the BORDERCOLORLIGHT and BORDERCOLORDARK attributes Visual web browsers such as Netscape and MSIE render table borders with a three-dimensional appearance. They do this by making the top and left borders lighter than the bottom right borders, This makes the table look like it is partly under a light source with and partly in shadow. If you visualize a light source above and to the left of the table it's easier to remember which borders are light and which are dark.

We set the light and dark borders with BORDERCOLORLIGHT and BORDERCOLORDARK. So, for example, this code sets the light borders to yellow and the dark to blue:

<TABLE BORDER=10 BORDERCOLORLIGHT=YELLOW BORDERCOLORDARK=BLUE>
<TR> <TD>blah blah blah</TD>     <TD>yeah yeah yeah</TD> </TR>
<TR> <TD>whatever whatever</TD>  <TD>right on!</TD> </TR>
</TABLE>

which gives us this table:

blah blah blah yeah yeah yeah

whatever whatever right on!

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License . Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.