Back to Main Page

E-mail me! Click here!

Table Fonts and Colors

This is the last of four pages detailing tables. Up until now, all the tables we have created have been black and white. You have been introduced to many different attributes and nearly endless possibilities, but the time has come to make the list of choices even longer.

Table Color

Time for a few more attributes. By adding bgcolor="#xxxxxx" to the <table> tag you can modify the background color of the entire table.

Internet Explorer colors the background of the table (The cells and the space between them).

Netscape treats this attribute differently. Instead of actually coloring the background of the table, it colors the background of every cell the same color. This is okay if you don't mind the normal page background showing through between cells; but it can be annoying, especially if you employ cellspacing.

Some older browsers, particularly older versions of Netscape, do not support this attribute at all and will only display the same background as the rest of the page.

<table bgcolor="#191970" border="6" align=center width="50%" cellpadding="2">

Coloring Idvividual Cells

The bgcolor attribute can also be added to the <td> and <th> of individual cells. Just like table background, however, some older browsers do not support this feature.

<td bgcolor="#057500">

Border Color

It is also possible to change the color of a table's border. This can be incredibly useful for calling attention to data inside a table.

To do this, add border color="#xxxxxx" to the <table> tag.

<table bgcolor="#ffffff" bordercolor="#000000" border="6" align=center width="50%" cellpadding="2">

The Two-Tone Paint Job

This is a pair of attributes that can be used to give your tables a border with two different colors. Take a look at the border of a default table. Notice that it has a light portion and a dark portion? These can be modified individually using bordercolorlight and bordercolordark. However, there is a catch:

New verions of Internet Explorer (I believe 4.0 and newer, but don't quote me on this) will recognize these tags. From what I know, 4.0 will color the borders as indicated above. 5.0 however, take this one step farther by coloring the borders of each cell. If you happen to be using this browser know that I have made the colors on the example table below very distinctly different so you can see this.

I have witnessed much in my short life, but never a miracle such as this!! As of version 4.7, Netscape will support these two attributes; it still doesn't color individual cell borders, but some is deffinitely better than none. Versions of Netscape older than 4.7 will not support these attributes.

<table bgcolor="#000000" bordercolorlight="#aaaaaa" bordercolordark="#9036d0" border="6" align=center width="50%" cellpadding="2">

A Few Notes About Empty Cells

In previous sections I mentioned making cells with no data in them, or "empty cells". Currently, the only browser that does a good job of handling empty cells is IE 5.0; however there is still hope for older browsers. A little tiny (invisible) GIF file can help a lot.

Netscape hates empty cells. It will show absolutely nothing, not even bgcolor in an empty cell.

Internet Explorer still doesn't put a border around the empty cell, but at least it will show colors. Version 5.0 does a much better job; this browser will even put a border around an empty cell.

Here's a table to show you what I mean:

Cell Contains Data	Normal
Cell is Empty
Add Tiny GIF

Alternately, if you don't want to worry about using the single-pixel .gif file, you can type &nbsp; between the <td> and </td> tags. This tells the browser to put a space in the cell (just like the space bar on your keyboard). Nothing will show up in the cell, but the browser will THINK that there is somthing there.

Would you like your own invisible GIF file to place in enmpty cells? Right click in the table cell below and save the file to your disk. Enjoy!!

Adding Background Images

This feature allows you to put a separate background image in a table. This can have a nice effect on a lot of pages, and can make your work look very profesional (wether it actually is or not). Unfortunately, this feature is not very widely supported (yet...) and many browsers won't recognize it. I use Internet Explorer 5.0, and I know that it does, but I cannot speak for all others out there. I will, however, pass along whatever I learn.

To add a background image, type background="filename" along with any other attributes of your <table> tag.

Versions of Netscape older than 4.0 do not support background images within tables.

<table border="14" cellpadding="20" background="space1.gif">

If you specify a background color for one or more cells in a table with a background image, different browsers treat the image differently.

With Netscape versions that DO recognize this attribute, a background image will over-ride cell colors.

With Internet Explorer versions earlier than 5.0 that recognize this attribute, a cell color will over-ride a background image.

Internet Explorer 5.0 actually agrees with Netscape (*GASP!*) in that a cell background image will over-ride a bgcolor.

Background Images for Single Cells

As with table background images, this feature is not widely supported. I am fairly certain that any browser which supports table background images supports cell background images as well, but I don't know for sure.

To put a background image in a cell instead of the whole table, add the background="filename" attribute to the <td> or <th> tag.

<td background="bluesatin.jpg">

Closing Thoughts

Well...We've covered a lot of miles; tables are a gigantic subject. Hopefully you haven't suffered a nervous breakdown by now, and I certainly hope I haven't run you out of printer ink. The stuff can get expensive. Enjoy.

Tables:1-2-3