Working with Table and Cell Border Colors

As you learned previously, a border is a visible line around the perimeter of a table and around each of the cells within the table. Table and cell borders have two attributes you can set—width (which you worked with in the preceding Tip) and color. To adjust the colors of cell and table borders, insert a bordercolor attribute in the table’s <table> tag. For example, to have the Web browser draw a 10-pixel- wide navy (dark) blue border around the table and a one-pixel-wide navy (dark) blue border around each of its cells, set the bordercolor attribute in the table’s <table> tag as follows:

<table bordercolor="#00008B">

Unfortunately, the bordercolor attribute’s setting does not have the same effect in all Web browsers. Setting the bordercolor attribute to “#00008B”, for example, will cause Netscape Navigator to draw the table and cell borders using two colors—two sides light blue and two sides dark blue. Internet Explorer, meanwhile, supports two additional attributes to control border colors: bordercolorlight and bordercolordark. If you specify only a bordercolor setting, Internet Explorer will draw the table and cell borders using a single color—navy (dark) blue, in the current example.

If you want Internet Explorer to use two different colors for a table’s borders, you must either omit the bordercolor attribute from the <table> tag (so the Web browser will use the default light-gray/dark-gray borders), or specify bordercolorlight and bordercolordark settings in the <table> tag. For example, Internet Explorer will ignore the bordercolor setting in the following <table> tag and use the values assigned to the bordercolorlight and bordercolordark attributes to draw the top and left sides of the table’s border using blue and the bottom and right sides of the table’s border using navy (dark) blue:

<table border="10" bordercolor="#00008B" bordercolorlight="#0000FF" bordercolordark=" #00008B">

The bordercolorlight and bordercolordark attribute settings in the preceding code also tell Internet Explorer to draw the top and left sides of the border around each cell using navy (dark) blue and the bottom and right sides of the border in blue.

By including both bordercolor and bordercolorlight/bordercolordark attributes in the <table> tag, you can display two-color borders in both Internet Explorer and Netscape Navigator. Internet Explorer will ignore the bordercolor attribute setting, and will use the bordercolorlight and bordercolordark settings. Netscape Navigator, meanwhile, will ignore the bordercolorlight and bordercolordark attributes and use the bordercolor attribute to set the table and cell border colors.

If your site’s visitors use Internet Explorer version 5 and later or Netscape Navigator version 6.1 and later, you can use the style attribute to specify the color of each side of a table and its cells independently. For example, use a style attribute in the <table> tag as shown here to color the top and left sides of a table dark blue while coloring the bottom and right sides of the table light blue:

<table border="10" style="border-top-color:#0000FF;

border-left-color:#0000FF; border-bottom-color:#00008B;

border-right-color:#00008B">

Although the style attribute in this example sets the top and left sides to one color and the bottom and right sides of the table to another color, you can set each of the four border-color properties within the style attribute to different colors. To set all four sides of the table to the same color, set the border-color property to the color you want as follows:

<table border="10" style="border-color:#006400">

Just as you insert a style attribute in the <table> tag to work with the colors of a table’s sides, you insert a style within a <td> tag to exert the same control over the colors used for the sides of a cell. For example, to color the sides of a cell red, blue, green, and magenta, you might use the setting for the style attribute in a <td> tag:

<td style="border-left-color:#FF0000; border-top-color:#0000FF;

border-right-color:#008000; border-bottom-color:#FF00FF">

Similarly, to set all four sides of a cell to the same color, such as red for example, use the border-color property as follows:

<td style="border-color:#FF0000">

Bear in mind that using the border-color property to set all four sides of a table or all four sides of a cell to the same color actually gets you two colors. For table borders, both Internet Explorer and Netscape Navigator set the top and left sides of the table to the color you specify and the bottom and right sides of the table to a darker version of the same color. Similarly, when you use border-color to set the sides of a cell to a single color, both browsers display the bottom and right sides of the cell to the color you specify and the top and left sides of the cell to a darker version of the same color.

Copyright © 2013 Webhostingart.com. All rights reserved unless otherwise stated.