Search code examples
html-tableoutlookhtml-emailstylingemail-signature

Formatting HTML email signature for Outlook Mac OS - what am I doing wrong?

I edited this html-only Codepen template to make an email signature for my office.

I tried to import my HTML email signature into Outlook — I opened my index.html file in Chrome, selected my code with Cmd + A, copied it with Cmd + C, and pasted it into the Outlook signature interface with 'Keep Source Formatting' selected — using supposedly the correct method to import html email signatures into Outlook with Mac OS. My signature looked all messed up and squished, like my index.html file from the /src folder.

My email signature in Outlook:

my email signature in Outlook

I tried the copy/paste method with the template's index.html file and there are some style changes from Chrome to Outlook, but the spacing remained solid.

Template email signature in Outlook:

template email signature in Outlook

Is there something I'm missing with my code? The only difference I can tell between my signature and the template is the fact that I have the entirety of my email signature in <table>, while the template only uses a table for the logo/social icons section. TYIA!

index.html code

Screenshot of my email signature's Chrome display:

screenshot of my email signature's Chrome display

<html lang="en">
<body style="color:#063059; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; font-family:Arial, Helvetica, sans-serif; line-height:1.5;">
  
  <table width="350" border="0" cellspacing="0" cellpadding="0" role="presentation">
    
  <tbody>
    
  <tr>
    <td width="75">
      <a href="https://example.com/"><img src="https://i.imgur.com/Bh7eDEg.png" width="65" height="64.5" alt="State of Illinois Seal"/></a>
    </td>
    <td width="275" heigh="100%">
      <p>
        <span style="font-weight:700; font-size: 16px;">John Smith </span><span style="font-size: 16px; font-weight:700">(He / Him)</span>
        <br class="Apple-interchange-newline">
        <span style="font-size:15px; font-weight:700;">Digital Media Specialist</span>
        <br class="Apple-interchange-newline">
        <span style="font-size:15px; font-weight:700;">Office of My Boss</span>
      </p>
    </td>
  </tr>

  <tr>
    <td colspan="2" style="border-top: 1px solid black;">
      <p>
        <span style="font-size:14px;">Office: <a style="color:#1C6AB3; padding-right:6px;" href="tel:15162843300"><span> 516-284-3300</span></a><span aria-hidden="true">|&nbsp;</span><span style="font-size:14px; padding-left:2px;">Cell: <a style="color:#1C6AB3;" href="tel:15162843300"><span> 516-284-3300</span></a>
        <br class="Apple-interchange-newline">
        <span style="font-size:14px; padding-right:2px;">1234 W Monroe St </span><span aria-hidden="true">|&nbsp;</span><span style="font-size:14px; padding-left:2px;">Chicago, IL 60661</span>
      </span></span></p>
    </td>
  </tr>

  <tr>
    <td colspan="2">
      <a href="https://www.facebook.com/moreycreative"><img src="https://i.imgur.com/p9Od0MU.png" alt="Facebook Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.linkedin.com/company/moreycreative"><img src="https://i.imgur.com/fE7B4qo.png" alt="LinkedIn Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.instagram.com/moreycreative/"><img src="https://i.imgur.com/NRTdN9c.png/" alt="Instagram Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://twitter.com/MoreyCreative"><img src="https://i.imgur.com/aAi8ZLc.png" alt="Twitter Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
      <a href="https://www.moreycreative.com/inbound-and-down"><img src="https://i.imgur.com/kfXPUuX.png" alt="Podcast Microphone Icon" width="25" height="25" style="padding-right:3px; vertical-align: middle;"></a>
      <span aria-hidden="true" style="vertical-align: middle;">|&nbsp;</span>
      <a style="vertical-align: middle; color:#1C6AB3; font-weight:700; font-size: 14px;" href="https://example.com/">example.com</a>
    </td>
  </tr>
    
  <tbody>
      
</table> 
 
</body>
  
</html>
Solution

  • I found that any padding or margins within my table did not register at all in Outlook. I'm not sure if this is specific to tables, as I found other people had success with padding in Outlook.

    My solution

    What finally worked was adding extra rows and columns with a specified height/width to act as padding. For me at least, that was the only workaround for my Outlook issues. I hope my answer can maybe help another novice who was super frustrated, like I was! ☺️

    <html><head></head>
    
<body style="color:#394e5b; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; font-family:Arial, Helvetica, sans-serif; line-height:1.5;"> 
    
