outlook - 添加额外间距的 MS Outlook 电子邮件模板

标签 outlook html-table html-email

我为我一直在为我的公司制作的电子邮件制作了一个模板。唯一的问题是,任何时候从 MS Office 转发它都会在模板中的表格之间添加间距。有什么办法可以阻止这种情况发生吗?仅当电子邮件刚从 Outlook 到达时,只有在转发时,它才会出现。那么我可以添加任何代码来阻止这种情况吗?

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <title>Email Template Version 3</title>
    <style type="text/css">
        /* Base Table Resets */
        body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
        table { border-spacing: 0; }
        table td { border-collapse: collapse; }
    </style>
</head>

<body>
    <!-- Main Email Setting (Background Color) -->
    <table cellpadding="0" cellspacing="0" class="background" style="background-color: #CCCCCC; background-repeat: repeat-x" width="100%">
        <tr>
            <td align="center" valign="top">
                <!-- Super Top Header -->
                <table cellpadding="0" cellspacing="0" width="650">
                    <tr>
                        <td align="left" height="30" width="325"><span style="font-size: 12px; font-weight: normal; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif; text-decoration: none;">July 31st, 2013</span></td>

                        <td align="right" height="30" width="325"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Having trouble viewing this email? <a href="#" style="color: #0075AA; text-decoration: none;">Click Here!</a></span></td>
                    </tr>
                </table><!-- /Super Top Header -->

                <!-- Header -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <!-- Left Corner -->
                        <td width="15"><img alt="Left Corner" border="0" height="110" src="http://partspro.com/email/img/corners/tlcorner.gif" width="15" /></td>

                        <td align="left" valign="middle" width="620">
                            <table cellpadding="0" cellspacing="0" width="620">
                                <tr>
                                    <!-- Parts Pro Logo -->
                                    <td width="184">
                                        <a href="http://www.partspro.com"><img alt="Parts Pro Logo" border="0" height="76" src="http://partspro.com/email/img/logos/partspro.gif" width="184" /></a>
                                    </td>

                                    <td width="3">&nbsp;</td>
                                    <!-- Newswire Logo -->
                                    <td width="345"><img alt="Parts Pro Newswire" border="0" height="76" src="http://partspro.com/email/img/logos/newswire.gif" width="345" /></td>

                                    <td width="3">&nbsp;</td>

                                    <td>
                                        <!-- Social Media Top Icons -->
                                        <table border="0" style="padding-left: 1px;" width="83">
                                            <tr>
                                                <!-- Facebook -->
                                                <td>
                                                    <a href="https://www.facebook.com/PartsProCenters" target="_blank"><img alt="Facebook" border="0" height="37" src="http://partspro.com/email/img/icons/facebook.gif" width="39" /></a>
                                                </td>

                                                <!-- Linked In -->
                                                <td>
                                                    <a href="http://www.linkedin.com/groups/Parts-Pro-Performance-Centers-4867941" target="_blank"><img alt="LinkedIn" border="0" height="37" src="http://partspro.com/email/img/icons/linkedin.gif" width="39" /></a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <!-- Twitter -->
                                                <td>
                                                    <a href="https://twitter.com/PartsProPerform" target="_blank"><img alt="Twitter" border="0" height="37" src="http://partspro.com/email/img/icons/twitter.gif" width="39" /></a>
                                                </td>

                                                <!-- Youtube -->
                                                <td>
                                                    <a href="http://www.youtube.com/user/PartsProCenters" target="_blank"><img alt="YouTube" border="0" height="37" src="http://partspro.com/email/img/icons/youtube.gif" width="39" /></a>
                                                </td>
                                            </tr>
                                        </table><!-- /Social Media Top Icons -->
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <!-- Right Corner -->
                        <td width="15"><img alt="Right Corner" border="0" height="110" src="http://partspro.com/email/img/corners/trcorner.gif" width="15" /></td>
                    </tr>
                </table><!-- /Header -->

                <!-- Featured Image Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; padding: 0 15px;" width="620">
                    <tr>
                        <!-- Featured Image for the Email -->
                        <td align="center"><img alt="Featured Image" height="200" src="http://partspro.com/email/img/headers/header.png" width="620" /></td>
                    </tr>
                </table><!-- /Featured Image Table -->

                <!-- Main Body Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;" width="650">
                    <tr>
                        <!-- Feature 1 -->
                        <td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 15px;" valign="top" width="420">
                            <table border="0" cellpadding="0" cellspacing="0" width="420">
                                <tr>
                                    <!-- Feature 1 Image -->
                                    <td>
                                        <img alt="News Feature 1" border="0" height="260" src="http://partspro.com/email/img/features/feature1.png" width="420" /><br /><br />
                                    </td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Header -->
                                    <td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">Celebrate 75 Years of Edelbrock!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Text -->
                                    <td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Commemorate Edelbrock's 75th Anniversary in style with these limited edition accessories. The unique air cleaner and valve covers are made of die-cast aluminum, which is then polished to a mirror-like finish and complimented with black anodized aluminum inserts that feature a laser etched design. Want a closer look? Click the link below!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Button -->

                                    <td align="right">
                                        <a href="#"><img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" /></a>
                                    </td>
                                </tr>
                            </table><!-- Feature 2 -->

                            <table border="0" cellpadding="0" cellspacing="0" width="420">
                                <tr>
                                    <!-- Feature 2 (Image) -->
                                    <td><br />
                                        <img alt="News Feature 2" border="0" height="260" src="http://partspro.com/email/img/features/feature2.png" width="420" /><br /><br />
                                    </td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Header -->
                                    <td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">New Intake for 2012-13 Camaro!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Text -->
                                    <td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Airaid's new MXP-Series Cold Air Intake system ups the ante for the 2012-13 V6 Camaro with an additional 14 horsepower and 13 lb-ft of torque, with no aftermarket tuning required! Did we also mention the intake is made in the USA and backed by Airaid's "No Hassle" warranty? Well, it is. So what are you waiting for. Get your order in today! Want some more information? Click the link below!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Button -->
                                    <td align="right" width=" 5px">
                                        <a href="#"><img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <!-- Line Seperator Down the Right Side -->
                        <td valign="middle" width="1"><img alt="Divider" height="857" src="http://partspro.com/email/img/seperator.gif" width="1" /></td>

                        <!-- Right Side Bar -->
                        <td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 14px;" valign="top" width="169">
                            <table cellpadding="0" cellspacing="0" width="169">
                                <tr>
                                    <!-- Right Side Bar Text 1 -->
                                    <td width="169">
                                    <!-- Join the Team -->
                                     <span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>Join the Team!</strong><br />
                                    If you are a local Performance Automotive Aftermarket retailer, you should take a look at all the marketing programs that we have developed to help you sell more products.<br /><br />

                                    <!-- Visit our Site -->
                                     Visit our site at:&nbsp;<br />
                                    <a href="http://www.partspro.com" style="color: #0075AA; text-decoration:none;">www.partspro.com</a> and give us a call.<br /><br />

                                    <!-- Contact -->
                                     A professional account representative is ready to help!<br />
                                    <strong>Phone:</strong>&nbsp;(423) 282-0211<br />
                                    <strong>Email:</strong> <a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345e5146464d4774445546404744465b1a575b59" rel="noreferrer noopener nofollow">[email protected]</a>?subject=About%20the%20Parts%20Pro%20NewsWire" style="color:#0075AA; text-decoration:none;"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78121d0a0a010b3808190a0c0b080a17561b1715" rel="noreferrer noopener nofollow">[email protected]</a></a><br /><br /><br />

                                    <!-- What of the Week -->
                                     <img alt="What of the Week?!" border="0" height="92" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek-logo.gif" style="padding: 0;" width="170" /> Right before this, he clothslined the guy at the drive-thru at Wendy's....<br />
                                    <a href="http://www.youtube.com/watch?v=DpgrTyrBvlA"><img alt="What?! Of the Week Youtube Image" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek.gif" style="padding: 10px 0 0 0;" /></a><br /><br />

                                    <!-- What of the Week (Image & Link) -->
                                     <a href="http://www.youtube.com/watch?v=DpgrTyrBvlA"><img alt="Watch It!" border="0" height="32" src="http://partspro.com/email/img/buttons/watch.gif" style="padding: 0;" width="170" /></a>

                                     <!-- Ad Space (Image & Link) -->
                                     <a href="http://www.totaltruckcenters.com"><img alt="Total Truck Centers" border="0" height="170" src="http://partspro.com/email/img/banners/extraspace.gif" style="padding: 0;" width="170" /></a></span></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Main Body Table -->

                <!-- Gallary of 6 Table -->
                <table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <td align="center">
                            <table cellpadding="0" cellspacing="0" width="610"></table>

                            <table border="0" cellpadding="0" cellspacing="0" width="610">
                                <tr>
                                    <!-- Minifeature 1 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 1" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures1.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 2 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 2" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures2.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 3 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 3" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures3.gif" width="200" /></a>
                                    </td>
                                </tr>

                                <!-- Minifeature 1-3 Headings -->
                                <tr>
                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>
                                </tr>

                                <!-- Minifeature 1-3 Spacing -->
                                <tr>
                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>
                                </tr>

                                <tr>
                                    <!-- Minifeature 4 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 4" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures4.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 5 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 5" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures5.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 6 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 6" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures6.gif" width="200" /></a>
                                    </td>
                                </tr>

                                <!-- Minifeature 4-5 Headings -->
                                <tr>
                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Gallary of 6 Table -->

                <!-- Rebates Banner Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <!-- Rebates Banner (Image & Link) -->
                        <td align="center">
                            <a href="http://partspro.com/cms/rebates/"><img alt="Rebates Banner" height="100" src="http://partspro.com/email/img/banners/rebatesbanner.gif" width="650" /></a>
                        </td>
                    </tr>
                </table><!-- /Rebates Banner Table -->

                <!-- Footer Table -->
                <table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <td width="425">
                            <table border="0" width="420">
                                <tr>
                                    <!-- AAM Logo -->
                                    <td style="padding-right: 5px;"><img alt="AAM Logo" border="0" height="77" src="http://partspro.com/email/img/logos/aam.gif" width="122" /></td>

                                    <!-- Copyright -->
                                    <td><span style="font-size: 12px; color:rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Copyright © 2013 AAM Group. All Rights Reserved.<br />
                                    <!-- Address -->
                                     198 Industrial Park Road. Piney Flats, TN 37686</span><br /><br />

                                    <!-- Subscribe, Forward, Unsubscribe -->
                                     <span style="font-size: 12px; color: rgb(000, 000, 000); font-family:Helvetica,Arial,sans-serif;"><a href="#" style="color:#0075AA; text-decoration: none;">Forward</a> l <a href="#" style="color: #0075AA; text-decoration: none;">Subscribe</a> l <a href="#" style="color: #0075AA; text-decoration: none;">Unsubscribe</a></span></td>
                                </tr>
                            </table>
                        </td>

                        <!-- Social Media Mini Links -->
                        <td align="right" style="background-color: #FFFFFF" valign="bottom" width="125">
                            <table cellpadding="5" cellspacing="0" width="155">
                                <tr>
                                    <!-- Facebook -->
                                    <td align="right" width="170">
                                        <a href="https://www.facebook.com/PartsProCenters" target="_blank"><img alt="Facebook" border="0" height="32" src="http://partspro.com/email/img/icons/facebook.gif" width="32" /></a>
                                    </td>

                                    <!-- LinkedIn -->
                                    <td align="right" width="170">
                                        <a href="http://www.linkedin.com/groups/Parts-Pro-Performance-Centers-4867941" target="_blank"><img alt="LinkedIn" border="0" height="32" src="http://partspro.com/email/img/icons/linkedin.gif" width="32" /></a>
                                    </td>

                                    <!-- Twitter -->
                                    <td align="right" width="170">
                                        <a href="https://twitter.com/PartsProPerform" target="_blank"><img alt="Twitter" border="0" height="32" src="http://partspro.com/email/img/icons/twitter.gif" width="32" /></a>
                                    </td>

                                    <!-- Youtube -->
                                    <td align="right" width="170">
                                        <a href="http://www.youtube.com/user/PartsProCenters" target="_blank"><img alt="YouTube" border="0" height="32" src="http://partspro.com/email/img/icons/youtube.gif" width="32" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Footer Table -->

                <!-- Shadow at the bottm -->
                <table cellpadding="0" cellspacing="0" style="line-height: 0;" width="650">
                    <tr height="10">
                        <td height="10"><img border="0" height="10" src="http://partspro.com/email/img/shadow.png" width="650" /></td>
                    </tr>

                    <tr>
                        <td height="10"></td>
                    </tr>
                </table><!-- /Shadow at the bottm -->

                <!-- Who Sent This Email -->
                <table cellpadding="0" cellspacing="0" width="650">
                    <tr>
                        <td align="center" width="310"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">This email was sent to you from: <a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4441404f5a464f40486e5e4f5c5a5d5e5c41004d4143" rel="noreferrer noopener nofollow">[email protected]</a>" style="color: #3185c4; text-decoration:none;"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6560616e7b676e61694f7f6e7d7b7c7f7d60216c6062" rel="noreferrer noopener nofollow">[email protected]</a></a></span><br />
                        <br /></td>
                    </tr>
                </table><!-- /Who Sent This Email -->
            </td>
        </tr>
    </table>
</body>
</html>

最佳答案

抱歉,但无能为力。电子邮件是一个很难在初始代码中正确编写的游戏,而 Outlook 在初始接收时会添加大量代码,这些代码会在转发过程中传递。您是否尝试过转发其他公司的 HTML 新闻通讯?我没有在不破坏所有表格的情况下完成任何一次操作,尤其是 Outlook Web 应用程序中的表格。

关于outlook - 添加额外间距的 MS Outlook 电子邮件模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18109812/

相关文章:

html - 是否可以在电子邮件 html 中使用多种重量的网络字体? (或 2 种不同的字体?)

html - Eloqua 正在为我的电子邮件 CSS 添加额外的句号

vba - 通过电子邮件发送拆分工作簿的每个新工作簿

r - 有没有办法使用 R、RDCOMClient 查找/读取发件人电子邮件地址

PHP while循环,表格行

PHP:MySQL 到表

regex - 解析不同列数的 HTML 表格

java - 最佳实践 - 发送 javamail mime 多部分电子邮件 - 和 gmail

java - 使用 JAVA 访问 MS Outlook

ruby-on-rails - 不使用 Outlook 发送实际的 Outlook session 请求