Creating Listings with Multiple Sections

We'll start by using tables to divide your listing into multiple sections. As you learned in Chapter 1, "The Good, the Bad, and the Ugly: Do's and Don'ts for Effective Auction Listings," your listing can (and should) contain a number of discrete sections, each devoted to a particular type of informationthe item title, subtitle, overview paragraph, text description, and terms of sale (TOS). The following templates, then, use table rows and columns to arrange these sections in an orderly fashion.

Template 8.1. Separate Title, Picture, Description, and TOS Sections

Our first template breaks your listing into four discrete sections, one above the othertitle, pictures, description, and TOS, as shown in Figure 8.1. This requires the creation of a table with four rows, one column per row.

Figure 8.1. Four stacked sections defined by four table rows.

The code for this table is relatively simple. We've defined the width of the table to be 80% of the available page width; the height of each row will vary depending on the content you insert. To emphasize the tabular grid of this design, we've specified a thin border for the table, using the default page colors. The border surrounds not only the outside of the table, but also each of the table's cells. You can add additional pictures by including more <img> tags in the second row.

Here's the code:

<table width="80%" align="center" border="1" 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>   <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.2. Separate Description, Payment, and Shipping Sections

This next template follows the same basic design as Template 8.1, but separates the general terms of service into separate payment and shipping sections. As you can see in Figure 8.2, what's unique about this is that we take that final row and divide it into two equal columnsone each for payment and shipping. So you end up with a table where some rows have just one cell, and the last row has two cells.

Figure 8.2. Dividing the final row of the table into two cellsone for payment information, one for shipping information.

You might think that the code for this template would be identical to that of Template 8.1, save for the final row, but you'd be wrong. If you simply add a second cell to the final row, the cells in all the previous rows end up being assigned to the first column of the table only. To make the single-cell rows span the entire width of the table, you have to add colspan="2" attributes to each <td> tag. Here's how the new code looks:

<table width="80%" align="center" border="1" 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%">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Payment Information</strong>   <br>Payment terms</p>   </td>   <td width="50%">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Shipping Information</strong>   <br>Shipping terms</p>   </td> </tr> </table>