Chapter 10, Lesson 11
Chapter 10, Lesson 11![[INDEX]](icon_bki.gif){kind=icon}
Ch
10,
L
11 -
Border Colors for Tables
If you already know how to specify the background color for an HTML table, you can skip this lesson.
In the last lesson, we saw that we could specify the background color for a table. In observing the examples, you may have noticed that while the background changed color, the borders remained gray-ish. Advanced browsers give us more attributes for use with the 'TABLE' tag, which let us specify the color used in displaying the tables's borders. To specify the 'BORDERCOLOR', use the following format:
<TABLE BORDER=number-pixels BORDERCOLOR="#RGB-code">
or
<TABLE BORDER=number-pixels BORDERCOLOR="color-name">
Most advanced browsers paint the table's border with two colors (usually light gray and dark gray, by default), thus giving it that "3-D" (picture frame) effect. If we use the above 'BORDERCOLOR' attribute by itself, we'll get a solid color border, with no 3-D effect. Some advanced browsers (notably, MS Internet Explorer) give us two more attributes, 'BORDERCOLORLIGHT' and 'BORDERCOLORDARK' for specifying the lightest color and the darkest color for the 3-D type border. Normally, at least for 3-D borders, you'll be specifying both attributes in the 'TABLE' tag, plus the 'BORDER' attribute itself (to turn it on). Therefore, we can offer the following format for building 3-D borders:
<TABLE BORDER=number-pixels BORDERCOLORLIGHT="#RGB-code" BORDERCOLORDARK="#RGB-code">
or
<TABLE BORDER=number-pixels BORDERCOLORLIGHT="color-name" BORDERCOLORDARK="color-name">
Of course, you can specify any color for these attributes, including the same color for both of them, or a dark color for the 'BORDERCOLORLIGHT' attribute, etc. As we've discussed before, it's wise to thoroughly test the web page on at least two popular browsers, so that you'll catch any potential display problems, or disappearing fonts or colors.
Here are some examples:
<TABLE BORDERCOLOR="RED" BORDER=5 WIDTH=40%>
<TR>
<TH COLSPAN=2>famous last words</TH></TR>
<TR ALIGN="CENTER">
<TD>eenie</TD>
<TD>meenie</TD></TR>
<TR ALIGN="CENTER">
<TD>miney</TD>
<TD>moe</TD></TR>
</TABLE>
<P>
<TABLE BORDERCOLORLIGHT="LIME" BORDERCOLORDARK="GREEN" BORDER=5 WIDTH=40%>
<TR>
<TH COLSPAN=2>famous last words</TH></TR>
<TR ALIGN="CENTER">
<TD>eenie</TD>
<TD>meenie</TD></TR>
<TR ALIGN="CENTER">
<TD>miney</TD>
<TD>moe</TD></TR>
</TABLE>
<P>
<TABLE BORDERCOLORLIGHT="GREEN" BORDERCOLORDARK="LIME" BORDER=5 WIDTH=40%>
<TR>
<TH COLSPAN=2>famous last words</TH></TR>
<TR ALIGN="CENTER">
<TD>eenie</TD>
<TD>meenie</TD></TR>
<TR ALIGN="CENTER">
<TD>miney</TD>
<TD>moe</TD></TR>
</TABLE>
| famous last words | |
|---|---|
| eenie | meenie |
| miney | moe |
| famous last words | |
|---|---|
| eenie | meenie |
| miney | moe |
| famous last words | |
|---|---|
| eenie | meenie |
| miney | moe |
In the first table, we specified a 'BORDER' and a red 'BORDERCOLOR' (but not 3-D attributes), and we got a table with a red border, sans the 3-D effects.
In the second table, we specified a light color (lime) for 'BORDERCOLORLIGHT' and a dark color (green) for 'BORDERCOLORDARK'. The browser used those colors to paint a 3-D border for us. Notice that we didn't specify the 'BORDERCOLOR' attribute at all; it's not required if you specify 'BORDERCOLORLIGHT' and 'BORDERCOLORDARK'.
In the second table, we specified a dark color for 'BORDERCOLORLIGHT' and a light color for 'BORDERCOLORDARK'. The browser just blindly follows whatever choice we make, so it's up to us to choose the colors wisely.
Keep in mind that not all advanced browsers support border color attributes. Those that do not will ignore them, and build the border out of grays by default.
... leave e-mail ...
