Help with CSS.

[Metroid345]

I'm new to CSS and I'm not exactly sure how to work on this site template.
I want to make it so that the template of the site automatically changes it's size to fit it's content. I want to make it so that the parts I've circled in red (not the corners) stretch to fit the content in the large white space within the borders:

http://img200.imageshack.us/i/18900033.png/

Here are the codes for the CSS and HTML files:

CSS:

td.space{height:47px; width:68px;}
td.space2{height:100px; width:528px;}
td.bg1{background-image:url(temp1/temp1.png); width:18px; height:19px;}
td.bg2{background-image:url(temp1/temp2.png); width:50px; height:19px;}
td.bg3{background-image:url(temp1/temp3.png); width:82px; height:66px;}
td.bg4{background-image:url(temp1/temp4.png); width:50px; height:66px;}
td.bg5{background-image:url(temp1/temp5.png); width:82px; height:66px;}
td.bg6{background-image:url(temp1/temp6.png); width:18px; height:19px;}
td.bg7{background-image:url(temp1/temp7.png); width:18px; height:100px;}
td.bg8{background-image:url(temp1/temp8.png); width:18px; height:19px;}
td.bg9{background-image:url(temp1/temp9.png); width:20px; height:19px;}
td.bg10{background-image:url(temp1/temp10.png); width:82px; height:66px;}
td.bg11{background-image:url(temp1/temp11.png); width:20px; height:66px;}
td.bg12{background-image:url(temp1/temp12.png); width:px82; height:66px;}
td.bg13{background-image:url(temp1/temp13.png); width:18px; height:19px;}
td.bg14{background-image:url(temp1/temp14.png); width:18px; height:100px;}

HTML:

<html>

<head>

<link rel="stylesheet" href="temp1.css" style="text/css">

</head>

<body>

<table cellpadding="0" border="0" cellspacing="0" align="center">

	<tr>
		<td class="space" colspan="2">
		</td>
		<td class="bg3" rowspan="2">
		</td>
		<td class="bg4" rowspan="2">
		</td>
		<td class="bg5" rowspan="2">
		</td>
		<td class="bg3" rowspan="2">
		</td>
		<td class="bg4" rowspan="2">
		</td>
		<td class="bg5" rowspan="2">
		</td>
		<td class="space" colspan="2">
		</td>
	</tr>
	<tr>
		<td class="bg1">
		</td>		
		<td class="bg2">
		</td>
		<td class="bg2">
		</td>		
		<td class="bg6">
		</td>
	</tr>
	<tr>
		<td class="bg7">
		</td>
		<td class="space2" colspan="8">
		</td>
		<td class="bg14">
		</td>
	</tr>
	<tr>
		<td class="bg8">
		</td>
		<td class="bg9" colspan="3">
		</td>
		<td class="bg10" rowspan="2" align="right">
		</td>
		<td class="bg12" rowspan="2">
		</td>
		<td class="bg9" colspan="3">
		</td>
		<td class="bg13">
		</td>
	</tr>
	<tr>
		<td class="space" colspan="4">
		</td>
		<td class="space" colspan="4">
		</td>
	</tr>
</table>

</body>

</html>

So is there anyway to make it fit automatically, if so how? Or do I have to do it manually?