在 html 电子邮件中显示的关闭表格标签答案

【问题标题】：Closing table tags displaying in html email在 html 电子邮件中显示的关闭表格标签
【发布时间】：2013-02-06 15:13:01
【问题描述】：

编辑以添加我的代码。

我为我的企业设计并编写了一个新的 html 电子邮件模板，我 99.99% 确信我的所有表格标签都已正确关闭，但是当我在 Outlook 2003 中收到电子邮件时，有（两个）随机关闭和标签。我已经通过 W3Cs 验证器运行了电子邮件的在线版本，并且一切正常。

以前有人遇到过这种情况吗？或者这是我必须忍受的事情以及 html 电子邮件存在的其他几个问题？

邮件结果可以在here找到。

我的代码：

<!-- Main holding table -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#350d03">
    <tr><!-- Main holding table row -->
        <td><!-- Main holding table data -->
            <!-- Header table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff" align="center">
                <tr><!-- Spacer row -->
                    <td height="30" width="600"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td width="600" align="center"><a href="http://www.example.co.uk" target="_blank"><img src="linktoimage" alt="Western House Hotel" title="Western House Hotel" border="0" width="312" height="38" /></a></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="600"></td>
                </tr><!-- End spacer row -->
            </table> <!-- End header table -->   
        </td>
    </tr>
    <tr>
        <td>
            <!-- Main image feature table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff" align="center">
                <tr>
                    <td width="600"><img src="linktoimage" alt="Western House Hotel" title="Western House Hotel" width="600" height="340" /></td>
                </tr>
            </table><!-- End main image feature table -->        
        </td>
    </tr>
    <tr>
        <td>
            <!-- Book direct with us table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#210401" align="center">
                <tr><!-- Spacer row -->
                    <td height="10" width="25"></td>
                    <td height="10" width="400"></td>
                    <td height="10" width="150"></td>
                    <td height="10" width="25"></td>
                </tr><!-- End space row -->
                <tr>
                    <td height="10" width="25"></td>
                    <td width="400" valign="middle"><p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; margin: 0px 0px 0px 0px; text-transform: uppercase;">For best available rates <span style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #bb8d09; margin: 0px 0px 0px 0px; text-transform: none;">book direct with us</span></p></td>
                    <td height="10" width="150" align="right"><a href="http://www.example.co.uk" target="_blank"><img src="linktoimage" alt="Visit our website" title="Visit our website" border="0" width="136" height="28" /></a></td>
                    <td height="10" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="10" width="25"></td>
                    <td height="10" width="400"></td>
                    <td height="10" width="150"></td>
                    <td height="10" width="25"></td>
                </tr><!-- End space row -->    
            </table><!-- End book direct with us table --> 
        </td>
    </tr>
    <tr>
        <td>
            <!-- Main content table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff" align="center">
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="25" width="25"></td>
                    <td height="25" width="550" colspan="3" align="center"><img src="linktoimage" alt="Page divide" width="548" height="18" /></td>
                    <td height="25" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="20" width="25"></td>
                    <td height="20" width="265">
                        <!-- Main feature left table -->
                        <table cellspacing="0" cellpadding="0" width="265" bgcolor="#ffffff" align="center">
                            <tr>
                                <td width="265"><p style="font-size: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: bold; color: #350d03; margin: 0px 0px 0px 0px; text-transform: uppercase;">Special Valentines Package!</p></td>
                            </tr>
                            <tr><!-- Spacer row -->
                                <td height="15" width="265"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td width="265"><p style="font-size: 16px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #bb8d09; margin: 0px 0px 0px 0px;">Stay and dine in the beautiful 4 star Western House Hotel between 9th and 17th February for only &pound;139*!</p></td>
                            </tr>  
                            <tr><!-- Spacer row -->
                                <td height="25" width="265"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td width="265" align="left" valign="middle"><a href="http://www.example.co.uk" target="_blank"><img src="linktoimage" alt="Book Now!" title="Book Now!" border="0" width="114" height="27" /></a></td>
                            </tr>      
                        </table><!-- End main feature left table -->        
                    </td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"><img src="linktoimage" alt="Special Valentines Package" title="Special Valentines Package" width="265" height="175" /></td>
                    <td height="20" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="25" width="25"></td>
                    <td height="25" width="550" colspan="3" align="center"><img src="linktoimage" alt="Page divide" width="548" height="18" /></td>
                    <td height="25" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td width="25"></td>
                    <td width="265">
                        <!-- Sub feature table left -->
                        <table cellspacing="0" cellpadding="0" width="265" bgcolor="#ffffff" align="center">
                            <tr>
                                <td width="265"><img src="linktoimage" alt="Mother's Day Treat" title="Mother's Day Treat" width="265" height="140" /></td>
                            </tr>
                            <tr>
                                <td height="15" width="265"></td>
                            </tr>
                            <tr>
                                <td width="265"><p style="font-size: 17px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: bold; color: #350d03; margin: 0px 0px 0px 0px; text-transform: uppercase;">Mother's Day Treat!</p></td>
                            </tr>
                            <tr>
                                <td height="10" width="265"></td>
                            </tr> 
                            <tr>
                                <td width="265"><p style="font-size: 13px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #7a7a7a; margin: 0px 0px 0px 0px;">Treat your mother to a fantastic dinner and a nights stay in the 4 star Western House Hotel for only &pound;139*!</p></td>
                            </tr>
                            <tr>
                                <td height="25" width="265"></td>
                            </tr>   
                            <tr>
                                <td><a href="http://www.example.co.uk" target="_blank"><img src="linktoimage" alt="Book Now!" title="Book Now!" border="0" width="114" height="27" /></a></td>
                            </tr>    
                        </table><!-- End sub feature table left -->        
                    </td>
                    <td width="20"></td>
                    <td width="265">
                    <!-- Sub feature table right -->
                        <table cellspacing="0" cellpadding="0" width="265" bgcolor="#ffffff" align="center">
                            <tr>
                                <td width="265"><img src="linktoimage" alt="Mother's Day Treat" title="Mother's Day Treat" width="265" height="140" /></td>
                            </tr>
                            <tr>
                                <td height="15" width="265"></td>
                            </tr>
                            <tr>
                                <td width="265"><p style="font-size: 17px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: bold; color: #350d03; margin: 0px 0px 0px 0px; text-transform: uppercase;">Easter Special Offer!</p></td>
                            </tr>
                            <tr>
                                <td height="10" width="265"></td>
                            </tr> 
                            <tr>
                                <td width="265"><p style="font-size: 13px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #7a7a7a; margin: 0px 0px 0px 0px;">Stay in the 4 star Western House Hotel for 2 nights for only &pound;135 per night and 3 nights for only &pound;125 per night**!</p></td>
                            </tr>
                            <tr>
                                <td height="25" width="265"></td>
                            </tr>   
                            <tr>
                                <td><a href="http://www.example.co.uk" target="_blank"><img src="linktoimage" alt="Book Now!" title="Book Now!" border="0" width="114" height="27" /></a></td>
                            </tr>    
                        </table><!-- End sub feature table right -->
                    </td>
                    <td width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="25" width="25"></td>
                    <td height="25" width="550" colspan="3" align="center"><img src="linktoimage" alt="Page divide" width="548" height="18" /></td>
                    <td height="25" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="25" width="25"></td>
                    <td height="25" width="550" colspan="3" align="left"><p style="font-size: 13px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: bold; color: #350d03; margin: 0px 0px 0px 0px;">Terms and conditions</p></td>
                    <td height="25" width="25"></td>
                </tr>
                <tr>
                    <td height="25" width="25"></td>
                    <td height="25" width="550" colspan="3" align="left"><p style="font-size: 11px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #7a7a7a; margin: 0px 0px 0px 0px;">* Based on two guests sharing. ** Per room per night on a dinner, bed and breakfast basis, based on two guests sharing. Subject to availability. Upgrades available.</p></td>
                    <td height="25" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->                   
            </table><!-- End main content table -->                                     
        </td><!-- End main holding table data -->
    </tr><!-- End main holding table row -->                                  
