Annabella's HTML Help .... EZ PRINT!

TABLE FONTS AND COLOR

For the full version of this page, go to http://www.annabella.net/tables4.html

CHANGING FONTS

Different browsers display fonts in tables in different ways.

If you have specified a particular font on your page, IE will display that font within the table cells, but at the default font size.
Netscape will only display the default font!

You will note that I have used "arial,helvetica" size=2 as the font face for all my HTML Help pages. In ALL the tables before this point, I have had to define <font face="arial,helvetica" size=2> in every single table cell, otherwise Netscape users would have been seeing the default Times New Roman font face.

If you are using Internet Explorer to create and view your pages, then you might not notice or be bothered by the difference. BUT, you must remember that if you are using a non-default font face font the rest of your page, Netscape users will not see it within your tables...they will only see the default font face and size.

You can, of course, change the font face, color and size to somthing other than the rest of your page! Remembering that the viewer of your page will only be able to see your font face if they have that font installed on their computer!

TABLE COLOR

BGCOLOR is an attribute of the TABLE tag.

Note: There are differences between browsers in exactly how the color changes are displayed. Not all browsers support table background colors.

To change the background color of the entire table, add bgcolor="#XXXXXX" into the <table> tag, inside the brackets.

<table bgcolor="#xxxxxx"> to change the entire table background.

CELL COLOR

You can also change the color of individual cells.

Note: Not all browsers support individual data cell background colors.

To change the background color of an individual data cell, add bgcolor="#xxxxxx"into the <td> tag, inside the brackets.

<td bgcolor="#ccccff">Help<td bgcolor="#ffccff">... etc... etc...

BORDERCOLOR

You can also change the color of the border of the table.

Note: There are differences between browsers in exactly how the color changes are displayed. Not all browsers support table bordercolor changes.

BORDERCOLOR is an attribute of the TABLE tag.

To change the bordercolor of the table, add bordercolor="#xxxxxx" into the <table> tag, inside the brackets.

<table border=10 bordercolor="#FF0000">

BORDERCOLORLIGHT and BORDERCOLORDARK

Newer versions of Internet Explorer support bordercolorlight and bordercolordark attributes. With a wider border on a table, you will notice that the top and left sides are a lighter shade, and the right and bottom parts are darker. You can actually define those colors if you wish.

Bordercolorlight and bordercolordark are not supported by Netscape, but the basic bordercolor tag is. So, if you wish to use the bordercolorlight and bordercolordark attributes, it is a good idea to also include the basic bordercolor attribute as well. Otherwise Netscape users will see the regular "uncolored" border.

To change the bordercolor of the table, add bordercolor="#xxxxxx" into the <table> tag, inside the brackets.

<table bordercolor="#xxxxxx"> to change the table border color.

<table bgcolor="#ffffff" border=20 bordercolordark="#000000" bordercolorlight="#ff6600" bordercolor="#000000" cellpadding=10 width=40%>

EMPTY DATA CELLS

If you make a data cell that has no data in it, it looks a bit odd! The table still forms around it, but the empty cell does not look the same as the others.

Netscape does not tolerate empty tables very well. It will not even show the background color of an empty table cell.

Internet Explorer Manages the empty cell a lot better! To fix that, I put an invisible gif in the data cell. You cannot see anything, but it makes the cell look the same as the others.

BACKGROUND IMAGES

Internet Explorer and Netscape Communicator 4.0 both support a background image in a table. You can, of course, put an image in a data cell, but an actual background image is not very widely supported.

To add a background image, add background="filename" into the <table> tag, inside the brackets.

<table border=10 cellpadding=20 background="water.jpg">

Older versions of Netscape do not support the table background attribute.

If you specify a background color for one of the data cells, that will over-ride the background image.
With Netscape Communicator the background image will over-ride the cell color.

CELL BACKGROUND IMAGE

You can also specify a background image in individual data cells.

Internet Explorer and Netscape Communicator 4.0 support a background image in an individual data cell. You can, of course, put an image in a data cell, but an actual background image is not very widely supported.

To add an individual data cell background image, add background="filename" into the <TD> or <TH> tag, inside the brackets.

<th background="water.jpg" width=33%>

Older versions of Netscape do not support the individual data cell background attribute.