How can I get Outlook to display my tables properly

Question

This is how my code looks in a browser, and how I want it to look:

And this is what happens when it is viewed in Outlook; The orange banner is in a table above but with the same width as the table below yet it stretches the width outwards:

HTML:

<table width="700" border="0" cellspacing="0">
<tr>
<th width="60" height="290" rowspan="6" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="64" align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" width="16" height="30" align="bottom" />Service Desk</h1></th>
<th width="21" rowspan="7" align="center" valign="bottom" bgcolor="#FFFFFF" scope="row" ><img id="dot" src="dot.png" width="1" height="1" /></th>
<th width="9"  align="left" valign="bottom" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th width="276"  align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />Our Work</h1></th>
<th width="55" rowspan="6" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
</tr>
<tr>
<th width="267" height="114" align="left" valign="baseline" bgcolor="#FFFFFF"  scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
<th colspan="2" align="left" valign="baseline" bgcolor="#FFFFFF" style="padding:10px" scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="38" align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />Engineer Resources</h1></th>
<th colspan="2" rowspan="4" align="center" valign="middle" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
</tr>
<tr>
<th height="105" align="left" valign="top" bgcolor="#FFFFFF" scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="38" align="left" valign="baseline" bgcolor="#FFFFFF"  scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />ecare plus</h1></th>
</tr>
<tr>
<th rowspan="2" align="left" valign="top" bgcolor="#FFFFFF"  scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="66" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
<th align="left" valign="top" bgcolor="#FFFFFF" scope="row"#FFFFFF>Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut.</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="38" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="38" colspan="4" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">Weblinks...</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>

<tr>
<th height="26" colspan="6" bgcolor="#E9E9E9" scope="row"><h6>Copyright © 2013</h6></th>
</tr>
<tr>
<th height="4" colspan="6" bgcolor="#FFFFFF" scope="row"></th>
</tr>
</table>

CSS:

body,td,th {
font-size:12px;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin-left: 0px;
margin-top: 0px;
margin:0;
padding:0;
background-color: #F5F5F5;
}


h1 {
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size: 25px;
color: #666666;
text-transform:uppercase;
font-weight:normal;

}

h2 {
font-size: 16px;
color: #666666;
}

h6 {
font-size: x-small;
color: #333333;
font-weight:normal;
margin:0;
padding:0;
}

#dot {
height:520px;
}

Answer 1

Fixed! (Kind of). I inserted a transparent image either side of the text and it stopped the tables from forcing outwards. Not the most elegant solution but it's a quick fix that will do for now.