Question

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

我在小提琴中使用的html表的片段是：

set @rn := 0

update t
    set prio_no = (@rn := @rn + 1)
    order by date;

问题陈述：

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

Answer 1

Gmail，雅虎，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电子邮件中使用表格？

1 个答案: