7 : Colors In Tables

• bgcolor is a <table> tag attribute.
• bg stands for Back-Ground:
  In Netscape Navigator this color is only applied to the "cells";
  in Internet Explorer the color is applied to both the cell spacing/cell walls and the "cells".
  

Table 12 1A 1B 1C 1D 2A 2B 2C 2D

Table 12 Code <table border=5 bgcolor=BLUE> <caption>Table 12</caption> <tr> <th>1A</th><th>1B</th><th>1C</th><th>1D</th> </tr> <tr> <th>2A</th><td>2B</td><td>2C</td><td>2D</td> </tr> </table>

This next table shows how to apply color to a single row, and how to use a background image in a table.

Table 13 1A 1B 1C 1D 2A 2B 2C 2D

Table 13 Code <table border=5 bgcolor=black background="images/green.gif" width="92%" cellpadding=8> <caption>Table 13</caption> <tr bgcolor=blue> <th><font color=pink>1A</font></th> <th><font color=pink>1B</font></th> <th><font color=pink>1C</font></th> <th><font color=pink>1D</font></th> </tr> <tr> <th><font color=pink>2A</font></th> <th><font color=pink>2B</font></th> <th><font color=pink>2C</font></th> <th><font color=pink>2D</font></th> </tr> </table>

• In Table 13 the background of green & black lines is an image called "green.gif," loaded using the background attribute in the <table> tag.
• The bgcolor attribute is used in the <table> tag in case the image link is not working or in case the viewer has turned off the image-loading feature of his/her browser.
  (I recommended using a color similar to the backround image color so that the effect will be at least similar.)
• The first row is set to BLUE using the bgcolor attribute in the <tr> tag. Note that it overrides the background setting in the <table> tag.
• I used the <th> tags instead of the <td> tags to make the cell data bold and centered.
• The <font> tag with the color attribute is used in each cell to change the color of the text so that the text will be more visable.

Table 14 1A 1B 1C 1D 2A 2B 2C 2D

Table 14 Code <table border=5 bgcolor=BLACK background="images/green.gif" width="92%" cellpadding=8> <caption>Table 13</caption> <tr bgcolor=BLUE> <th><font color=pink>1A</font></th> <th><font color=pink>1B</font></th> <th bgcolor=RED><font color=pink>1C</font></th> <th><font color=pink>1D</font></th> </tr> <tr> <th><font color=pink>2A</font></th> <th bgcolor=PURPLE><font color=pink>2B</font></th> <th><font color=pink>2C</font></th> <th><font color=pink>2D</font></th> </tr> </table>

• In Table 14 row 1 has a background color of BLUE but cell 1C's bgcolor attribute of RED overrides the BLUE.
  
• Likewise, cell 2B's bgcolor of PURPLE overrides the background of the table.
• Note: Because you can only place the bgcolor attribute in the <table>, <tr>, and <td>/<th> tags, there is no simple way to specify a column color: to make a column appear all one seperate color you would have to place the bgcolor attribute in each involved cell.

To view the code for the above table, please right-click on the backround of this window and select "View Source."

The next page shows the "browser-safe" colors in a larger format.

Page 7