Changing Fonts Table Color Cell Color Border Color

Light and Dark Empty Data Cells Table Background Image Cell Background Image

Different browsers display fonts in tables in different ways. If you wish to use a font face or size on your pages other than the default (which is usually Times New Roman size=3), then you will need to specify the font face and size in each and every table cell.

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 these tables I defined <font face="arial, helvetica" size=2> in every single table cell.

<table border=5 cellpadding=2 width="30%">
<tr align=center>
<td width="50%"><font face="arial, helvetica" size=2>Roses</font></td>
<td width="50%"><font face="arial, helvetica" size=2>Tulips</font></td>
</tr>

etc ... etc ... etc

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 for 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!

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.

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...

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, insert
bordercolor="#xxxxxx" into the <table> tag, inside the brackets.

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

<table border=10 bgcolor="#ffccff" bordercolor="#000000" cellpadding=10 width=50%>

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, insert
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%">

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.

I.E. manages the empty cell a lot better!


There are two ways to fix that:

1. &nbsp; Use a non-breaking space character. You cannot see anything, but it makes the cell look the same as the others.

The only problem with this is that some on-line editors will always convert it into no space at all when you next go to edit any page where it is used. It means you will always have to remember to put it back in EVERY time you edit that page!

If you create your pages off-line and FTP them, then it will work just fine for you.

2. Use an invisible gif. Once again, you cannot see anything, but it makes the cell look the same as the others. This is a useful one to use if your editor does not like the &nbsp; character.

The invisible gif that I use is called "space.gif". If you'd like one, just right click in the space in this little table ... the gif is in there!

Here is an example table.

Data in cell	MON	TUE	WED
Nothing    in the cells in this row
space.gif  in the cells in this row
      in the cells in this row

Note the difference in how the table cells form in the empty cells?

OK then ... let's use the "space.gif", and some background colors to make a calendar!

DECEMBER, 1997
SUN	MON	TUE	WED	THU	FRI	SAT
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

And here's the coding, if you'd like a copy of it!

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.

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.