<<< Home << Web < HTML Notes Top Bottom < Prev Next >

Borders and Rules for Tables

Topics on this page:

  1. The border attribute
  2. The bordercolor attributes
  3. Netscape 3 borders

Top border bordercolor Netscape 3 Bottom

The border attribute

The border attribute specifies the size of the border that goes around the table. If a non-zero border is specified, there will also be "rules" drawn between the cells. Here is an example: 

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

The following snapshots show this table displayed with border="0", border="3" and border="9". On the left is Netscape 4.5. On the right is IE 3.

Netscape 4.5 and IE 3 borders

border controls the size of the border around the whole table - but does not affect the size of the rules drawn between the cells.

The browser uses two colors in the frame to give a sort-of 3D look to the border.

This example used cellspacing="0". Adding some space between the cells changes the look a bit. Here's the same example but with cellspacing="5":

Netscape 4.5 and IE 3 cellspacing

Top border bordercolor Netscape 3 Bottom

The bordercolor Attributes

Netscape 4+ and IE 3+ recognize an attribute called bordercolor. Here's the same table with bordercolor="#ff0000" added:

Bordercolor example

Netscape made two shades of color and kept the 3D look, but IE just made a solid border in the requested color.

Netscape did not color the internal rules. IE did.

IE recognizes two additional attributes: bordercolorlight and bordercolordark. If both of these are included, IE ignores bordercolor. So you can include bordercolor for Netscape's benefit and the other two for IE's benefit. 

<table border="0" cellpadding="5" cellspacing="5"
       bordercolor="#ff0000"
       bordercolorlight="#0000ff"
       bordercolordark="#000077">
  <tr>
    <td> Cell 1 </td>
    <td> Cell 2 </td>
  </tr>
  <tr>
    <td> Cell 3 </td>
    <td> Cell 4 </td>
  </tr>
</table>

bordercolordark/bordercolorlight

Netscape uses the bordercolor (red).

IE uses the bordercolordark and bordercolorlight (two shades of blue).


Top border bordercolor Netscape 3 Bottom

Netscape 3 borders

Although Netscape 3 does not support the border color attributes, it does base the color of the border on the page's background color. So if you're using a background image on the page, you can play with the bgcolor attribute in the <body> tag to get the border the color you like.

Warning: some users surf with images turned off - so make sure that your page is still readable if the background image doesn't appear.


<<< Home << Web < HTML Notes Top Bottom < Prev Next >