HTML Table Tutorials, Lesson 2c: The BGCOLOR and BORDER Attributes of the Table Element

hitmill.com

HTML Table Tutorial Lesson 2c
BGCOLOR & BORDER Attributes
of the TABLE Element

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

BGCOLOR

BGCOLOR is a standard attribute specifying the background color of a table. The value may be a named color such as "white" or a color specifying a hexidecimal value in the format of RRGGBB. When using hexidecimal color values the octothorp (pound sign) and the value are enclosed in quotes, for example "#3152A5". If you omit the octothorp or one of the quotation marks you will see very strange results. You may refer to the hexidecimal color reference to find hexidecimal color values. When using a named color for a value the colorname is enclosed in quotes. Do not use spaces in the colorname.

The <TABLE> element is not the only element of a table which uses BGCOLOR. The table row element <TR>, the table heading element <TH>, and the table data element <TD> all use BGCOLOR. If each of the table elements were each coded with a different color all at the same time the row element would take precedence over the table element background color and the table cell elements (<TH> and <TD>) would take precedence over the coding of the table row background color.

The following table demonstrates the use of BGCOLOR.

yellow <TH> BGCOLOR	cornsilk <TR> BGCOLOR	cornsilk <TR> BGCOLOR
red <TD> BGCOLOR	Tan <TABLE> BGCOLOR	aliceblue <TD> BGCOLOR

Here is the code:

<TABLE WIDTH="345" BORDER="3" BGCOLOR="white"
CELLSPACING="2" CELLPADDING="5">
  <TR BGCOLOR="cornsilk">
    <TH BGCOLOR="yellow">
     yellow <TH> BGCOLOR</TH>
    <TH>cornsilk <TR> BGCOLOR</TH>
    <TH>cornsilk <TR> BGCOLOR</TH>
  </TR>
  <TR>
    <TD BGCOLOR="red">red <TD> BGCOLOR</TD>
    <TD>Tan <TABLE> BGCOLOR</TD>
    <TD BGCOLOR="aliceblue">aliceblue <TD> BGCOLOR</TD>
  </TR>
</TABLE>

Note:
The BGCOLOR <TABLE> attribute is deprecated by the HTML 4 specification, to be supplanted by the background-color attribute of a style sheet.

Back | Top | Beginning of lesson #2
Table Tutorials

BORDER

BORDER is an attribute of the table element which specifies how wide a table border shall be. BORDER="0" specifies no border at all. The default value for the BORDER attribute is 1, so if you code BORDER and do not specify a value, the border will be one pixel wide.

When I used MSIE 5.0.x, and made the first table below, I did not even specify a BORDER when I made the table. As you can see, Internet Explorer 5 will omit a border if BORDER is not mentioned when coding the table element. It is better, however, to go ahead and code BORDER="0" for those who have not yet downloaded one of the new free browsers. (The links to these free download sites are back at the bottom of the previous lesson.)

This is a sample table with border not mentioned

This is a table with BORDER specified but no value is given for the attribute. BORDERCOLORLIGHT has a value and BORDERCOLORDARK was also given a value. When no value is given for the BORDER attribute, the default is 1 for the outer border. Set CELLSPACING="0" when you do not want that inner border line. This time I set the CELLSPACING="20",
CELLPADDING="10".

The outer border is two pixels wide. Set CELLSPACING="0" when you do not want any inner borderline.

BORDER="5"
The outer border is five pixels wide. The inner border appears because CELLSPACING="2" (two pixels of space between cells).

You will have to play with the BORDER values yourself to find the border width you like best for each individual table project. Once you have made a few tables you will find that you will start having favorite values for table attributes.

You may also read about a related attribute: FRAME. The FRAME attribute of the TABLE element allows you to make tables with partial borders.

Next | Lesson #1 | Beginning of Lesson#2

HTML Table Tutorial Lesson 2cBGCOLOR & BORDER Attributes of the TABLE Element

BGCOLOR

BORDER

HTML Table Tutorial Lesson 2c
BGCOLOR & BORDER Attributes
of the TABLE Element