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.)

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="1" bordercolor="#CBD3E1" bgcolor="#F1F4F5"
BORDERCOLORLIGHT=YELLOW BORDERCOLORDARK=BLUE>
<TR> <TD>bordercolor</TD> <TD>bordercolorlight</TD> </TR>
<TR> <TD>bordercolordark</TD> <TD>bordercolor</TD> </TR>
</TABLE>

which gives us this table:

bordercolor	bordercolorlight
bordercolordark	bordercolor

Table Borders: All Three Border Color Attributes At Once >>>