CODEWITHSUNDEEP
htmlcsshtml-tablehtml-email
flash
flash

Reputation: 1517

How to use table in coding html emails?

I have a invoice design which I have replicated in html. Here is the fiddle.

The snippets of html table which I have used in the fiddle is:

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


Problem Statement:

I am wondering if the table I have used above is the right way to use in html email or if there is any changes I need to make ? The reason why I am asking this because I have never coded html emails before.

Upvotes: 1

Views: 3262

Answers (1)

Adam
Adam

Reputation: 1383

Using Flex in html-emails is not fully supported by Gmail, yahoo, outlook.com Check these two helpful links below:

Old question on stackoverflow.

Support guid

If you follow normal table layout approach it would be supported by the majority of email clients, as I noticed that you also used <div> tag which will raise a flag as well.

This code might need more work and styling but just to show how this works better than using 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>

Upvotes: 2

Related Questions