How to use table in coding html emails?

Question

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.

Yes,it is right way. But some of the HTML style properties might be not apply. Other than you have to add configuration in code for send html code. Othrewise it's display HTML code in plain text. — Hkachhia, Jun 15 '18 at 11:29
`display: flex;` overwrites `display:table`, which makes the table a non-table... But it might be useful for having a table fallback solution if `display: flex;` is not supported. — Johannes, Jun 15 '18 at 11:29
Why do you need to use flex in tables when they support vertical and horizontal align, and flex is not supported by Yahoo, Gmail, outlook.com — Adam, Jun 15 '18 at 11:35
_“The reason why I am asking this because I have never coded html emails before.”_ - in that case I’d expect you to do a lot better on your initial research … HTML email is a broad topic, but it also has been discussed a lot already. Asking like this, apparently without even having _tried_ it first to see what results you get … way less effort on your part than I think can be reasonably expected here. — CBroe, Jun 15 '18 at 12:23
@CBroe I guess new developers don't know what to look for, or what keywords they should use, google doesn't answer question but people on stackoverflow does. however I do agree with you. — Adam, Jun 15 '18 at 14:29

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

Hi Adam, I am wondering if we can use h2 tags in html email ? I was going through [link](https://teamtreehouse.com/community/is-there-a-reason-hes-not-using-p-for-the-text-in-the-email) and in it its written that I can't use p tags so I am wondering if we can use h2 tags or not. — flash, Jun 22 '18 at 02:38
You can use them just make sure to test your email. [read this](https://litmus.com/community/discussions/6509-html-semantic-elements-in-email) — Adam, Jun 22 '18 at 14:07
In this [link](https://teamtreehouse.com/community/is-there-a-reason-hes-not-using-p-for-the-text-in-the-email), they are telling us not to use p tags. I am finding coding html emails very confusing...lol — flash, Jun 23 '18 at 19:28
I have a similar [question](https://stackoverflow.com/questions/51003595/email-design-looking-different-in-outlook-in-comparison-to-other-email-clients/51003795?noredirect=1#comment89001186_51003795). I am wondering if you can help me out. — flash, Jun 23 '18 at 19:29

How to use table in coding html emails?

1 Answers1