Tables: Practical Samples

Here is an assortment of formatted tables you can copy/paste, then add your own text and images. You can set your own width, border thickness and background color and add your own background images. Also remember, you can place tables inside tables, or "nesting tables" to create a variety of effects!

Nested Tables

Use images and/or colors to create the desired look.

<table width="90%" align="center" border="0" cellspacing="20" cellpadding="20" background="img/back_1.gif">
  <tr>
    <td align="center" background="img/back_2.gif">

<table width="100%" border="0" cellspacing="0" cellpadding="20">
  <tr>
    <td bgcolor="#ffffff">Text goes here.</td>
  </tr>
</table>

    </td>
  </tr>
</table>

Making a Left Border

Your auction content will go here. You will need a "spacer image" to use to set the column between the border and text. This will keep your text from running into the border. Set the table width to any percentage you wish). You may also set a color to match the image you want to use for your border. We set the first <td> width at 10%. You can adjust this width depending on the image you use for your background.

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">
  <tr>
    <td width="10%" background="img/back_1.gif"></td>
    <td><img src="img/spacer.gif" width="12" alt=""></td>
    <td width="90%" valign="top">Text goes here.</td>
  </tr>
</table>

Bordering a Photo

You can adjust the border "size" by changing the cellpadding value. To avoid extra space below the photo, make sure you do not have any extra spaces.

<table align="center" border="0" cellspacing="0" cellpadding="5" bgcolor="#4e5a4b">
  <tr>
    <td><img src="img/photo.jpg" alt="photo"></td>
  </tr>
</table>

Placing Text Under Your Photos

Text Goes Here

<table align="center" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td align="center"><img src="img/photo.jpg" alt="photo"><br>TextGoes Here</td>
    <td align="center"><img src="img/photo.jpg" alt="photo"><br>TextGoes Here</td>
  </tr>
</table>

IMPORTANT: If you check this page for HTML Validation, you will find that we have used some code that does not validate. We have done this solely for the purpose of demonstrating the results of the HTML code. Although the code works fine, it is not HTML 4.01 transitional.

To Top TO TOP