Email Signature Generator
Build an email signature that renders correctly in Outlook, Gmail and Apple Mail, using nested tables and inline styles.
Build an email signature that survives Outlook, using nested tables and inline styles rather than modern CSS.
How it will arrive
|
Built from nested tables with inline styles, which is the only construction that renders the same in Outlook as everywhere else. Outlook on Windows uses Word's engine, so a signature built with modern CSS arrives as a stack of misaligned lines.
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse">
<tr>
<td width="1" style="background-color:#6d5efc;padding:0;font-size:0;line-height:0" bgcolor="#6d5efc"> </td>
<td width="16" style="padding:0;font-size:0;line-height:0"> </td>
<td style="vertical-align:top">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse">
<tr>
<td style="padding:0 0 2px;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;color:#1f2937;line-height:1.3">Ada Lovelace</td>
</tr>
<tr><td style="padding:1px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#6b7280;line-height:1.5">Head of Engineering</td></tr><tr><td style="padding:1px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#6b7280;line-height:1.5">DevKit Tools</td></tr><tr><td style="padding:1px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#6b7280;line-height:1.5"><span style="color:#6b7280">P:</span> <a href="tel:+442079460958" style="color:#6d5efc;text-decoration:none">+44 20 7946 0958</a></td></tr><tr><td style="padding:1px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#6b7280;line-height:1.5"><span style="color:#6b7280">E:</span> <a href="mailto:ada@devkittools.online" style="color:#6d5efc;text-decoration:none">ada@devkittools.online</a></td></tr><tr><td style="padding:1px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#6b7280;line-height:1.5"><span style="color:#6b7280">W:</span> <a href="https://devkittools.online" style="color:#6d5efc;text-decoration:none">devkittools.online</a></td></tr>
<tr><td style="padding:8px 0 0"><a href="https://linkedin.com/in/adalovelace" style="color:#6d5efc;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:11px;padding-right:10px">LinkedIn</a><a href="https://x.com/devkit_tools" style="color:#6d5efc;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:11px;padding-right:10px">X</a></td></tr>
</table>
</td>
</tr>
</table>About the email signature generator
Most free signature generators produce markup built with modern CSS, which is why so many signatures arrive in Outlook as a stack of misaligned lines with the photo in the wrong place. Outlook on Windows renders mail with Microsoft Word's engine: no flexbox, no grid, no reliable padding on anything that is not a table cell.
This builds the conservative construction instead: nested tables, inline styles, explicit widths on images. It is not the way you would build a web page, and it is the only thing that renders the same everywhere.
Nothing is uploaded. The signature is assembled in your browser and you copy the HTML out.
How to use it
- 1Fill in your details.
- 2Set the colours and font to match your brand.
- 3Add a photo URL if you want one, which must be public https.
- 4Copy the HTML and follow the install steps for your mail client.
Questions
Why does my signature break in Outlook?
Almost always because it was built with div layout and modern CSS. Outlook on Windows uses Word's rendering engine, which has none of that. Signatures have to be nested tables with inline styles, which is what this produces.
Why is my photo not showing?
It has to be a public https URL. A file on your computer will not load for anyone else, and an http URL is blocked as mixed content by most clients. Alt text is set to your name so something readable appears while images are blocked.
Should I put a logo image in the signature?
Keep it small and expect it to be hidden. Most clients block images by default on first open, so anything essential should be text. A signature that is one big image arrives blank.
How do I install it in Gmail?
Settings, then See all settings, then Signature, then Create new. Paste the rendered signature in. Gmail preserves the table layout.
Does the signature size matter?
Yes. It is appended to every message in a thread, so a heavy signature bloats long conversations and can push a Gmail thread past its clipping limit.