如何在编码 html 电子邮件中使用表格？答案

【问题标题】：How to use table in coding html emails?如何在编码 html 电子邮件中使用表格？
【发布时间】：2018-11-25 05:53:09
【问题描述】：

我有一个在 html 中复制的发票设计。这是fiddle。

我在fiddle中使用的html表的sn-ps是：

<table style="width:100%;display: flex;
  justify-content: center;">

 <tbody style="font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">how many</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
    width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">who:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>

问题陈述：

我想知道我上面使用的表格是否是在 html 电子邮件中使用的正确方法，或者我是否需要进行任何更改？我之所以问这个问题是因为我以前从未编写过 html 电子邮件。

【问题讨论】：

是的，这是正确的方法。但某些 HTML 样式属性可能不适用。除了您必须在代码中添加配置以发送 html 代码。否则它会以纯文本形式显示 HTML 代码。
display: flex; 覆盖 display:table，这使该表成为非表...但如果不支持 display: flex;，它可能对表后备解决方案很有用。
表格支持纵横对齐为什么还要使用flex，而Yahoo、Gmail、outlook.com都不支持flex
“我之所以问这个问题是因为我以前从未编写过 html 电子邮件。” - 在这种情况下，我希望你在最初的时候做得更好研究…… HTML 电子邮件是一个广泛的话题，但它也已经被讨论了很多。像这样问，显然甚至没有先尝试看看你得到了什么结果……你的努力比我认为可以合理预期的要少。
@CBroe 我猜新开发人员不知道要寻找什么，或者他们应该使用什么关键字，谷歌不回答问题，但 stackoverflow 上的人会。不过我同意你的看法。

标签： html css html-table html-email

【解决方案1】：

Gmail、yahoo、outlook.com 不完全支持在 html 电子邮件中使用 Flex 检查以下两个有用的链接：

Old question on stackoverflow.

Support guid

如果您遵循正常的表格布局方法，大多数电子邮件客户端都会支持它，因为我注意到您还使用了<div> 标签，这也会引发一个标志。

这段代码可能需要更多的工作和样式，但只是为了展示它比使用display: flex 更好：

<html>

<body>
  <p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
  <table cellpadding="0" cellspacing="0" border="0" width="600" class="mobile" style="margin: 0 auto;" align="center">
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style=" font-size:20px; padding: 0 0 0 15%;">
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
    width: 300px;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td>
              <h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
            </td>
          </tr>
          <tr style="text-align: left;margin-left: auto;width: 50%;padding-right: 0%; margin-right: auto;color:#484848;font-size:20px;" class="steps">
            <td>
              <p>1. click here to open the ABC app to the posting requests page </p>
              <p>2. click on availability check request</p>
              <p>3. say yes, its availabile ot suggest another date it is</p>
              <p>4. wait the 1 or 24 hour confirmation good</p>
              <p>5. three days after the booking ends money will be send to your account</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

【讨论】：

谢谢。我去看看。
嗨亚当，我想知道我们是否可以在 html 电子邮件中使用 h2 标签？我正在浏览link，其中写着我不能使用 p 标签，所以我想知道我们是否可以使用 h2 标签。
您可以使用它们，只需确保测试您的电子邮件。 read this
在link 中，他们告诉我们不要使用 p 标签。我发现编码 html 电子邮件非常令人困惑......哈哈
我有一个类似的question。我想知道你是否可以帮助我。