Why do email signatures need to be tables, not divs?

Outlook on Windows uses Microsoft Word's HTML rendering engine for emails, and Word doesn't support most modern CSS layout (flexbox, grid). Tables are the only layout primitive that renders consistently in Outlook 2007/2010/2013/2016/2019/365 plus Gmail, Apple Mail, and the modern web clients. So all professionally-built email HTML uses table-based layouts — including this signature builder.

Why won't my photo show up after I paste it?

Email clients block external images by default until the recipient clicks 'show images'. The image URL must be publicly accessible (no authentication required) — paste a Cloudinary, Imgur, or your-domain CDN URL. Don't use a Google Drive or Dropbox share URL; those redirect through HTML pages and won't render as .

How do I add this to Gmail?

Settings → See all settings → General tab → Signature → Create new. Paste the rich-text version into the editor (Ctrl/Cmd+V works). Save. The signature now appears at the bottom of every new compose, and you can pick which one to use per-message.

Can I add this to Outlook?

Outlook (desktop): File → Options → Mail → Signatures → New, paste rich text. Outlook on the web: Settings → Mail → Compose and reply → paste rich text. The HTML version may give better fidelity than rich-text paste depending on Outlook version.

Why does my signature look different on mobile vs. desktop?

Most email clients have separate signature settings for mobile apps (Gmail iOS uses a separate signature). The Stacked layout works best for both since it doesn't require horizontal space. Set the same signature in your mobile client's settings to keep them consistent.

Can I include a calendar booking link?

Yes — add it as one of the link fields (e.g. 'Book a meeting'). The recipient clicks the link in your signature and lands on your Calendly / Cal.com / SavvyCal / Google Calendar appointment page. This is one of the highest-converting CTAs in email signatures.

Career & Growth · Free tool

Email Signature Builder

Build an HTML email signature with your name, role, and social links online. Copy-paste into Gmail instantly — free tool with no sign-up or branding.

Updated June 2026

NameTitleCompanyEmailPhoneWebsiteAccent color

Preview

Jane Doe

Head of Product · Acme Corp

jane@acme.com

+1 555 123 4567

acme.com

Show HTML source

<table cellpadding="0" cellspacing="0" style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:#111827;">
  <tr>
    <td style="padding-right:16px;border-right:3px solid #4f46e5;">
      <div style="font-weight:700;font-size:16px;">Jane Doe</div>
      <div style="color:#6b7280;">Head of Product · Acme Corp</div>
    </td>
    <td style="padding-left:16px;">
      <div><a href="mailto:jane@acme.com" style="color:#4f46e5;text-decoration:none;">jane@acme.com</a></div>
      <div style="color:#374151;">+1 555 123 4567</div>
      <div><a href="https://acme.com" style="color:#4f46e5;text-decoration:none;">acme.com</a></div>
    </td>
  </tr>
</table>

Paste into Gmail / Outlook / Apple Mail signature settings.

Found this useful?Email Buy Me a Coffee

What it does

Fill in your name, title, company, phone, links, and an optional photo URL — get back a clean HTML email signature ready to paste into Gmail, Outlook, Apple Mail, Spark, Superhuman, or any other email client. The output uses inline-styled tables (the only HTML email clients still render reliably in 2026), so it survives the "rich-text preservation" step that mangles fancier signatures.

The builder offers half a dozen layouts (left-aligned with photo, right-aligned, photo-on-top stacked, minimal text- only, dual-column for multi-language signatures, etc.), and shows a live preview as you fill in fields. Pick a color scheme, adjust the divider style, and copy the result as either rich text (paste-ready directly into your email client's signature settings) or raw HTML (for IT teams managing signatures across an org).

Why this matters: a poorly-built signature with images, logos, and styled text often arrives at the recipient as a broken table, missing images, or a wall of plain-text. The HTML this tool generates is conservative on purpose — uses only the small subset of HTML/CSS that Gmail's aggressive style-stripping leaves intact, and avoids background images, web fonts, and external CSS that get dropped in transit.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/email-signature-builder" width="100%" height="720" frameborder="0" loading="lazy" title="Email Signature Builder" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Fill in the fields: name (required), title, company, phone, email, website, social links, and optional photo URL.
Pick a layout — Left-with-photo is the most common; Stacked works better for narrow viewports / mobile readers.
Adjust the color: pick your brand color from the palette or paste a hex code.
Preview shows the signature exactly as Gmail/Outlook will render it. Iterate until it looks right.
Click Copy as rich text to put the signature on your clipboard. Paste it into your email client's Signature settings — it'll arrive intact with formatting preserved.
Or click Copy HTML for the raw HTML, useful for org-wide signature deployments through Google Workspace or Microsoft 365 admin tools.

When to use this tool

Setting up a polished personal email signature for business communication.
Standardizing email signatures across a team or company (build once, distribute the HTML).
Refreshing an old signature that's gradually broken across email-client updates.
Adding social/calendly/meeting-booking links cleanly with consistent icon spacing.

When not to use it

Marketing-style HTML emails (a separate problem requiring a real ESP / responsive template framework).
Custom designs with web fonts, gradients, animation, or background images — these get stripped by most email clients. Stick to the conservative defaults.
Signatures requiring tracking pixels or read-receipt embedded JavaScript — those don't survive any modern client. Use a tracking-aware tool integrated with your email client.

Common use cases

Onboarding a colleague who needs the same calculation/conversion
Verifying a number or output before passing it on
Quick generation during a typical workday
Pre-decision sanity-check on inputs and outputs

Frequently asked questions

Why do email signatures need to be tables, not divs?: Outlook on Windows uses Microsoft Word's HTML rendering engine for emails, and Word doesn't support most modern CSS layout (flexbox, grid). Tables are the only layout primitive that renders consistently in Outlook 2007/2010/2013/2016/2019/365 plus Gmail, Apple Mail, and the modern web clients. So all professionally-built email HTML uses table-based layouts — including this signature builder.
Why won't my photo show up after I paste it?: Email clients block external images by default until the recipient clicks 'show images'. The image URL must be publicly accessible (no authentication required) — paste a Cloudinary, Imgur, or your-domain CDN URL. Don't use a Google Drive or Dropbox share URL; those redirect through HTML pages and won't render as <img>.
How do I add this to Gmail?: Settings → See all settings → General tab → Signature → Create new. Paste the rich-text version into the editor (Ctrl/Cmd+V works). Save. The signature now appears at the bottom of every new compose, and you can pick which one to use per-message.
Can I add this to Outlook?: Outlook (desktop): File → Options → Mail → Signatures → New, paste rich text. Outlook on the web: Settings → Mail → Compose and reply → paste rich text. The HTML version may give better fidelity than rich-text paste depending on Outlook version.
Why does my signature look different on mobile vs. desktop?: Most email clients have separate signature settings for mobile apps (Gmail iOS uses a separate signature). The Stacked layout works best for both since it doesn't require horizontal space. Set the same signature in your mobile client's settings to keep them consistent.
Can I include a calendar booking link?: Yes — add it as one of the link fields (e.g. 'Book a meeting'). The recipient clicks the link in your signature and lands on your Calendly / Cal.com / SavvyCal / Google Calendar appointment page. This is one of the highest-converting CTAs in email signatures.

Learn more

Explore more career & growth tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →