About This Author :: Request Reprint :: Print Article :: Tell A Friend

Border Colors For Tables
By Amit Pujar
amitpujar@yahoo.com
Contact Amit Pujar
http://www.geocities.com/amitpujar

When creating tables in HTML, authors are often limited to creating tables without using the BORDERCOLOR attribute because most browsers do not support it. Only some (and recent) web browsers support the attribute BORDERCOLOR. In browsers that do not support this attribute, the table appears as a grayish line.

For browsers that do, a table with 3D borders is displayed. The attributes BORDERCOLORLIGHT and BORDERCOLORDARK further add to the color of the border. Some browsers, though, do not support these attributes. Some HTML authors use an image to achieve the effect of colored borders to the table.

You can also create tables with colored borders using CSS (Cascading Style Sheets). But not all browsers support the TABLE-BORDER property.

You can overcome this problem by using the BGCOLOR and CELLSPACING attributes to achieve tables with colored borders. You can use the hexadecimal color code for borders.

The BGCOLOR attribute specifies the background color when used with the TABLE element. The CELLSPACING attribute specifies the distance between two adjacent cells in the table.

Use the CELLSPACING attribute to specify the thickness of the table border. Use the BGCOLOR in the TABLE tag to specify the color of the border. Then specify the background color of the page in each row or cell.

For example, consider the following table:


   <TABLE CELLSPACING="1" BGCOLOR="#008800">
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^      - (1)
     <TR BGCOLOR="#ffffff">
         ^^^^^^^^^^^^^^^^                       - (2)
        <TD>Data</TD>
        <TD>Data</TD>
        <TD>Data</TD>
        <TD>Data</TD>
     </TR>
   </TABLE>


1. The TABLE element has the attribute and value BGCOLOR="#008800". When a browser interprets this line, it renders the table with #008800 (green) background color. CELLSPACING="1" separates each cell in the table by 1 pixel. The background color shows through this space.

2. The BGCOLOR="#ffffff" is used to give a background color (white) to the row. This attriute can be placed in the <TD> tag as well (<TD BGCOLOR="#ffffff">).

When the browser interprets and displays this code, a white (#ffffff) table with green (#008800) border is seen.

Examples
1. The following table has a red border color that is 1 pixel thick.


<table cellspacing="1" bgcolor="red">
  <tr bgcolor="#ffffff">
     <td>
     This is a single cell
     table whose borders are
     red in color and 1 pixel
     in thickness.
     </td>
  </tr>
</table>


2. The following table has a blue border color that is 2 pixels thick.


<table cellspacing="2" bgcolor="blue" width="250">
  <tr bgcolor="#ffffff">
     <td>
     This is a single cell table whose borders are
     blue in color and 2 pixels in thickness.
     </td>
  </tr>
</table>


3. The following table has a violet border color that is 3 pixels thick.


<table cellspacing="3" bgcolor="violet">
   <tr bgcolor="#ffffff">
      <td colspan="2">
      This is a table whose borders are violet
      in color and 3 pixel in thickness.
      </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td> Cell 1 </td>
      <td> Cell 2 </td>
   </tr>
</table>


4. The following table has a green border color that is 4 pixels thick.


<table cellspacing="4" cellpadding="5" bgcolor="green" width="250">
   <tr bgcolor="#ffffff">
      <td colspan="3">
      This is a table whose borders are
      green in color and 3 pixel in thickness.
      </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td> Cell 1 </td>
      <td> Cell 2 </td>
      <td> Cell 3 </td>
   </tr>
</table>


5. The following table has a #aa6600 border color that is 1 pixel thick.


<table cellspacing="1" cellpadding="5" bgcolor="#aa6600">
      <caption>Travel Expense Report</caption>
   <tr bgcolor="#ffffff">
      <th></th>
      <th>Meals</th>
      <th>Hotels</th>
      <th>Transport</th>
      <td>subtotals</td>
   </tr>
   <tr bgcolor="#ffffff">
      <th>San Jose</th>
      <th> </th>
      <th> </th>
      <th> </th>
      <td> </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>25-Aug-97</td>
      <td>37.74</td>
      <td>112.00</td>
      <td>45.00</td>
      <td></td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>26-Aug-97</td>
      <td>27.28</td>
      <td>112.00</td>
      <td>45.00</td>
      <td> </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>subtotals</td>
      <td>65.02</td>
      <td>224.00</td>
      <td>90.00</td>
      <td>379.02</td>
   </tr>
   <tr bgcolor="#ffffff">
      <th>Seattle</th>
      <th> </th>
      <th> </th>
      <th> </th>
      <td> </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>27-Aug-97</td>
      <td>96.25</td>
      <td>109.00</td>
      <td>36.00</td>
      <td> </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>28-Aug-97</td>
      <td>35.00</td>
      <td>109.00</td>
      <td>36.00</td>
      <td> </td>
   </tr>
   <tr bgcolor="#ffffff">
      <td>subtotals</td>
      <td>131.25</td>
      <td>218.00</td>
      <td>72.00</td>
      <td>421.25</td>
   </tr>
   <tr bgcolor="#ffffff">
      <th>Totals</th>
      <td>196.27</td>
      <td>442.00</td>
      <td>162.00</td>
      <td>800.27</td>
   </tr>
</table>


Using this method, you can create colored tables for any browser that support tables without having to use the BORDERCOLOR attribute. You do not have to use CSS either to create tables with colored borders.

Discuss this in our Webmaster Forums

About This Author :: Request Reprint :: Print Article :: Tell A Friend