What Does HTML Bordercolor Attribute Does To Your Tables? [Clue: Color!]

Attribute of

Create An HTML Table Quickly & Easily With Our Code Example

What does What Does HTML Bordercolor Attribute Does To Your Tables? [Clue: Color!] do?

Was used to specify the color of table borders. This attribute has been deprecated. Use CSS to style table borders.

The BORDERCOLOR Attribute

In this section we’ll look at setting the colors of table borders. First, we’ll look at setting the borders to a single color. Next, we’ll look at setting the light and dark shades of the border.

The color of the table borders as a whole is set with the BORDERCOLOR attribute of the <TABLE> tag. For example, this code sets the border to red:

<TABLE BORDER=10 BORDERCOLOR=RED>
  <TR>
    <TD>carrots</TD>
    <TD>garlic</TD>
  </TR>
  <TR>
    <TD>celery</TD>
    <TD>onions</TD>
  </TR>
</TABLE>

Here’s how it looks:

Netscape and MSIE have very different ways of rendering BORDERCOLOR. Netscape maintains the 3-D appearance. MSIE renders all borders as the same color, making the border appear flat. MSIE also sets the color of the inner borders.

Browser	How it Looks
Internet Explorer
Netscape

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.

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>

Here’s how that code renders in the browser, but note that this is an obsolete attribute and it may not render properly in modern browsers.

Using All Three BORDERCOLOR Attributes at Once

Netscape and MSIE both recognize BORDERCOLOR, but currently only MSIE recognizes BORDERCOLORLIGHT and BORDERCOLORDARK. However, you can use all three at once because MSIE ignores BORDERCOLOR if it finds BORDERCOLORLIGHT and BORDERCOLORDARK. You can use this feature to get a little more control over the border colors than if you use just one or two of those attributes.

For example, this code says that the overall border color is blue, but also specifies that the light portion is a light blue and the dark portion is regular blue:

<TABLE BORDER=10 BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK="#0000CC">
  <TR>
    <TD>blah blah blah</TD>
    <TD>yeah yeah yeah</TD>
  </TR>
  <TR>
    <TD>whatever whatever</TD>
    <TD>right on!</TD>
  </TR>
</TABLE>

Here’s how that code renders in the browser, but note that this is an obsolete attribute and it may not render properly in modern browsers.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.