HTML email signature: the code that survives Gmail and Outlook

An HTML email signature that survives Gmail and Outlook is built the old way: nested tables, inline styles, fixed widths and images at a web address. Modern CSS layout (flexbox, grid, positioning) is not on the supported lists the vendors publish, so a signature that relies on it can collapse in the app your client uses.

This page gives a skeleton layer by layer, a table of CSS that fails, and what Google and Microsoft say about their own apps. One limit up front: we did not test the skeleton in every mail app. The markup follows what emailfooter’s own engine outputs, and every claim about a client rests on a vendor page we opened in October 2026. Where we found no vendor page, we say so.

The skeleton of an HTML email signature, layer by layer

Each row is one decision, outermost first. Angle brackets are shown as code.

Layer	Markup	Reason
Outer table	<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">	Presentation role tells assistive tools it is layout, not data. Zero padding and spacing stop browsers adding gaps.
Fixed width	width="600" and style="width:600px;"	Set in both places, so an app that ignores one still gets the other.
Cells	<td valign="top" style="padding:0 16px 0 0;">	Padding goes on cells. Microsoft’s reference lists padding for td, and not for span.
Text	<span style="font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#4a5568;">	The full font is repeated on each element, because inheritance is not reliable.
Links	<a href="tel:+442079460222" style="color:#4a5568;text-decoration:none;">	A tel link makes a number tappable on a phone. Use the country code.
Image	<img src="https://example.com/logo.png" width="160" alt="Company name" border="0" style="display:block;border:0;width:160px;height:auto;">	Full web address, width set, alt text, no stray border.
Spacer	<td width="16" style="width:16px;font-size:1px;line-height:1px;">&nbsp;</td>	A narrow empty cell is more dependable than margin.
Dark-mode hook	A <style> block with @media (prefers-color-scheme: dark) and class names	Optional. See the dark mode note below.

The same layers drive every layout in the plugin. Here is one built from them:

Executive layout, generated from tables and inline styles like the skeleton above. The firm and person are made up.

CSS that fails in an HTML email signature

Two vendor pages give us hard evidence. Google’s CSS support page for Gmail (last updated by Google on 15 September 2026) lists the properties and media queries Gmail supports and says Gmail might ignore the rest (Gmail CSS support). Microsoft’s reference for the Word-based engine behind Outlook lists unsupported properties, but it is archived and describes Outlook 2007 (Word HTML and CSS rendering in Outlook). We found no current Microsoft page that replaces it, so treat its list as a cautious guide and test your own version.

CSS	Gmail’s supported list	Word-based Outlook (archived page)
float	Listed	Unsupported
position	Not listed	Unsupported
max-width	Listed	Unsupported
background-image	Listed	Unsupported
border-radius	Listed	Not on the supported list
overflow	Listed	Unsupported
flexbox and grid properties	Not listed	Not on the supported list
box-shadow, transform, animation	Not listed	Not on the supported list
padding on a table cell	Listed	Supported
@media (prefers-color-scheme: dark)	Not among the supported media queries	Not covered (the page predates it)

Microsoft’s page also says the engine does not support script, form, iframe, button or input elements, shows only a static version of an animated GIF, and treats unsupported properties as unknown. The safest signature uses none of the failing rows. Where a property is listed for Gmail but unsupported in Word, choose the version that works in both.

For other apps, including new Outlook, Outlook on the web, Apple Mail and the phone apps, we did not find a vendor page that lists supported CSS, so we make no claim. Test them.

Dark mode in an HTML email signature

The W3C’s media queries draft defines prefers-color-scheme with the values light and dark (Media Queries Level 5, a Working Draft dated 19 February 2026). Google’s Gmail page lists only width, orientation and resolution queries, with no colour-scheme query, so we cannot say Gmail follows it. emailfooter’s own install tip for classic Outlook says Outlook for Windows ignores dark-mode colours, while its tip for Apple Mail says Apple Mail supports dark mode. So a dark-mode block can improve the signature in some apps and does nothing in others. Build the signature to be readable without it. The full treatment is in email signature dark mode.

How each client takes an HTML email signature

• Gmail: the signature box is an editor, not a code window. Google’s page describes adding text, formatting, and images by web address, Drive or upload. It says up to 10,000 characters, and that includes images. The code behind the layout counts too, so a long table structure costs characters (Gmail Help).
• Outlook: Microsoft’s page describes typing in an editing box. For richer layouts in classic Outlook it suggests building the text in Word and pasting it in, and it warns that VML tags can make elements appear as attachments instead of inline images.
• Thunderbird: emailfooter’s install steps tell you to copy the HTML code, tick “Use HTML” below the signature box, and paste the source.
• Apple Mail: Apple’s page describes a Signatures list and an “Always match my default message font” option that makes the signature use the message font from Fonts and Colors. Untick it if you want your own fonts.

Neither Google’s nor Microsoft’s signature page describes pasting raw HTML into the box, so the usual method is to open the HTML in a browser, select the rendered signature, copy it and paste it into the editor. emailfooter’s “Copy as rich signature” does the same. Our guides to adding an HTML signature in Gmail and in Outlook give the steps.

Checking an HTML email signature

1. Open the HTML in a browser and make sure it looks right.
2. Paste it into the signature box and send a message to yourself.
3. Open the message in a second app, and on a phone.
4. Switch the app to dark mode and look again.
5. Turn images off. Microsoft says classic Outlook blocks automatic picture downloads by default, so check that the name, title and number are readable as text (Microsoft Support).
6. Switch a test message to plain text. Microsoft’s page on message formats says plain text does not support showing pictures inside the message.

Should you write it by hand?

You can. A hand-written HTML email signature gives full control and costs time on every change. If you manage a team, the more practical route is a template with merge tags, so each person’s details drop into the same markup. emailfooter has a code editor for custom HTML templates with merge tags, and ten built-in layouts you can duplicate as a starting point. See the free email signature generator article for the steps, and images in an email signature for the image rules.

Frequently asked questions

What is an HTML email signature?

A signature written in HTML, which lets it carry a layout, a logo, links and colours. Mail apps store it and add it to each message.

Can I paste HTML code into Gmail?

Gmail’s signature box is an editor, and Google’s help page describes formatting and images in it, not pasting source code. Render the HTML in a browser, copy it, and paste it.

What HTML works in an email signature?

Tables, inline styles, links and images with a set width and alt text. Avoid script, forms, iframes and modern layout CSS.

Why does my HTML email signature break in Outlook?

Classic Outlook for Windows renders with Word’s engine, which supports fewer properties than a browser. Microsoft’s archived reference lists float, position and max-width as unsupported.

Should I use an HTML email signature template?

For a team, yes. A template with merge tags keeps every signature in the same markup.