我正在尝试创建一个用于电子邮件capmaign的“证书”。我们正在努力保持与Outlook 2007的兼容性，这限制了我们使用background属性来加载单个图片以显示在文本后面。
我已将我的边框切成4块（左，上，右，下）并将它们放在跨越的列和行中，但无法使它们正确排列。基于此代码的任何建议？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Special Offer from Toyota/Scion of Clifton Park</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: italic;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style8 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #666666;
}
.style9 {color: #666666}
.style10 {color: #000000}
}
-->
</style>
</head>
<body>
<table width="610" height="984" border="0" cellspacing="0" cellpadding="0">
<tr></tr>
<tr>
<td width="74" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
<td colspan="5"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="461" height="171" align="left" /></td>
<td width="87" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="90"> </td>
<td width="90"> </td>
<td width="90"> </td>
<td width="90"> </td>
<td width="91"> </td>
</tr>
<tr>
<td colspan="5"><div align="center">
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"> </p>
<p class="style4"><span class="style8"><br/>
</span><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="466" height="63" align="top" /><br />
</p>
</div></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：1)
感谢您的所有建议 - 非常好的帮助！如果你好奇的话，这就是我最终的结果。浏览器中的预览错误，但在接收端的电子邮件客户端中正确显示。我成功测试了Gmail，Outlook 2000/2007，Yahoo（旧/新），Hotmail，Thunderbird。
还在电子邮件http://www.campaignmonitor.com/css/中找到了CSS的CSS指南 （如果发送到Outlook 2007/2010和Gmail客户端，基本上避免使用它）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: #FFF;
text-align: left;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
body table tr td {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>
<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>
<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr>
<tr>
<td>
<p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
<p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
<p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
<ul>
<li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
power steering fluid, and coolant level</div></li>
<li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
<li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
<li><div align="left">Inspect wiper blades</div></li>
<li><div align="left">Replace engine oil and filter</div></li>
<li><div align="left">Reset maintenance indicator </div></li>
</font>
</ul>
<p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for your vehicle purchase. We have taken time in caring for and preparing your vehicle before your purchase and would like to continue that same care throughout your ownership. I personally invite you to take advantage of the above offer for your first full Toyota scheduled maintenance in our Award winning service department. The initial "break in" inspection is crucial to the safety and longevity of your new investment.<br /><br />
Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>
<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：0)
所有中间列单元格都具有可变高度（不固定），因此浏览器只会尝试将其调整为最佳效果。
您需要使用样式属性来修复它们的高度：
<td style="height: 171px;">
那将是包含顶部图像的单元格，因为图像的高度为171px。
另外：中心需要9行吗？或者你是否尝试过定位边界？
编辑：或者Re0sless说的话。 ; d
答案 2 :(得分：0)
您可以将 valign =“top”和 valign =“bottom”添加到表格顶部和底部的中心单元格中。
像这样：<tr>
<td width="74" rowspan="11"><img src="left_image2.jpg" width="70" height="984" align="top" /></td>
<td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
<td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0 width="71" height="984" align="bottom" /></td>
</tr>
......
<tr valign="bottom">
答案 3 :(得分：0)
我的建议：
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
<td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
<td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
<tr>
<td>Put all your content in here.</td>
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
</tr>
</table>
答案 4 :(得分：0)
...有几种方法可以解决这个问题，其中一种方法（如果它可以在Outlook中工作并在所有其他邮件代理中显示）可以将顶部和底部边框图像绝对放置在单元格中。
其次，我可能会对表进行重组。使顶部和底部边框跨越所有列，就像它们从顶部和底部盖住桌子并从那里取下它一样。
答案 5 :(得分：0)
2。 剪切一个新图像用于底部，包括整个表格的左，中，右列，并将其放入一个colspan =“7”
的单元格中答案 6 :(得分：0)
在应用任何样式之前，请确保reset all your CSS以使边距和填充为0。
答案 7 :(得分：0)
在针对我自己的“使用图像作为边界的HTML表格”的要求搜索这个问题后，我找到了一个我没有在其他地方看到的解决方案。它在tbody，tr和td上使用单独的背景来实现所需的效果。这是IE8（CSS2）兼容的解决方案：
table.table tbody {
background-color: #dddddd;
}
table.table tbody tr td, table.table thead tr th {
background-image: url('some-image.png');
background-position: right;
background-repeat: repeat-y;
}
table.table tbody tr {
background-image: url('some-image.png');
background-position: top;
background-repeat: repeat-x;
}
CSS3中的解决方案是使用多个背景：
table.table tbody tr td, table.table thead tr th {
background-image: url('some-image.png'), url('some-image.png');
background-position: top, right;
background-repeat: repeat-x, repeat-y;
}
希望这有助于将来。