Web Design Garage
| Table cells in HTML have the bgcolor attribute, which controls the background color of the cell. Specifying background colors for certain cells in your layout gives your design a more graphical feel without the use of image files. Compare the layout in Figure 23.1 with the one in Figure 23.2, and you'll agree. Listing 23.1. View Source for Figure 23.1.
<table width="760" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="760" valign="top">Logo</td> </tr> <tr> <td width="760" valign="top"> <table width="760" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="200" valign="top">Nav</td> <td width="400" valign="top">Content</td> <td width="160" valign="top">Links</td> </tr> </table> </td> </tr> </table> Figure 23.1. The table cells in this layout don't use background colors.
Figure 23.2. By specifying background colors for the Logo, Nav, and Links areas, you create a more graphical page without using image files.
Listing 23.2. View Source for Figure 23.2.
<table width="760" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="760" valign="top" bgcolor="#99CCFF">Logo</td> </tr> <tr> <td width="760" valign="top"> <table width="760" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="200" valign="top" bgcolor="#99CCFF">Nav</td> <td width="400" valign="top">Content</td> <td width="160" valign="top" bgcolor="#99FF99">Links</td> </tr> </table> </td> </tr> </table>
Notice in Listing 23.2 that you specify the desired color with a string of characters called a hexadecimal color code. The code begins with a number sign (#), followed by a six-digit hexadecimal number. The hexadecimal number system is base 16 instead of base 10 like our common, everyday decimal number system, as the math geeks among us already know. The first ten digits in the hexadecimal system are the regular decimal digits 0 through 9. The six remaining digits are the letters A through F, since we don't have number symbols to represent them. So when you see a hexadecimal value like FC or FF, don't think these are letters. They're actually numbers.
A hexadecimal color code contains three sets of hexadecimal numbers with two digits each. The first two-digit set controls the amount of red in the color. The second set controls the amount of green, and the third controls the amount of blue. Mixing different levels of red, green, and blue creates every single color you see on screen. The higher the value of a particular two-digit set, the more prominent the component color is in the final shade. Take the hexadecimal code for red, which is #FF0000. If you break it down, you get a value of FF for the red component, 00 for the green component, and 00 for the blue component. That's full-on red, with FF in the red slotthe highest possible two-digit hexadecimal number. In this particular shade, there are no green or blue components to dilute the purity of the red. Likewise, the code for green is #00FF00 (zero red, full-on green, and zero blue), while the code for blue is #0000FF (zero red, zero green, and full-on blue).
To create a color like violet, you mix a couple of components together. Red and blue make violet, so one possibility is to mix full-on red with full-on blue, as in #FF00FF, which gives you a very bright and pure shade. But maybe you want a redder-looking violet. Just turn down the blue component by giving it a smaller value, as in #FF0099 or #FF0066. For a bluer-looking violet, do the opposite. Keep blue full-on, and reduce the amount of red, as in #9900FF or #6600FF.
With a little practice, you can learn to mix whatever color you need without having to memorize something like Table 23.1, which gives the names and hexadecimal color codes for common shades.
[*] The color called darkgray is actually lighter than the color called gray. Use dimgray instead. |