</table> <!-- End main holding table --> 

<!-- Footer spacer table -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#350d03">
    <tr><!-- Footer spacer table row -->
        <td><!-- Footer spacer table data -->
            <!-- Spacer table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#350d03" align="center">
                <tr><!-- Spacer row -->
                    <td height="30" width="600"></td>
                </tr><!-- End spacer row -->
            </table><!-- End spacer table -->
        </td><!-- End footer spacer table data -->
    </tr><!-- End footer spacer table row -->
</table><!-- End footer spacer table -->

<!-- Footer holding table -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#210401">
    <tr><!-- Footer holding table row -->
        <td><!-- Footer holding table data -->
            <!-- Footer table -->
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#210401" align="center">
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="30" width="25"></td>
                    <td height="30" width="265">
                        <!-- Connect table -->
                        <table cellspacing="0" cellpadding="0" width="265" bgcolor="#210401" align="center">    
                            <tr>
                                <td width="265" colspan="3"><p style="font-size: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #bb8d09; margin: 0px 0px 0px 0px;">Connect with Us</p></td>
                            </tr> 
                            <tr><!-- Spacer row -->
                                <td height="20" width="25"></td>
                                <td height="20" width="15"></td>
                                <td height="20" width="225"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td width="25"><img src="linktoimage" alt="Find us on Facebook" title="Find us on Facebook" width="25" height="25" /></td>
                                <td width="15"></td>
                                <td width="225"><p style="font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; margin: 0px 0px 0px 0px;"><a href="http://www.example.co.uk" target="_blank" title="Find us on Facebook" style="color: #ffffff; text-decoration: none;">facebook.com/westernhousehotel</a></p></td>
                            </tr> 
                            <tr><!-- Spacer row -->
                                <td height="10" width="25"></td>
                                <td height="10" width="15"></td>
                                <td height="10" width="225"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td width="25"><img src="http://www.example.co.uk" alt="Follow us on Twitter" title="Follow us on Twitter" width="25" height="25" /></td>
                                <td width="15"></td>
                                <td width="225"><p style="font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; margin: 0px 0px 0px 0px;"><a href="http://www.example.co.uk" target="_blank" title="Follow us on Twitter" style="color: #ffffff; text-decoration: none;">twitter.com/westernhouseayr</a></p></td>
                            </tr> 
                        </table><!-- End connect table -->  
                    </td>
                    <td height="30" width="20"></td>
                    <td height="30" width="265">
                    <!-- Connect table -->
                        <table cellspacing="0" cellpadding="0" width="265" bgcolor="#210401" align="center">    
                            <tr>
                                <td width="265" colspan="3"><p style="font-size: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #bb8d09; margin: 0px 0px 0px 0px;">Contact Us</p></td>
                            </tr> 
                            <tr><!-- Spacer row -->
                                <td height="20" width="25"></td>
                                <td height="20" width="15"></td>
                                <td height="20" width="225"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td height="25" width="225" colspan="3"><p style="font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; margin: 0px 0px 0px 0px;">01292 294990</p></td>
                            </tr> 
                            <tr><!-- Spacer row -->
                                <td height="10" width="25"></td>
                                <td height="10" width="15"></td>
                                <td height="10" width="225"></td>
                            </tr><!-- End spacer row -->
                            <tr>
                                <td height="25" width="225" colspan="3"><p style="font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; margin: 0px 0px 0px 0px;"><a href="http://www.example.co.uk" target="_blank" title="Send us an Email" style="color: #ffffff; text-decoration: none;">info@westernhousehotel.co.uk</a></p></td>
                            </tr> 
                        </table><!-- End connect table -->
                    </td>
                    <td height="30" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="30" width="25"></td>
                    <td height="30" width="265"></td>
                    <td height="30" width="20"></td>
                    <td height="30" width="265"></td>
                    <td height="30" width="25"></td>
                </tr><!-- End spacer row -->
                <tr>
                    <td height="20" width="25"></td>
                    <td height="20" width="500" colspan="3" align="center"><p style="font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; margin: 0px 0px 0px 0px;">Western House Hotel | Craigie Road | Ayr, South Ayrshire | Scotland | KA7 0HA</p></td>
                    <td height="20" width="25"></td>
                </tr>
                <tr><!-- Spacer row -->
                    <td height="20" width="25"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="20"></td>
                    <td height="20" width="265"></td>
                    <td height="20" width="25"></td>
                </tr><!-- End spacer row -->
            </table><!-- End footer table -->
        </td><!-- End footer holding table data -->
    </tr><!-- End footer holding table row -->
</table><!-- End footer holding table -->                       


</body>
</html>

谢谢。

【问题讨论】：

能否提供您的代码。
需要代码。从来没有发生过，所以它就在某个地方
好的，谢谢。明天我回去工作时会发布我的代码。不过我会警告你，它很长！
很奇怪。我使用 W3C HTML Validator 检查了代码是否有错误，它没有错误地通过。
是的，我也检查了电子邮件在线版本的代码，也没有出错，这就是我难过的原因。感谢您的检查。

标签： html-email outlook-2003

【解决方案1】：

您需要在 Outlook 中查看页面的代码。它会很乱，但它至少会告诉你为什么</td>'s 漂浮在那里。那里可能有一个混乱的跨度或其他东西。

您只需排除故障，尝试以下方法：

设置您的字符集<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
试试<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">doctag

如果这不起作用，请尝试：

删除 <p> 标记并使用出现问题的 <br> 来查看 Outlook 处理是否不同
尝试缩短您的电子邮件，让错误部分保持不变，看看它是否与您的代码长度有关

并不是说这些事情总是必要的，但您需要隔离 Outlook“不喜欢”的内容，即使按照正常的 Web 标准，该解决方案看起来很愚蠢。

【讨论】：

按照这一思路，Outlook 在“空”表格单元格方面存在问题。如果声明了宽度和高度，但没有内容，它可能会将单元格视为“无”项。在网页中这可能不是问题，但是使用 Word 作为渲染引擎（感谢 Microsoft！）没有任何单元格合并到它们的父级中，这可能是这些问题出现的地方。--如果您无法使用上述方法，开始在每个空的 td 中添加不间断空格 &nbsp。

【解决方案2】：

您是否尝试过仅发送正文的内部 html？我只是将其添加为评论，但显然在我获得更高的声誉之前我不能。我尝试发送内部 html，但通过 Powershell 没有任何多余的标签。你到底是怎么寄的？

【讨论】：

我发送的电子邮件版本没有文档类型等，而是在线版本，例如“在浏览器中查看”选项是一个普通的 HTML 文档。我们通过专门制作的 crm（内置 Sugar）发送它。我以前从来没有遇到过任何问题，所以我很困惑为什么我会看到不应该存在的结束标签。谢谢。
这不能是所有的 html，否则你会错过开始的 html 和 body 标签。您是否尝试过发送正文内部 html？
是的，我试过了。我不知道可发送电子邮件的版本需要 html 和 body 标签？我有两个版本，1）您在上面看到的内容是通过我们的 crm 发送的。 2) 一个完整网页的在线版本（带有 html 和 body 标签），用于“在浏览器中查看此电子邮件”链接。谢谢。
</body> </html> 需要从发送到 crm 的 html 中删除。发送 html 电子邮件时，我不提供 html 和 body 标签，只提供内部 html（<body> </body> 之间的所有内容）。