[click to go to previous page] [to index page] [to next page]

7 : Colors In Tables

previous page previous page previous page
I've already shown you (in pg.3) how you can use the bordercolor attribute to set the color of the border.
You may have also noticed my use of the attribute bgcolor in opening <table> tags (like in Table 7) to set the BackGround Color of the table.
  • 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".
The following table demonstrates using bgcolor attribute to add a background color to a table.

Table 12
1A1B1C1D
2A2B2C2D
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.
The next table shows how to apply color to a single cell, and how that application will override any previous color applications.

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 end this chapter, here's an attractive table with a different color for each cell, showing the 16 "Browser Safe" colors:
The 16 "Browser Safe" Colors
Black Gray Silver White
Maroon Red Purple Fushia
Green Lime Olive Yellow
Navy Blue Teal Aqua

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.

next next next
[click to go to previous page] [to index page] [to top of this page] [to next page]

Copyrightę 1998. Liberty Miller . All rights reserved.
This material may not be reproduced without the written permission of the author.
Last Modified 01/05/98

Page 7