Expanding Table

This is a very helpful tutorial, it will make your tables expand as you add content to them:

1. Start off by making our actual table in graphic version. This is a very simple table just to get you into the swing of things. If you are a little tied for time, you can download the PSD of the one below Here

2. We will need to slice this into 3 main parts, This will be the top, the bottom and the bit in the middle which will be repeated over and over again. This following is what bits of the image you need. So save them as the following into their own folder:

header.jpg

middle.jpg

bottom .jpg

3. The way this is going to work, is we have the header in its own space, the bottom in its own little space. And, the place where you write will auto expand. The background of this expanding part will have 'middle.jpg' as its background, this is important why your middle image must look good when its repeated.

4. The code for this is as follows (complete, just ready for copying and pasting) :

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="header.jpg" width="200" height="42"></td>
</tr>
<tr>
<td background="middle.jpg"><table width="165" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>All your content can fit here easily!!</td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="bottom.jpg" width="200" height="42"></td>
</tr>
</table></td>
</tr>
</table>

All of this is a table inside the middle row of a table with three rows. Which is inside a table of 1 row.

This is the final result from the bit of code i have just given you. This text is here simply juts to show you that it works and autoexpands as i said it would :) Obviously i added a different font and colour... oh, and centered it