<table width="350" border="0" cellspacing="0" cellpadding="0" role="presentation">
      
<tbody>
  <tr align="left">
    <td width="75" valign="top"><a href="https://ltgov.illinois.gov/">
        <img src="https://i.imgur.com/Bh7eDEg.png" width="65" height="64.5" alt="Morey Creative Studios Logo" style="margin-bottom: 15px;">
      </a>
    </td>
      
    <td width="275">
      <table border="0" cellspacing="0" cellpadding="0" role="presentation">
        <tbody><tr>
          <td>
            <span style="font-weight:700; font-size: 14.5px; font-family:Arial, Helvetica, sans-serif;">John Smith </span> <span style="font-size: 14.5px; font-weight:700; font-family:Arial, Helvetica, sans-serif;">(He / Him)</span>
          </td>
        </tr>
        <tr height="5"></tr>
        <tr>
          <td>
            <span style="font-size: 14.5px;font-weight:700; font-family:Arial, Helvetica, sans-serif;">Digital Media Specialist</span>
          </td>
        </tr>
        <tr height="5"></tr>
        <tr>
          <td>
            <span style="font-size: 14.5px;font-weight:700; font-family:Arial, Helvetica, sans-serif;">Office of My Boss</span> 
          </td>
        </tr>
        <tr height="15"></tr>
      </tbody></table>       
    </td>
  </tr>
      
  <tr>
    <td colspan="2" style="border-top: 1px solid black;">
      <table border="0" cellspacing="0" cellpadding="0" role="presentation">
        <tbody><tr height="15"></tr>
        <tr>
          <td>
              <span style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">
                  Office:
                  <a style="color:#1C6AB3;" href="tel:15162843300">
                      <span>516-284-3300</span>
                  </a>
               </span>
                <span aria-hidden="true">&nbsp;|&nbsp;</span>
              <span style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Cell:
                  <a style="color:#1C6AB3;" href="tel:15162843300">
                      <span> 516-284-3300</span>
                  </a>
              </span>                                           
          </td>
        </tr>
        <tr height="5"></tr>
        <tr>
          <td>
              <span style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">1234 W Monroe St </span>
              <span aria-hidden="true">&nbsp;|&nbsp;</span>
              <span style="font-size:14px; font-family:Arial, Helvetica, sans-serif;">Chicago, IL 60661</span> 
          </td>
        </tr>
        <tr height="10"></tr>
      </tbody></table>
    </td>
  </tr>
   
  <tr algin="left">
    <td colspan="2" valign="middle">
      <table border="0" cellspacing="0" cellpadding="0" role="presentation">
        <tbody><tr height="30">
          <td width="25">
             <a href="https://www.facebook.com/moreycreative"><img src="https://i.imgur.com/p9Od0MU.png" alt="Facebook Icon" width="25" height="25" valign="middle"></a>
          </td>
          <td width="8"></td>
          <td width="25">
             <a href="https://www.linkedin.com/company/moreycreative"><img src="https://i.imgur.com/fE7B4qo.png" alt="LinkedIn Icon" width="25" height="25" valign="middle"></a>
          </td>
          <td width="8"></td>
          <td width="25">
             <a href="https://www.instagram.com/moreycreative/"><img src="https://i.imgur.com/NRTdN9c.png/" alt="Instagram Icon" width="25" height="25" valign="middle"></a>
          </td>
          <td width="8"></td>
          <td width="25">
             <a href="https://twitter.com/MoreyCreative"><img src="https://i.imgur.com/aAi8ZLc.png" alt="Twitter Icon" width="25" height="25" valign="middle"></a>
          </td>
          <td width="8"></td>
          <td width="25">
             <a href="https://www.moreycreative.com/inbound-and-down"><img src="https://i.imgur.com/kfXPUuX.png" alt="Podcast Microphone Icon" width="25" height="25" valign="middle"></a>
          </td>
          <td width="8"></td>
          <td>
             <span aria-hidden="true" valign="middle">|</span>
          </td><td width="8"></td>
          <td>
             <a valign="middle" style="color:#1C6AB3; font-weight:700; font-size: 14px; font-family:Arial, Helvetica, sans-serif;" href="https://example.com/"> example.com</a>
          </td>
        </tr>
      </tbody></table>  
      </td>
  </tr>
      
</tbody>
</table> 

</body></html>