Borders, Frames and Rules

Topics on This Page

Borders, Frames and Rules
bordercolor
bordercolorlight and bordercolordark
frame
rules
Example

Borders, Frames and Rules

A table's border is drawn around the table as a whole. No border is shown when the border attribute is omitted or is specified as border="0". When talking about a table, the word frame is synonymous with border, and is not to be confused with the frames capability of HTML 4.0.

A table's rules are the lines drawn inside the table around individual cells. No rules are shown when the border is not shown. When a non-zero border attribute is specified, the rules are shown, but the thickness of the rule lines do not depend on the border attribute.

A rule is drawn as a rectangle around each cell. When the cellspacing value is non-zero, the cells are separated and these boxes can be seen around each cell. When cellspacing is zero, there is no space between the cells, so that the rules for adjacent cells touch each other.

bordercolor

The bordercolor is a proprietary attribute that can be used to color the table's border. This attribute is not an official attribute in the HTML standard, and you should expect to see an error message when you validate a page that uses it. bordercolor is supported by Netscape 4 and newer and by IE 3 and newer.

Here's an example of a table that specifies bordercolor:

<table border="5" bordercolor="red" cellpadding="5" cellspacing="3">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
    <td> Cell #4 </td>
  </tr>
</table>

Netscape draws a 2-color border around the table, giving a semi-three-dimensional look. The border is colored, but the rules are not colored.

IE draws a solid border around the table, and colors the rules as well as the border.

bordercolorlight and bordercolordark

bordercolorlight and bordercolordark are IE proprietary attributes that can be used to create a 2-color border similar to the border drawn by Netscape when you use bordercolor. These attributes are ignored by browsers other than IE, and IE ignores bordercolor when the other two are included. So you can include bordercolor for Netscape and also include bordercolorlight and bordercolordark for IE. You would ordinarily try to choose colors to make the tables appear similarly in the two browsers, but I'll illustrate this with a table that draws a red border for Netscape and a green border for IE:

<table border="5" bordercolor="red"
       bordercolorlight="#00ff00" bordercolordark="#009900"
       cellpadding="5" cellspacing="3">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
    <td> Cell #4 </td>
  </tr>
</table>

The appearance of the table has not changed in Netscape.

IE now shows a 2-color border. Notice that the rules are also 2-color, with the lighter and darker sides opposite those of the border.

frame

The frame attribute lets you draw only a portion of the border. It accepts these values:

void    No border
above   Draw only the top
below   Draw only the bottom
hsides  Draw only the top and bottom
lhs     Draw only the left side
rhs     Draw only the right side
vsides  Draw only the sides
box     Same as border
border  Draw the entire border
box     Same as border

   Default: border

Here's an example that uses frame="hsides" to include only the top and bottom of the border, eliminating the vertical sides.

<table border="5" frame="hsides"
       cellpadding="5" cellspacing="3">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
    <td> Cell #4 </td>
  </tr>
</table>

Netscape 6 supports frame. The rules are kept intact.

IE also supports frame. The outer vertical lines of the rules are also eliminated.

Netscape 4 does not support frame.

Changing to frame="void" gives this result in Netscape 6. The rules are kept intact.

Changing to frame="void" gives this result in IE. The outer edges of the rules are removed.

rules

While frame controls the table's border (and to some extent the rules in IE), rules controls how the rules are drawn. It accepts these values:

none    No rules
rows    Show horizontal rules only
cols    Show vertical rules only
groups  Show rules between groups only
all     Show all rules

   Default: all

Most of these are fairly obvious. groups draws rules only between row and column groups. As you may recall, you can divide rows into groups by using <thead>, <tfoot> and <tbody>, and you can divide columns into groups by using <colgroup>.

Here's an example of rules="groups":

<table border="5" rules="groups"
       cellpadding="5" cellspacing="0">
  <colgroup span="2">
    <col span="2">
  </colgroup>
  <colgroup>
    <col>
  </colgroup>
  <thead>
    <tr>
      <td> Head #1 </td>
      <td> Head #2 </td>
      <td> Head #3 </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td> Foot #1 </td>
      <td> Foot #2 </td>
      <td> Foot #3 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td> Body #1 </td>
      <td> Body #2 </td>
      <td> Body #3 </td>
    </tr>
    <tr>
      <td> Body #4 </td>
      <td> Body #5 </td>
      <td> Body #6 </td>
    </tr>
  </tbody>
</table>

This is the result in Netscape 6, which seems to recognize the row groups but not the column groups.
(Netscape 4 doesn't support rules.)

While IE gives this result.

Changing to cellspacing="0" gives this result in Netscape 6.

Changing to cellspacing="0" gives this result in IE.

Example

Here's a table that includes two column groups and five columns. CSS is used to set the attributes of the columns and groups.

If you have Netscape 4 (or another browser that doesn't recognize the column tags), notice that the table is formatted just as if you had omitted the <colgroup> and <col> tags.

If you have Netscape 6, notice that the background colors and text alignments are ignored.

The table as it appears in IE.

The table as it appears in Netscape 6.

The table as it appears in Netscape 4.