0
我創建了一個html電子郵件，需要圖片「clipboard3.png」在圖片的背景中顯示，所有的表格內容應該位於圖片的頂部。現在，沒有圖像，表格內容與中心對齊，但是當我將圖像添加到正文中時，表格和內容都被推到左側。HTML電子郵件表與背景圖片對齊
我該如何解決這個問題？我試圖「對齊：中心」等所有表，但似乎沒有工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Classic</title>
<style type="text/css">
a:hover { text-decoration: underline !important; }
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" style="background:url(clipboard3.png); background-repeat: no-repeat; height:100px; width: 684px;">
<!--100% body table-->
<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#ffffff" style="margin: 0px auto";>
<tr>
<td align="center">
<!--top links-->
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center";>
<tr>
<td valign="middle" align="center" height="45">
<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
Is this email not displaying correctly? <webversion style="color: #c88b04; text-decoration: none;" href="#">Try the web version.</webversion></p></td>
</tr>
</table>
<!--header-->
<table style="background-color: #fffdf9;" width="684" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="173">
<!--ribbon-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="120" width="45"></td>
<td background="#c88b04" valign="top" bgcolor="" height="120" width="80"><img src="dateRibbon2.png" width="81" height="121">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" align="center" height="35">
<p style="font-size: 14px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;">ISSUE</p>
</td>
</tr>
<tr>
<td valign="top" align="center">
<p style="font-size: 36px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;">31</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--ribbon-->
</td>
<td valign="middle" width="493"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="60">
</td>
</tr>
<tr>
<td>
<h1 style="color: #333; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, 'Times New Roman', Times, serif">FirstPoint USA <em>Newsletter</em></h1>
</td>
<td><img src="FPFinger.png" width="102" height="186"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
</table>
<!--date-->
<table border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table><!--/date-->
</td>
<td width="18"></td>
</tr>
</table>
</td>
</tr>
</table><!--/header-->
<!--email container-->
<table bgcolor="#fffdf9" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
<tr>
<td >
<!--email content-->
<table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
<tr>
<td>
<!--section 1-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center">
<img src="images/img1.jpg" alt="image dsc" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="622" />
<!--line break-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" height="50"><img src="lineBreak.png" width="600" height="1"></td>
</tr>
</table><!--/line break-->
<h1 style="font-size: 36px; font-weight: normal; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; margin-top: 0px; margin-bottom: 20px;">Lorem ipsum <em>dolor sit amet</em></h1>
<p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a> a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</p>
</td>
</tr>
</table><!--/section 1-->
<!--line break-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td height="72"><img src="lineBreak.png" width="600" height="1"></td>
</tr>
</table><!--/line break-->
<!--section 2-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
<tr>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img2.jpg" height="108" alt="img2" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="color: #333333; font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img3.jpg" height="108" alt="img3" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img4.jpg" height="108" alt="img4" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img5.jpg" height="108" alt="img5" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!--/section 2-->
<!--section 3-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<!--line break--><!--/line break--><!--line break--><!--/line break-->
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
</tr>
</table>
<!--line break--><!--/line break--><!--line break--><!--/line break-->
</td>
</tr>
</table><!--/section 3-->
</td>
</tr>
</table><!--/email content-->
</td>
</tr>
</table><!--/email container-->
<!--footer-->
<table width="600" border="0" align="center" cellpadding="30" cellspacing="0">
<tr>
<td valign="top">
<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
You’re receiving this newsletter because you’ve subscribed to our newsletter<br>
Not interested anymore? <unsubscribe style="color: #bc1f31; text-decoration: none;" href="#">Unsubscribe instantly.</unsubscribe></p>
</td>
<td valign="top"><p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">145 North Street, Glasgow, G*****</p></td>
</tr>
<tr>
<td height="30"></td>
<td height="30"></td>
</tr>
</table><!--/footer-->
</td>
</tr>
</table><!--/100% body table-->
</body>
</html>
您正在以非常不尋常的方式嵌套'<\table>'標籤。你應該使用'rowspan'和'colspan'，而不是像這樣嵌套表。 – Sablefoste 2012-08-14 13:27:34
背景圖像，不管信不信，在Outlook 2010和2007中都不支持... – danwellman 2012-08-14 13:34:53
另一個評論;您正在使用表格進行格式化，而不是表格數據。而不是使用表格單元格，您應該使用'div'和'span'，並使用適當的CSS進行對齊。這是最佳做法。 – Sablefoste 2012-08-14 13:36:27