HTML Email Signature Tips That Actually Work

Practical tips for HTML email signatures: why tables beat modern CSS, how to host images, keeping links live, and testing across Gmail, Outlook and Apple Mail.

Updated 4 min read By CodingEagles
Free tool Email Signature Generator Design a professional signature and paste it into your email. Open tool

A reliable HTML email signature uses tables for layout, inline styles for every rule, web-safe fonts, and images hosted at public URLs. That combination renders consistently across Gmail, Outlook and Apple Mail. The signature generator produces exactly this kind of code, so you do not have to write it by hand.

If you are tweaking the HTML yourself, keep these points in mind.

Build with tables, not modern layout

Email clients run on an old and patchy subset of HTML and CSS. Modern layout tools like flexbox and grid are not safe to rely on, and Outlook in particular ignores much of what browsers handle easily. Tables with inline styles are the lowest common denominator that works almost everywhere, which is why professional signatures still use them.

Put styles inline

Email clients strip out <style> blocks and external stylesheets, so every style needs to sit directly on the element as a style attribute. The generator does this for you; if you edit the code, keep the inline pattern rather than moving rules into a stylesheet.

Host your images

Do not try to embed a photo or logo in the signature itself. Most clients load images from a web address and block or strip embedded ones. Upload your image somewhere public and use that link, and your picture will display for recipients.

Use real mailto: links for email and tel: links for phone numbers, and full https:// links for websites and socials. That way a tap or click does the right thing on every device. The generator wires these up automatically.

Test in the real clients

A signature that looks perfect in one app can break in another. Before you rely on it, send a test email and open it in:

  • Gmail (web and the mobile app),
  • Outlook (desktop is the strictest),
  • Apple Mail (Mac and iPhone).

Check the layout holds, the image loads, and the links work. Small fixes now save awkward-looking emails later.

To generate a signature built on these principles, open the email signature generator.

Frequently asked questions

Why do email signatures use tables instead of modern CSS?
Email clients, especially Outlook, support only a limited and dated subset of HTML and CSS. Layout features like flexbox and grid are unreliable, while tables with inline styles render consistently almost everywhere. That is why robust signatures are still built with tables.
Can I just embed my image in the signature?
Generally no. Most email clients display images by loading them from a web address, and embedded or base64 images are often stripped or blocked. Host your photo or logo at a public URL and link to it; that is the reliable approach.
How do I stop my signature breaking in Outlook?
Stick to tables, inline styles, web-safe fonts and hosted images, and avoid background images and modern CSS. Keep widths modest. Testing in Outlook specifically is wise, since it is the strictest of the common clients.

Ready to try it?

Design a professional signature and paste it into your email. Free, in-browser, and 100% private, your data never leaves your device.

Open the Email Signature Generator