電子郵件中的 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 門票！ 立即註冊以與我們一起慶祝電子郵件！ 立即註冊 →