html - 在 HTML 电子邮件中设置嵌套表格的样式

Question

我有一个使用嵌套表格的 HTML 电子邮件模板。我正在努力获得最大的电子邮件客户端支持。我想知道如何使用内联样式，我应该始终将其应用于最低级别 td 还是可以将样式应用于父级 table 或 td?

例如，我知道在浏览器中，以下两个都可以工作:

<table border="0" cellpadding="20" cellspacing="0" bg-color="#eeeeee" width="100%">
  <tr>
    <td valign="top" style="font-size:12px; line-height:16px;">

      <table border="0" cellpadding="0" cellspacing"0" width="600">
        <tr>
          <td valign="top">
            Content 1
          </td>
          <td valign="top">
            Content 1
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

或者

<table border="0" cellpadding="20" cellspacing="0" bg-color="#eeeeee" width="100%">
  <tr>
    <td valign="top">

      <table border="0" cellpadding="0" cellspacing"0" width="600">
        <tr>
          <td valign="top" style="font-size:12px; line-height:16px;">
            Content 1
          </td>
          <td valign="top" style="font-size:12px; line-height:16px;">
            Content 1
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

这里的区别在于内联样式。第一个示例避免了重复并且更易于维护，而不是将内联样式应用于多个子 td。但是，某些电子邮件客户端是否会为子 table、tr 或 td 应用新样式？

Answer 1

样式放置得越低，您就越安全。许多电子邮件客户端已经添加了自己的样式。例如，如果他们有一个带有

的 css 行

td {
   font-size:14px;
}

这可能会破坏您想要的样式。