Background and Border Color

<table


border="number in pixels"

bordercolor="color"

bordercolorlight="color"

bordercolordark="color"

bgcolor="color">

...</table>

Width of table border
Table border color
Top/left side border color
Bottom/right side border color
Background color

You are not obliged to settle for the default color used by web browsers to draw the borders of your HTML tables. Using various attributes in the <table> tag, you can specify your table's border color and even create a simple 3D effect. You can also define your table's background color. These attributes are detailed below:

border="width in pixels" ~ To recap from the previous page, you can use the border attribute to specify the width of your table's border in pixels. The number of pixels desired for the width is used as the value.
bordercolor="color definition*" ~ The bordercolor attribute can be used to define the color of your table's border. You may use any legal color definition as the value. The final effect on your web page will vary from browser to browser. Internet Explorer will use your selected color to display one solid colored frame around your table. Gecko-based browsers, such as Netscape Navigator or Mozilla, will create a 3D lighting effect using a light version of your color on the top and left sides and a dark version of your color on the bottom and right sides.
bordercolorlight="color definition*" ~ The bordercolorlight attribute can be used to define the border color on the top and left sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify light colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since the bordercolor attribute already accomodates the resulting effect.)
bordercolordark="color definition*" ~ The bordercolordark attribute can be used to define the border color on the bottom and right sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify dark colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since the bordercolor attribute already accomodates the resulting effect.)
bgcolor="color definition*" ~ Using the bgcolor attribute, you can specify the background color of your table which includes the background in between table cells and background inside table cells. You may use any legal color definition as the value.

A background color may also be applied to an individual table data cell by using the bgcolor attribute in the <td> tag. The selected background color will thus only apply to that particular cell.

*(Please see Font Color for a description of all legal color definitions.)

Example 1 - SOURCE CODE

<table border="5" bordercolor="maroon" bgcolor="silver">

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

</table>

Example 1 - RESULT

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

Example 2 - SOURCE CODE

<table border="5" bordercolor="#8080cc" bordercolorlight="#8080c0" bordercolordark="#400080" bgcolor="#ffffcc">

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

</table>

Example 2 - RESULT

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

You don't have to define all four sides of your table's border (also known as the 'frame') nor are you obliged to define all the lines that separate rows and columns (known as 'rules') inside your table. Various attributes can be used to force web browsers to display your table's frame and rules exactly as you please...

<~BACK

TOP

NEXT~>