HTML Email Signature: Complete Coding Guide

Creating HTML email signatures that render consistently across Gmail, Outlook, and Apple Mail requires specific techniques. This guide covers everything you need to know.

Why Email HTML Is Different

Email clients don't support modern CSS. Outlook uses Word's rendering engine, which means you need tables for layout and inline styles for everything.

The Golden Rules

• Use tables for layout — The only reliable positioning method
• Inline all CSS — Style tags get stripped by many clients
• Avoid shorthand — Write margin-top instead of margin
• Web-safe fonts only — Arial, Verdana, Georgia, Times New Roman
• Set explicit widths — Don't rely on auto-sizing

Basic Template Structure

<table cellpadding="0" cellspacing="0" border="0" 
  style="font-family:Arial,sans-serif;font-size:14px;">
  <tr>
    <td style="padding-bottom:8px;">
      <strong>Your Name</strong>
    </td>
  </tr>
  <tr>
    <td>Job Title | Company</td>
  </tr>
  <tr>
    <td style="padding-top:8px;">
      <a href="mailto:email@company.com">email@company.com</a>
    </td>
  </tr>
</table>

Adding Images

Images must be hosted online. Use absolute URLs and always set width/height attributes:

<img src="https://yoursite.com/logo.png" 
     width="150" height="50" 
     alt="Company Logo" 
     style="display:block;border:0;" />

Outlook-Specific Fixes

Outlook requires special handling. Use MSO conditional comments for Outlook-specific code:

<!--[if mso]>
<table><tr><td width="600">
<![endif]-->
  <!-- Your content here -->
<!--[if mso]>
</td></tr></table>
<![endif]-->

Common Problems & Solutions

• Extra spacing — Add style="display:block" to images
• Blue links on iOS — Wrap text in a span with explicit color
• Font changes — Always specify fallback fonts in font-family
• Broken layout — Check for unclosed tags and missing table cells