Outlook 2010无法识别HTML表格

Question

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>

Answer 1

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

另外，什么是styleclass？我以前从未见过这种情况，我假设它是一个无效的标签。如果元素包含无效的定义，则某些客户端不会呈现该元素。

使用cellspacing、cellpadding、height、width和空单元格而不是填充。您可以通过将空单元格加倍来防止其折叠。空表中的空表表示父表不为空。

这可以用于任何地方，否则您可以使用透明图像间隔。

<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>