Coloring with Tables

______

PETE'S PLACE

Coloring With Tables

______

Note: This is a technique which works with Netscape 3 and above, but not Netscape 2. If you're using the wrong browser, this page will not make sense. Keep that in mind if you use this technique. Try to allow for your page to look OK even if the color change doesn't show.
For example, with the wrong browser, the heading above will simply be black text on the white page -- no problem. But if you used this technique to create "reversed" type, people with the wrong browsers might have difficulty reading it. Most browsers now support this technique completely.
Simply put, you can use the background color command (bgcolor) in a table element and the background color will change for that cell or row. This is particularly useful for making banner headings like that above, without having to take up the bandwidth of a graphic.
The code for boxed heading above is:
<table width="50%" border=2 cellpadding=10>
<tr align=center bgcolor="38BODE">
<td>PETE'S PLACE

Coloring With Tables
</td>
</tr>
</table>
You see I am using a complete table there just for the two lines, so I can create a color background for them. And the page comes up very fast because there are no graphics to load.
Now here's something really colorful!
Here's an example which is also useful for finding out the codes for various colors.

Some Sample Color Codes
Black 000000	White FFFFFF	Red FF0000	Green 00FF00	Blue 0000FF
Hmmm... Notice the codes for the colors above. The absence of color is 00 and full color is FF, and RGB color is made up of red, green, and blue. So therefore, the first pair specifies the amount of red, the second pair the amount of green, etc. to make up the color. Even if you don't know the hex numbering system, you can easily play around with making your own colors, stealing portions of codes from other colors. To insure the colors look good with every browser, stick to 00, 33, 66, 99, CC, and FF for your codes. Here are some more, including less standard approaches (note that red and green make yellow, and green and blue make cyan, etc. and that any code used as the same for each color creates a shade of grey):
Yellow FFFF00	Cyan 00FFFF	Purple FF00FF	Dark Grey 666666	Light Grey CCCCCC
Brown A62A2A	Aquamarine 70DB93	Coral FF7F00	Cadet Blue 5F9F9F	Brass B5A642
Antique White FAEBD7	Mandarin Orange E47833	Light Wood E9C2A6	Lime Green 32CD32	Gold CD7F32
Light Blue C0D9D9	Green Yellow 93DB70	Cornflower Blue 42426F	Orchid DB70DB	Plum EAADEA
Neon Blue 4D4DFF	Bright Gold D9D919	Neon Pink FF6EC7	Orange FF7F00	Rich Blue 5959AB
Cool Copper D98719	Summer Sky 38B0DE	Scarlet 8C1717	Violet 4F2F4F	Spicy Pink FF1CAE

You get the idea. The possibilities are endless. If you're not sure how I did this above, use "view source" on your browser and check it out.

Here are some additional sites for help

-- at this site, you can enter a numeric amount for each of red, green and blue (0-255) and it will show you the hex code along with the color you have created.

-- great site with loads of colors, including a page on colors which will show up well in any browser, and a lot of other HTML tutorials

No graphics were used in the creation of this page.

WebTricks Main Page

Document tags
Simple tags
Container tags
Using Color
Hyperlinks
Images

Table Tags
Table Examples

Animated Gifs

Frames

Outside Resources

You can reach Pete at:
pete@thelivingcanvas.com

WebTricks Main Page
Document tags Simple tags Container tags Using Color Hyperlinks Images	Table Tags Table Examples Animated Gifs Frames Outside Resources