Vertical repeat image on table side

[Peter Smith]

Hi,

im trying to repeat an image on 2 sides of a table (as the side of a form).
In the center I want to add more information (tables and stuff). IMPORTANT: I dont know how much data will be in this table (so how long the page will be)

I want the tables sides (those images) to repeat vertically as I enter more data. Currently the table remains small and just a small part of the side shows the image...
I hope my problem is clear, otherwise the code should explain what im trying to do....
Help is really needed!

See the code below. NOTE: When I replace the value 100% by a hard pixel value, say 300...this code does do what I want...

<!-- TABLE MAIN TOP -->
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" height="25"><img src="Images/Table_Main_Top_Left.jpg" /></td>
<td height="25" background="/Images/Table_Main_Top_Center.jpg" width="100%"></td>
<td width="24" height="25"><img src="Images/Table_Main_Top_Right.jpg" /></td>
</tr>
</table>


<!-- TOTAL TABLE -->
<table width="700" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!-- LEFT SIDE-->
<table width="20" cellpadding="0" cellspacing="0" border="0" height="100%" style="background-image: url(Images/Table_Main_SideLeft.jpg); background-repeat: repeat-y;">
<tr>
<td><img src="Images/Blank.gif" width="20" /></td>
</tr>
</table>
</td>
<td>
<!-- MAIN -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="656">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- this is where I want to add data, but if this is more than one row the sides of the LEFT and RIGHT SIDE tables do NOT vertically repeat along-->


</td>
</tr>
</table>
</td>
<td>
<!-- RIGHT SIDE-->
<table width="24" cellpadding="0" cellspacing="0" border="0" height="100%" style="background-image: url(Images/Table_Main_SideRight.jpg); background-repeat: repeat-y;">
<tr>
<td><img src="Images/Blank.gif" width="20" /></td>
</tr>
</table>
</td>
</tr>
</table>


<!-- TABLE MAIN BOTTOM -->
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" height="14"><img src="Images/Table_Main_Bottom_Left.jpg" /></td>
<td height="14" background="/Images/Table_Main_Bottom_Center.jpg" width="100%"></td>
<td width="24" height="14"><img src="Images/Table_Main_Bottom_Right.jpg" /></td>
</tr>
</table>