我无法在 HTML 电子邮件中使用此标头答案

【问题标题】：I can't get this header working in a HTML email我无法在 HTML 电子邮件中使用此标头
【发布时间】：2016-09-13 14:49:39
【问题描述】：

我正在尝试在 MailChimp 上制作模板，但无法正确设置样式。不过有一些注意事项：CSS 样式必须是内联的，并且必须采用 <table> 标签的结构。

This is what I have so far

This is the end-goal

到目前为止，这是我的代码：

  <section id="header" style="background-color: #148e97;">
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
                    <tr>
                        <td align="right" valign="">
                          <div class="socialMediaIcons">
                            <img src="img/facebook.png"/>
                            <img src="img/twitter.png"/>
                            <img src="img/mail.png"/>
                            <img src="img/linkedin.png"/>
                          </div>
                        </td>
                    </tr>
                </table>
                <table id="title" width="500">
                  <tr>
                    <td align="left" valign="">
                        <img src="img/logo.png"/>
                    </td>
                    <td style="">
                      <h1 style="text-align: right; "
                    style="font-family: arial;">Brand USA E-News -- April 2016</h1>
                  </td>
                  </tr>
              </table>
            </td>
        </tr>
    </table>
  </section>

【问题讨论】：

对于 OP，您可能会从代码中删除任何 HTML5 语义 (section) 中受益，因为电子邮件 HTML 最多只能停留在 HTML 版本 3 或版本 4.0 中。
那你为什么要使用section？
您有两个 <table> 标记，分别设置为 500 和 600 像素宽。当大多数 HTML 电子邮件通常设计为 600 像素宽（或大约）时，单个 <td> 标记内的总宽度为 1100 像素。您需要使用嵌套表格来实现您所追求的布局，并且您需要非常精确地确定<table> 和<td> 的宽度。
@Martin 我现在正在处理它。我只是不确定我是否想陷入 HTML 电子邮件的地狱……它带回了痛苦的回忆。
@KirkBeard 哦，我太明白了，因此我拒绝回答自己：-D

标签： html css html-email mailchimp

【解决方案1】：

在创建 HTML 电子邮件时，您需要将自己带回到 Internet Explorer 6 很酷的时代。

您不能使用<section id="header"> 或class="socialMediaIcons"，因为并非所有电子邮件客户端都支持<style> 标签。 HTML5 元素最不受支持，您的 CSS 需要内联并与 style="..." 属性一起使用。电子邮件客户端中有很多mixed support for CSS，因此您不得不迎合最低公分母。

以下代码为您提供了一个起点，让您了解如何创建布局：

<html>
    <body style="margin: 0; padding:0">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
            <tr>
                <td valign="center">
                    <div style="background-color: #148e97; width:660px; margin:auto;">
                        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
                            <tr>
                                <td width="30">
                                    <img src="http://placehold.it/1x1" width="30" alt="Spacer">
                                </td>
                                <td width="130">
                                    <img src="http://placehold.it/130x115" alt="Logo">
                                </td>
                                <td valign="top" width="500">
                                    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
                                        <tr>
                                            <td>
                                                <img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                <div class="socialMediaIcons">
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                <h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

您会注意到的一件事是在其他<table> 标记中还有很多<table> 标记，而在更多<table> 标记中。事情变得一团糟。

我使用了 spacer.gif 的老派技术（使用 http://placehold.it/1x1 代替 1x1.gif 图像），现在构建网站时不再需要这种技术。 p>

希望这段代码能让您走上正确的道路。我已经 5 年多没有构建 HTML 电子邮件了，所以我有点生疏了。

【讨论】：

好答案。问题是您已经有 5 年没有构建 HTML 电子邮件了，但是在那五年中HTML 电子邮件没有任何改变！互联网的所有其他部分似乎都在发展，除了电子邮件......
非常感谢Kirk，这真的帮助我理解了table inception的疯狂哈哈。
@GabrielRivera Table Inception 是一种很好的思考方式。当我达到可以使用的嵌套 <table> 标记数量的限制时，我曾经不得不解决早期版本的 Lotus Notes 的错误。 Hint: 10 nested <table> tags 是极限。
@GabrielRivera 如果这解决了您的问题，您可以单击此答案旁边的勾号以表明它是正确答案。 :-)
@Martin 确实感谢您的提醒，我一定会这样做。并感谢大家的帮助！