Como usar a tabela na codificação de E-mails html?

Question

Como usar a tabela na codificação de E-mails html?

Tenho um projecto de factura que reproduzi em html. Aqui está o violino.

os excertos da tabela html que usei no violino são:

<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>

Declaração Do Problema:

pergunto-me se a tabela que usei acima é a forma correcta de usar no e-mail html ou se há alguma alteração que eu precise de fazer ? A razão pela qual eu estou perguntando isso porque eu nunca codificei emails html antes.

0

html css html-table html-email

Author: flash, 2018-06-15

Source

1 answers

score 1 · Accepted Answer

Usar o Flex em html-e-mails não é totalmente suportado pelo Gmail, yahoo, outlook.com verifique estas duas ligações úteis abaixo:

Velha pergunta sobre stackoverflow.

Interface de suporte

Se você seguir a abordagem de layout normal da tabela seria suportado pela maioria dos clientes de E-mail, como eu notei que você também usou <div> tag que irá levantar uma bandeira também.

Este código pode precisar de mais trabalho e estilo, mas só para mostrar como isto funciona melhor do que usar 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>