Outlook 2010 无法识别 HTML 表格答案

【问题标题】：Outlook 2010 not recognizing HTML tableOutlook 2010 无法识别 HTML 表格
【发布时间】：2014-09-11 20:35:34
【问题描述】：

Outlook 2010 似乎无法识别我创建的时事通讯电子邮件中的 HTML 表格。它在 Gmail 中以所有正确的间距/填充完美显示，但在 Outlook 中，它只是将图像大小并排浮动在一长串令人困惑的图像中，而不是在表格中整齐地排列。我对 HTML 有点陌生，所以有人知道我的表格是否有替代品，或者我的代码是否有问题。抱歉，其他类似的问题都没有真正回答我的问题

代码如下：

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="textEdit">
   <tbody>
      <tr>
        <td style="padding: 0px; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; color: #595959;" valign="top" styleclass=" style_MainText">
            <div style="padding: 0px; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; color: #595959;" valign="top" styleclass=" style_MainText">
                <img style="display: block; padding: 20px 20px 10px 20px;" height="200" vspace="0" border="0" name="ACCOUNT.IMAGE.888" hspace="0" width="624" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/888.png" align="left">
                <img style="display: block; padding: 10px 0px 10px 20px;" height="624" vspace="0" border="0" name="ACCOUNT.IMAGE.889" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/889.png" align="left">
                <img style="display: block; padding: 10px 20px 10px 0px;" height="302" vspace="0" border="0" name="ACCOUNT.IMAGE.874" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/874.png" align="right">
                <img style="display: block; padding: 10px 20px 10px 0px;" height="302" vspace="0" name="ACCOUNT.IMAGE.881" border="0" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/881.png" align="right">
                <img style="display: block; padding: 10px 0px 10px 20px;" height="302" vspace="0" name="ACCOUNT.IMAGE.882" border="0" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/882.png" align="left">
                <img style="display: block; padding: 10px 20px 10px 0px;" height="302" vspace="0" name="ACCOUNT.IMAGE.873" border="0" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/873.png" align="right">
                <img style="display: block; padding: 10px 0px 20px 20px;" height="302" vspace="0" name="ACCOUNT.IMAGE.884" border="0" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/884.png" align="left">
                <img style="display: block; padding: 10px 20px 20px 0px;" height="302" vspace="0" name="ACCOUNT.IMAGE.886" border="0" hspace="0" width="302" src="https://origin.ih.constantcontact.com/fs159/1111545680481/img/886.png" align="right">
            </div>
        </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

这可能对你有帮助。github.com/dcondrey/Email
您的问题是您的布局依赖 1 DIV 而不是表格。你有一行，一列。这几乎不是表格布局。另一个问题是您过于依赖 Outlook 可能不支持的 CSS。人们使用表格的全部原因是缺乏 CSS 支持。
这可能对你有帮助campaignmonitor.com/guides/coding/guidelines

标签： html css outlook

【解决方案1】：

虽然您可以使用此代码改进许多事情，但您应该做的第一件事是删除所有填充样式。当您尝试在 Outlook 中使用填充时，填充会出现问题... Outlook 会将填充复制到每个子元素，而您唯一能做的就是不使用填充。

另外，什么是样式类？我以前从未见过，并假设它是无效标签。如果元素包含无效的定义，某些客户端将不会呈现它。

使用单元格间距、单元格填充、高度、宽度和空单元格代替填充。您可以通过加倍来防止空单元格被折叠。空表中的空表使父表不为空。

这可以用于任何可能使用透明图像间隔的地方。

<table border="0" cellpadding="0" cellspacing="0"><tr><td width="3"><table border="0" cellpadding="0" cellspacing="0"><tr><td>&nbsp;</td></tr></table></td></tr></table>

<!-- same as above properly formatted -->
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="3">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【讨论】：