Email Signature HTML Guide: Write, Test, and Deploy

Build an email signature with modern CSS and it'll look fine in Gmail, then break in Outlook. The reason: Outlook 2016–2021 runs on Microsoft Word's rendering engine, not a real HTML engine. That means no flexbox, no grid, unreliable border-radius, and limited CSS support.

The solution is to code like it's 2005: use HTML tables for layout and inline styles for everything.

The Core Rules of Email HTML

• Use HTML tables for layout, not divs with flexbox or grid
• All styles must be inline, style="..." on each element. External stylesheets and <style> blocks are stripped by many clients.
• Avoid CSS shorthand, write margin-top: 0; margin-right: 0; instead of margin: 0; where possible
• Set explicit widths on table cells using the width attribute, not just CSS
• Images need width attributes, both width="150" attribute and style="width:150px;" for maximum compatibility

A Basic Email Signature HTML Structure

Here's a minimal but complete HTML signature that renders well across Gmail, Outlook, and Apple Mail:

<table cellpadding="0" cellspacing="0" border="0"
  style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td style="padding: 0;">

      <!-- Name -->
      <p style="margin: 0 0 2px 0; font-size: 15px;
         font-weight: bold; color: #1a1a1a;">
        Your Name
      </p>

      <!-- Title and Company -->
      <p style="margin: 0 0 2px 0; font-size: 12px;
         color: #555555;">
        Job Title | Company Name
      </p>

      <!-- Contact -->
      <p style="margin: 0 0 4px 0; font-size: 12px;
         color: #555555;">
        +1 (555) 123-4567
        &nbsp;·&nbsp;
        <a href="https://www.yoursite.com"
           style="color: #1e3a5f; text-decoration: none;">
          yoursite.com
        </a>
      </p>

    </td>
  </tr>
</table>

Adding a Logo (Side by Side Layout)

To have a logo on the left and contact info on the right, use a two-column table:

<table cellpadding="0" cellspacing="0" border="0"
  style="font-family: Arial, sans-serif;">
  <tr>
    <!-- Logo column -->
    <td width="80" valign="top"
        style="padding-right: 16px;">
      <img src="https://www.example.com/logo.png"
           width="70" alt="Company Logo"
           style="display: block; width: 70px;">
    </td>

    <!-- Content column -->
    <td valign="top"
        style="border-left: 2px solid #1e3a5f;
               padding-left: 16px;">
      <p style="margin:0 0 2px 0; font-size:15px;
         font-weight:bold; color:#1a1a1a;">
        Your Name
      </p>
      <p style="margin:0 0 2px 0; font-size:12px;
         color:#555555;">
        Title | Company
      </p>
    </td>
  </tr>
</table>

Key HTML Email Gotchas

Use   for spacing, not margin

Many email clients strip or ignore margins and padding on inline elements like <span>. Use   (non-breaking space) or  ·  to create visual separation between items on the same line.

Don't use border-radius on cells

Outlook doesn't render border-radius on table cells. If you need rounded corners on a container, use a background image or accept that Outlook users will see sharp corners.

Test with images blocked

Many corporate email clients block external images by default. Test your signature with images disabled (in Outlook: right-click an email → show images off). Make sure your name and contact info are visible even without images, this means using HTML text, not image-based text.

Avoid JavaScript entirely

Email clients block JavaScript completely. Any JavaScript in an email or signature will be stripped.

How to Test Your HTML Signature

The most reliable testing method: send your signature to actual email addresses. Test in at minimum:

• Gmail (web)
• Outlook (desktop or web)
• Apple Mail on Mac

If you have access to Litmus or Email on Acid, their email rendering previews cover dozens of clients simultaneously. The free tier of Litmus lets you preview in a limited number of clients.

Pasting HTML Signature into Gmail

Gmail's signature editor strips HTML if you paste it directly. The correct method:

1. Open an empty document in Google Docs or a plain HTML file in a browser.
2. Paste your signature HTML and open the resulting page.
3. Select all the rendered content (Ctrl+A / Cmd+A) and copy (Ctrl+C / Cmd+C).
4. In Gmail → Settings → Signature, paste with Ctrl+V / Cmd+V.

Gmail preserves the visual rendering, not the raw HTML. For more detail, see our Gmail signature guide.