HTML Table Tutorials, Lesson 2e, Bordercolorlight and Bordercolordark

hitmill.com

HTML Table Tutorial Lesson 2e
BORDERCOLORLIGHT & BORDERCOLORDARK

ALIGN
BACKGROUND
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORLIGHT
BORDERCOLORDARK
CELLPADDING
CELLSPACING
COLS
COLSPAN
FRAME
HSPACE
ROWSPAN
VSPACE
WIDTH

Some versions of Netscape Navigator did not support BORDERCOLORLIGHT. This attribute is now supported in Internet Explorer 4.0 and newer Internet Explorer Browsers. When used in conjunction with BORDERCOLORDARK, a 3-dimensional effect is created for borders. I am deliberately using poor color choices to show you how ineffective that is. Coordinate your colors in a similar color scheme, if you can. Color charts are available for reference.

BORDER="6"
BGCOLOR="cornsilk"
BORDERCOLOR="purple"
BORDERCOLORLIGHT="pink"
BORDERCOLORDARK="orange"
You will want to coordinate
your colors better than this.

It is interesting that the coded bordercolor of "purple" did not appear when viewed with Internet Explorer 5.01. Only the bordercolorlight and bordercolordark are seen with IE4.x and IE5.0. (See examples below) In the IE browser, do not use the BORDER attribute or BORDERCOLOR if using BORDERCOLORLIGHT and BORDERCOLORDARK.

BORDERCOLORDARK

The "twin" attribute of BORDERCOLORLIGHT is BORDERCOLORDARK. If you use one attribute, use both to get a 3-D effect. I iterate that this is not supported in Netscape Navigator 4.x but is supported by Internet Explorer 4.x and newer. I will demonstrate a table having 2 rows and I will again code the attributes of BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, AND BORDERCOLOR DARK. Notice what happens this time to BORDERCOLOR="purple"...

BORDER="6" BGCOLOR="cornsilk" BORDERCOLOR="purple" BORDERCOLORLIGHT="pink" BORDERCOLORDARK="brown"
BGCOLOR="tan" Row 2 Column 1	BGCOLOR="tan" Row 2 Column 2

The BORDERCOLOR="purple" is still not seen in my IE 5.1 browser window. I made two of the cells above have a tan background to clearly demonstrate the cellspacing width, or the space between each cell. Cellspacing is also the space between the cell and an inner border. Let's see what would happen if we were to just code BORDERCOLOR and BORDERCOLORLIGHT.

Row 1 Column 1	Row 2 Column 2
BORDERCOLOR="blue"	BORDERCOLORLIGHT="lime"

I am using these hideous color combinations so that you can spot them easily when the inner borderlines are so fine as to make viewing difficult. Now let's try coding just BORDERCOLOR and BORDERCOLORDARK:

Row 1 Column 1	Row 2 Column 2
BORDERCOLOR="#FF00FF"	BORDERCOLORDARK="black"

Occasionally, if a browser will not properly display a color you desire, look up the "color-safe" hexidecimal value. When using the hexidecimal values with the color attributes remember to precede the value with the pound sign or octothrop (#) and enclose everything in double quotation marks: "#FF00FF"

Before moving on to the next attribute I would like to code just the BORDERCOLORLIGHT and BORDERCOLORDARK together without using BORDERCOLOR at all:

Row 1 Column 1	Row 2 Column 2
BORDERCOLORLIGHT="#FF00FF"	BORDERCOLORDARK="black"

This looks identical to the table above, even though different attributes were coded.

Design Tip:
Notice in the above tables that the darker color is on the bottom. When you want the darkercolor of the border to be on the top of the table, simply code the darker color into the bordercolorlight attribute and the lighter color into the bordercolordark attribute.

WARNING:
Remember that Web pages are viewed differently in various different browsers. Some text-only browsers will not see the tables at all. Each browser on each platform may view this page differently. Try your Web page in different browsers to see how it looks in other browsers.

Back | Next

Lesson #1 | Beginning of Lesson#2

HTML Table Tutorial Lesson 2e BORDERCOLORLIGHT & BORDERCOLORDARK

BORDERCOLORDARK

HTML Table Tutorial Lesson 2e
BORDERCOLORLIGHT & BORDERCOLORDARK