Adding Color Borders

By now I hope you've realized how incredibly useful tables are for structuring the layout of your auction listings. You've also seen, albeit as a bit of an afterthought, how turning on or off table borders can affect the look of this structure.

Let us now turn our full attention to those table borders, and use them to a more prominent design effect.

Template 8.8. Full-Page Color Border

One way to unify your auction template is to put a color border around the entire listing. That's exactly what this template doesit turns on the outside table border, while leaving the internal cell borders off, as you can see in Figure 8.8.

Figure 8.8. A standard template with a thick external color border.

What we've done here is create a simple single-row, single-column table, and inside it inserted our entire item listingtext and pictures. Then we've turned on the table borders and assigned the attributes border="10" and bordercolor="blue" to the <table> tag. (You can substitute any color name or code that you like.) However, we also need to hide the internal cell border, which we do by turning it white with the bordercolor="white" attribute in the <td> tag. The result is a simple color border around the outside of the table.

<table width="80%" cellpadding="10" border="10" bordercolor="blue" align="center"> <tr>   <td align="center" border="0" bordercolor="white">   <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.9. Full-Page Nested Color Border

If a single-color border is a little too plain for your tastes, consider the border in this template, shown in Figure 8.9. To create a border of many colors, we have to nest one table within anotherwithin another within another. This nested tables approach lets us insert an infinite number of tableswith an infinite number of border colorsone within the next.

Figure 8.9. A border composed of multiple colorsthanks to nested tables.

This template nests a total of four different tables, each with a single row and column. I've assigned the colors green, yellow, red, and blue to the borders (from the outside in); feel free to change the colors to your own personal palette.

<table width="80%" border="10" bordercolor="green" align="center"> <tr> <td bordercolor="white"> <table width="100%" border="10" bordercolor="yellow" align="center"> <tr> <td bordercolor="white"> <table width="100%" border="10" bordercolor="red" align="center"> <tr> <td bordercolor="white"> <table width="100%" border="10" bordercolor="blue" cellpadding="10" align="center"> <tr>   <td align="center" bordercolor="white">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">Title</h1>   <p><img src="URL" width="150"></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> </td></tr> </table> </td></tr> </table> </td></tr> </table>

Template 8.10. Top and Bottom Color Borders Only

Maybe you don't want a border around your entire table. This template places a thick color border at the top and bottom only of the item descriptionnothing on the sides. It's a nice, airy effect, as you can see in Figure 8.10.

Figure 8.10. Thick top and bottom borders

To achieve the top and bottom border effect, we have to introduce the CSS (Cascading Style Sheets) style attribute to the <table> tag. Attached to this attribute are various margin-top and margin-bottom properties, for color (blue in this example; you can change to any color you like), width (a thickness of 20 points), and style (solid). Here's the code:

<table style="border-top-style: solid; border-top-color: blue; border-top-width: 20pt; border-bottom-style: solid; border-bottom-color: blue; border-bottom-width: 20pt" width="80%" align="center" cellpadding="10"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></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: left; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table>

Template 8.11. Left Side Color Border Only

Here's another use of selective side borders. As you can see in Figure 8.11, this template features a very thick color border on the left side of the listing only.

Figure 8.11. A thick green border to the left of the item description.

As with the previous template, this one uses the CSS style attribute, this time with margin-left properties. Feel free to replace the green color with the color name or code of your choice.

<table style="border-left-style: solid; border-left-color: green; border-left-width: 40pt" width="80%" align="center" cellpadding="10"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></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: left; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table>

Template 8.12. Fancy Listing Border

While we're playing around with CSS margin properties, it's worth remembering that CSS lets us specify all manner of border styles, including dotted, dashed, solid, double, groove, ridge, inset, and outset. This lets us create a template with a fancy border, as shown in Figure 8.12.

Figure 8.12. A yellow ridge border around the entire listing.

This template puts a 10 point yellow ridge border around the entire item listing, using the border-style, border-color, and border-width properties. Feel free to replace the ridge style or color with any other border style and color of your liking.

<table style="border-style: ridge; border-color: yellow; border-width: 10pt" width="80%" align="center" cellpadding="10"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></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: left; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td> </tr> </table>

Template 8.13. Color Borders Around Each Section

Now let's return to the layout first used in Template 8.2, which has separate sections for title, pictures, description, payment info, and shipping info. What we'll do now is put a different colored border around each sectionthat is, around each cell in the table, as shown in Figure 8.13.

Figure 8.13. Color borders around each section of the listing.

We could accomplish this effect by using the border-color attribute within each individual <td> tag, but this approach only works with the Internet Explorer browser. To get colored borders with Firefox and Safari (as well as IE), we have to use the CSS approach, with the border-style, border-width, and border-color properties. Naturally, you can change the colors for each cell as you like.

<table width="80%" cellpadding="10"> <tr>   <td align="center" colspan="2"   style="border-style: solid;   border-width: thin; border-color: blue">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr>   <td align="center" colspan="2"   style="border-style: solid;   border-width: thin; border-color: green">   <img src="url">   </td> </tr> <tr>   <td colspan="2" style="border-style: solid;   border-width: thin; border-color: red">   <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 width="50%" style="border-style: solid;   border-width: thin; border-color: blue">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Payment Information</strong>   <br>Payment terms</p>   </td>   <td width="50%" style="border-style: solid;   border-width: thin; border-color: green">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Shipping Information</strong>   <br>Shipping terms</p>   </td> </tr> </table>

Template 8.14. Color Borders Around Payment and Shipping Sections

I'll be the first to admit that putting different color borders around each section of your listing, as we did with the previous template, can be a little garishdepending on which colors you choose, of course. To that end, I prefer the approach of this template, shown in Figure 8.14, which uses borders only for the payment and shipping info sections.

Figure 8.14. Separating the payment and shipping info section with color borders.

In this instance, we use CSS code to put medium teal borders around the last two cells in the table. It's pretty simple, as you can see.

<table width="80%" align="center" cellpadding="10"> <tr>   <td align="center" colspan="2">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr>   <td align="center" colspan="2">   <img src="url">   </td> </tr> <tr>   <td colspan="2">   <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 width="50%" style="border-style: outset;   border-width: medium; border-color: teal">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Payment Information</strong>   <br>Payment terms</p>   </td>   <td width="50%" style="border-style: outset;   border-width: medium; Border-color: teal">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Shipping Information</strong>   <br>Shipping terms</p>   </td> </tr> </table>

Template 8.15. Top-of-Section Color Borders

Let's continue with our CSS code to put thick color ridge borders above the description, payment, and shipping sections of the template, as shown in Figure 8.15.

Figure 8.15. Thick color borders above key sections of the item listing.

The operative code for this template involves the border-top-style, border-top-width, and border-top-color attributes. As always, feel free to edit these three properties to fine-tune your own custom template.

<table width="80%" align="center" cellpadding="10"> <tr>   <td align="center" colspan="2">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr>   <td align="center" colspan="2">   <img src="url">   </td> </tr> <tr>   <td colspan="2" style="border-top-style: solid;   border-top-width: 10pt; border-top-color: #66CCFF">   <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 width="50%" style="border-top-style: solid;   border-top-width: 10pt; border-top-color: #66CCFF">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Payment Information</strong>   <br>Payment terms</p>   </td>   <td width="50%" style="border-top-style: solid;   border-top-width: 10pt; border-top-color: #66CCFF">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Shipping Information</strong>   <br>Shipping terms</p>   </td> </tr> </table>