htmlcssoutlookhtml-emailemail-templates

HTML email template outlook rendering issue

My HTML-Email template is not rendering properly in Outlook.

Gmail:

enter image description here

Outlook desktop:

enter image description here

<table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center;">
  <tr>
    <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;text-align: center;vertical-align: middle;"></td>
    <td id="title" style="background-color: #ececec; display: table-cell;width: 40%; padding: 0px; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td>
    <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;"></td>
  </tr>
</table>

How to make it same looking as in Gmail?

Solution

  • You need a 2-row table layout. Unfortunately rowspan does not work well in Outlook. You still can include a suitable inside the table cells. Then you should remove most of your styling from the table cells. It makes no sense to use display: block on those cells and then redeclares display: tabel-cell on them later on. Just use the default straight away.

    Last but not least, you have to use &nbsp to add content to the table cells as they would collapse otherwise.

    I also moved the background-color from the cells to the table itself.

    <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center; background-color: #ececec;">
  <tr>
    <td>
      <table style="width: 100%">
        <tr>
          <td style="border-bottom: 2px solid #ccc;">&nbsp</td>
        </tr>
        <tr>
          <td>&nbsp</td>
        </tr>
      </table>
    </td>
    <td id="title" style="width: 40%; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td>
    <td>
      <table style="width: 100%;">
        <tr>
          <td style="border-bottom: 2px solid #ccc;">&nbsp</td>
        </tr>
        <tr>
          <td>&nbsp</td>
        </tr>
      </table>
    </td>
  </tr>
</table>