| 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. 
TIP Use background colors instead of image files whenever possible. Since you define the colors in the HTML, your visitors don't have to download separate image files to see the colors. |
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. GEEKSPEAK The hexadecimal number system is base 16 instead of base 10. It represents numerical values with the symbols 0 through 9 for the first ten digits and A through F for the last six digits. |
TIP Make sure your text is legible against the background color of the table cell. If the contrast looks like it could go either way, err on the side of caution. |
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). TIP The digits in each slot of a hexadecimal color code don't need to match. #FC02D5 is a perfectly good hexadecimal color, with FC in the red slot, 02 in the green slot, and D5 in the blue slot. However, for best results on the Web, stick to matching digits in multiples of three: 0, 3, 6, 9, C, and F. So the closest Web equivalent of #FC02D5 is #FF00CC. |
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. TIP If you truly hate hexadecimal codes, you can always specify the color name instead, as in bgcolor="lightgreen", but you're better off using the closest Web hexadecimal value, which is less open to interpretation by the visitor's browser. Further, the names can be misleading. The color named darkgray actually corresponds to a lighter shade of gray than the color named gray. |
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. Table 23.1. Common Colors and Their CodesCODE | NAME | HEXADECIMAL COLOR | CLOSEST WEB EQUIVALENT |
|---|
Aqua | aqua | #00FFFF | #00FFFF | Black | black | #000000 | #000000 | Blue | blue | #0000FF | #0000FF | Blue, dark | darkblue | #00008B | #000099 | Blue, light | lightblue | #ADD8E6 | #CCCCFF | Blue, sky | skyblue | #87CEEB | #99CCFF | Gold | gold | #FFD700 | #FFCC00 | Gray | gray | #808080 | #999999 | Gray, dark | dimgray[*] | #696969 | #666666 | Green | green | #008000 | #009900 | Green, dark | darkgreen | #006400 | #006600 | Green, light | lightgreen | #90EE90 | #99FF99 | Green, sea | seagreen | #2E8B57 | #339966 | Indigo | indigo | #4B0082 | #330099 | Orange | orange | #FFA500 | #FF9900 | Pink | pink | #FFC0CB | #FFCCCC | Purple | purple | #800080 | #990099 | Red | red | #FF0000 | #FF0000 | Red, dark | darkred | #8B0000 | #990000 | Silver | silver | #C0C0C0 | #CCCCCC | Violet | violet | #EE82EE | #FF99FF | White | white | #FFFFFF | #FFFFFF | Yellow | yellow | #FFFF00 | #FFFF00 |
[*] The color called darkgray is actually lighter than the color called gray. Use dimgray instead.
|
