电子邮件中的 HTML 表格：可能出现什么问题？

如果您在电子邮件行业工作了一段时间，您的电子邮件营销活动可能会遇到许多问题。 从丢失图像到可交付性问题，电子邮件营销充满挑战。 但是，您可能没有考虑过表格（实际代码）可能出现的问题，这是您电子邮件的基础。

不幸的是，HTML 表格有很多问题。 今天，我们想分解一些 HTML 表格中最常见的问题，并为您提供一些提示，以确保您不会在自己的电子邮件中遇到同样的问题。

为什么我们使用表格

首先，快速回顾一下我们为什么使用 HTML 表格来编码电子邮件。 正如我们过去所讨论的，电子邮件营销活动需要他们自己特殊的编码注意事项。 虽然 Web 和电子邮件基于相同的技术（HTML 和 CSS）构建，但电子邮件应用程序并不遵循与 Web 浏览器相同的标准。 每个电子邮件应用程序都有自己的渲染引擎，用于确定支持哪些代码以及如何显示电子邮件。 对我们来说坏消息是所有这些渲染引擎都支持不同的 HTML 标签和 CSS 属性。

因此，我们在很大程度上不能使用网页设计中使用的相同编码原则。 为了确保电子邮件在大多数电子邮件客户端中正确显示，我们必须使用 HTML 表格来创建电子邮件活动的结构。

尽管最近这种情况有所改变，尤其是在去年 Gmail 的重大更新后，一些电子邮件客户端仍然不支持大量 HTML 和 CSS。 最值得注意的是：Microsoft 的 Outlook 系列电子邮件客户端，它们使用 Microsoft Word 作为其渲染引擎。 由于 Outlook 仍然非常受欢迎（目前在我们的电子邮件客户端市场份额跟踪器中排名第 5），如果电子邮件设计人员希望他们的活动能够为订阅者正确显示，他们仍然必须在一定程度上使用表格。

当我们不得不依赖 HTML 表格时，有很多事情可能会出错……

把事情复杂化

我们在使用表格时看到的最常见问题之一是布局过于复杂。 对于几年未更新的旧电子邮件模板尤其如此。

直到最近，大多数电子邮件都是用大量表格构建的。 表中表中的表——这种做法称为嵌套。

当您在另一个表中嵌套多个表时，您可能会在代码中引入问题。 在移动事物时，很容易不小心将表格放在错误的位置或粘贴到重要的 HTML 标签上。 对于某些客户（看着您，Lotus Notes），当您将表格嵌套得太深时，您会发现电子邮件的渲染效果很差。 正是出于这个原因，我们建议使用模块化方法构建电子邮件，我们的朋友 Brian Graves 写到了这一点。 并尽量减少嵌套表。 嵌套表几乎是不可避免的，但将嵌套深度保持在最大 4-6 个表将有助于避免任何问题。

与复杂的嵌套类似，过于复杂的设计也可能存在问题。 看到多列电子邮件的情况并不少见，但是当您开始向电子邮件添加太多列时，您就为潜在的失败做好了准备。

一些电子邮件客户端甚至在基本数学方面都有问题。 已知某些版本的 Microsoft Outlook 会为表格列添加额外的间距，从而破坏电子邮件布局。 虽然您可能认为使用设置为 25% 宽度的四个表格单元格是有意义的，但 Outlook 会为这些单元格添加额外的空间并导致布局比 100% 宽。 生成的电子邮件会将其中一些单元格放到自己的行中，从而破坏您精心设计、计划完美的电子邮件活动。

保持电子邮件布局简单有助于避免广告系列的潜在问题，并使订阅者满意。

缺少标签

电子邮件通常包含大量代码。 大多数电子邮件团队的工作时间非常快，而且时间紧迫。 这种组合可能会导致可能破坏电子邮件活动的错误。

作为快速复习，让我们看看 HTML 是如何编写的。 HTML 由围绕内容的标签组成。 在大多数情况下，正确的标记需要开始和结束标记。 以这个 HTML 表格为例：

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

您可以看到存在三个不同的标记：表格、表格行和表格单元格。 这些标签被打开，然后关闭（用 / 符号表示）。

尽管 HTML 是一种宽容的标记语言，但电子邮件客户端及其渲染引擎在缺少 HTML 标签时经常会卡住。 不幸的是，缺少结束标签是电子邮件中非常普遍的问题。 这些快速的周转时间可能会导致电子邮件设计人员编码太快而忘记关闭表格、行或单元格。 虽然这在某些客户中没有问题，但在其他客户中会导致广告系列中断。

W3C 标记验证服务等工具可以帮助识别任何缺失的标签。 缺少标签和格式不正确的标记也是我们建议使用电子邮件模板或工具（如 Builder's Partials 和 Snippets）来帮助创建电子邮件的原因。 它们不仅有助于确保您的代码编写良好并经过适当测试，而且还具有加快工作流程的额外好处——让您能够赶上那些紧迫的期限并让您的团队满意。

缺少属性

就像缺少标签会导致问题一样，缺少表格上的 HTML 属性会导致设计看起来很时髦。

HTML 属性是可以在 HTML 标签上设置的附加属性。 这些属性控制元素的宽度和高度、对齐方式甚至间距等内容。 表格单元格周围的意外间距是 HTML 表格中最常见的问题之一。

几乎所有电子邮件应用程序（和 Web 浏览器）都将自己的样式添加到 HTML 表格中。 HTML 表格传统上用于显示表格数据，最初并非用于布局和设计内容。 因此，我们需要覆盖浏览器和电子邮件应用程序的默认行为以确保表格正确显示。

通过向表格添加单元格间距和单元格填充属性——并将两者都设置为零——我们可以确保没有电子邮件客户端会在任何表格单元格中或周围添加额外的空间。

 <table cellpadding="0" cellspacing="0"> </table>

同样，如果您遇到表格宽度或表格内容对齐问题，您应该确保您没有忘记表格或表格单元格的宽度或对齐属性。

了解如何排除故障

想了解如何对自己的电子邮件活动进行故障排除并避免订阅者遇到任何令人尴尬的问题吗？ 加入我们在 Litmus Live 的完整研讨会，像专业人士一样对电子邮件进行故障排除。 我们将讨论最常见的电子邮件陷阱、它们的解决方案以及排除活动故障的最佳方法。

获取您的 Litmus Live 门票！ 立即注册以与我们一起庆祝电子邮件！ 立即注册 →