这是我的代码在浏览器中的外观,以及我希望它的外观:
这就是在 Outlook 中查看时发生的情况;橙色横幅位于上方的表格中,但与下方表格的宽度相同,但它向外延伸了宽度:
HTML:
<table width="700" border="0" cellspacing="0">
<tr>
<th width="60" height="290" rowspan="6" bgcolor="#FFFFFF" scope="row"> </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"> </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"> </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"> </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"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </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> </th>
</tr>
<tr>
<th height="38" bgcolor="#FFFFFF" scope="row"> </th>
<th height="38" colspan="4" bgcolor="#FFFFFF" scope="row"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row"> </th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">Weblinks...</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row"> </th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </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;
}