Arranging Images on the Page

We've already done some image arrangement in a few of the previous templates. Now we'll go a step or two beyond, with some more complex vertical and horizontal grids.

Template 8.6. Multiple Pictures in a Vertical Grid

If you have a lot of photos to display, you don't want them aligned willy-nilly in your listing. This template (shown in Figure 8.6) takes six separate photos and aligns them in a neat grid of two rows by three columns.

Figure 8.6. A 2 x 3 photo grid.

In this template, the photo grid is inserted between the title and the description rows. The grid consists of two rows, each with three cells; one photo is inserted into each of the six total cells. Naturally, the title, description, and TOS rows are set to span all three columns, using the colspan="3" attribute in the <tr> tags. We've also turned off the table borders, for a cleaner look.

<table width="80%" align="center" cellpadding="10"> <tr>   <td align="center" colspan="3">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   </td> </tr> <tr>   <td>   <p align="center"> <img src="URL1" height="150">   </td>   <td>   <p align="center"><img src="URL2" height="150">   </td>   <td>   <p align="center"><img src="URL3" height="150">   </td> </tr> <tr>   <td>   <p align="center"><img src="URL4" height="150">   </td>   <td>   <p align="center"><img src="URL5" height="150">   </td>   <td>   <p align="center"><img src="URL6" height="150">   </td> </tr> <tr>   <td colspan="3">   <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 align="center" colspan="3">   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td> </tr> </table>

By the way, to make things look as clean as possible, we force a common height for all the pictures by using height="150" attribute in each <img> tag. You can play around with the height number to best work with your particular photos.

Template 8.7. Multiple Pictures in a Vertical Column

If we can align photos in horizontal rows, why not flip things around and align them in vertical columns? That's what we do in this template, shown in Figure 8.7; it's actually a good way to display multiple photos.

Figure 8.7. Multiple pictures aligned in a vertical column to the right of the item description.

To ensure a uniform look to the listing, we've limited the width of each photo (and the right-hand column itself) to 150 pixels. We've also specified that the description text and the photos are vertically aligned to the top of each cell, by specifying the valign="top" attribute to the <td> tags in that row.

<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 valign="top">   <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>   <td width="150">   <img src="URL1" width="150"><br><br>   <img src="URL2" width="150"><br><br>   <img src="URL3" width="150"><br><br>   <img src="URL4" width="150"><br><br>   </td> </tr> <tr>   <td align="center" colspan="2">   <p style="text-align: left; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table>