Adding Color Backgrounds

Just as we can add borders around the cells of a table, we can also add color fills to each cell. This enables us to add background color to our item listingseither to the entire listing, or to individual sections (cells) within the whole.

Template 8.16. Full-Page Color Background

This template, shown in Figure 8.16, is a popular one. It takes our standard single-row, single-column layout and adds a light color background. (This example uses a light blue; feel free to change the color name or code to any other color of your choosing.)

Figure 8.16. A light color background behind the entire item listing.

The code for this template is based on the code for Template 8.8. The background color is added via the bgcolor attribute in the <table> tag. It's a simple addition that adds color behind the entire listing.

<table width="80%" cellpadding="10" align="center" bgcolor="#99CCFF"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one</p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td> </tr> </table>

Template 8.17. Dark Full-Page Color Background with Reverse Text

This next template features a similar approach but with a much different effect. In this instance, we use a dark blue background for the table, which necessitates the use of lighter-colored textyellow for the title and TOS, white for the body text, as shown in Figure 8.17.

Figure 8.17. Dark background with white and yellow text.

The code here is the same as for Template 8.16, except with a different color choice for the bgcolor attribute, and color properties assigned within the style attributes for all the text paragraphs.

<table width="80%" cellpadding="10" align="center" bgcolor="#000099"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold; color: yellow">Title</h1>   <p><img src="URL"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial; color: white">   Description paragraph one   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial; color: white">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial; color: yellow">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td> </tr> </table>

Template 8.18. Second Column Different Color Background

This template builds on the idea behind Template 8.4, but puts a light background behind the wide left column and a darker background behind the narrow right column. As you can see in Figure 8.18, the right-column bulleted text is now displayed in yellow, for better contrast.

Figure 8.18. Second column with dark background and yellow text.

We've made this a relatively simple two-column template, without spanning any rows. The title, picture, description text, and TOS are all in the left column; the bulleted list is in the right column. To accomplish the different shadings for column, we've applied the bgcolor attribute to the <td> tag for each column. The color for the bulleted list text is specified by a <font> container tag around the bulleted list.

<table width="80%" align="center" cellpadding="10" cellspacing="0"> <tr>   <td align="center" colspan="2" bgcolor="#6699FF">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr valign="top">   <td width="80%" bgcolor="#6699FF" align="center">   <img src="url">   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   First description paragraph   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Second description paragraph   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td>   <td width="20%" bgcolor="#000099">   <font color="yellow">   <ul style="font-family: Arial; font-size: 10pt">   <li>Bullet one</li>   <li>Bullet two</li>   <li>Bullet three</li>   <li>Bullet four</li>   </ul>   </font>   </td> </tr> </table>

Template 8.19. TOS Color Background

Now let's take the concept of different colors for different sections of the listing and apply the color background to the TOS section at the bottom of the page. The result is shown in Figure 8.19.

Figure 8.19. White background with a light-color TOS.

The code for this template builds on the code for Template 8.1. The bgcolor attribute is added to the final <td> tag; in this instance, the background color is light enough we don't have to change the text from basic black.

<table width="80%" align="center" cellpadding="10"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr>   <td align="center">   <img src="url">   </td> </tr> <tr>   <td>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   </td> </tr> <tr>   <td bgcolor="cyan">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong>   <br>Terms of service</p>   </td> </tr> </table>

Template 8.20. Color Background with Different Color Border

Border Let's finish our exploration of color backgrounds by adding a contrasting color border around a light background color, as shown in Figure 8.20.

Figure 8.20. Light background color with contrasting color border.

This code is based on the code for Template 8.16, with the appropriate CSS border properties added. For this template, we've used a light brown background with a maroon (deep red) border. Other combinations, of course, are possible.

<table width="80%" cellpadding="10" align="center" bgcolor="#FFCC66" style="border-style: solid; border-width: thick; border-color: maroon"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one</p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table>