使用JPG图像作为边框的HTML表格 [英] HTML Tables using JPG images as borders
本文介绍了使用JPG图像作为边框的HTML表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个用于电子邮件capmaign的证书。我们正在努力保持与Outlook 2007的兼容性，这限制了我们使用background属性来加载单个图片以显示在文本后面。
I'm trying to create a "certificate" for use in an email capmaign. We are trying to maintain compatability with Outlook 2007 and that limits us from using the background property to just load a single picture to display behind the text.
我切碎了我的边界分为4个部分（左，上，右，下）并将它们放在跨越的列和行中，但不能使它们正确对齐。基于此代码的任何建议？
I've chopped my borders up in 4 pieces (left, top, right, bottom) and placed them in spanned columns and rows but cannot get them to line up properly. Any suggestions based on this code?
<!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>
推荐答案
感谢您的所有建议 - 非常好的帮助！如果你好奇的话，这就是我最终的结果。浏览器中的预览错误，但在接收端的电子邮件客户端中正确显示。我成功测试了Gmail，Outlook 2000/2007，Yahoo（旧/新），Hotmail，Thunderbird。
Thanks for all your suggestions - GREAT HELP! Here's what I ended up with if you are curious. Previews wrong in browsers, but displays correctly in email clients on the receiving end. I tested Gmail, Outlook 2000/2007, Yahoo (old/new), Hotmail, Thunderbird successfully.
此外，我还在电子邮件中找到了CSS指南 http://www.campaignmonitor.com/css/
（如果发送到Outlook 2007/2010，基本上可以避免使用它和Gmail客户端）
Also found this guide to CSS in emails http://www.campaignmonitor.com/css/ (basically avoid it if sending to Outlook 2007/2010 and Gmail clients)
<!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>
这篇关于使用JPG图像作为边框的HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
