HTML Email Signature: why it is a table, not a modern layout

Carregando ferramenta… / Loading tool…

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;"><tr><td style="vertical-align:top; border-left:3px solid #4f46e5; padding-left:16px;"><div style="font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1a1a1a;">Ana Souza</div><div style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#4f46e5; font-weight:bold; margin-top:2px;">Product Designer · Acme Studio</div><div style="margin-top:8px;"><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">T</span> <a href="tel:+5511999990000" style="color:#555; text-decoration:none;">+55 11 99999-0000</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">E</span> <a href="mailto:[email protected]" style="color:#555; text-decoration:none;">[email protected]</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">W</span> <a href="https://acme.com" style="color:#555; text-decoration:none;">acme.com</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#555;"><span style="color:#4f46e5; font-weight:bold;">A</span> São Paulo, BR</div></div><div style="margin-top:8px;"><a href="https://linkedin.com/in/ana" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#4f46e5; text-decoration:none; font-weight:bold;">LinkedIn</a><span style="color:#cccccc;"> · </span><a href="https://instagram.com/ana" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#4f46e5; text-decoration:none; font-weight:bold;">Instagram</a></div></td></tr></table>

Continue in the tool

Open full tool

HTML email signature

HTML Email Signature: why it is a table, not a modern layout

An HTML email signature needs to survive an email client, not a browser, and the difference is significant: no external CSS, no `<style>` tag, and no flexible layout like flexbox, because Outlook desktop's rendering engine, inherited from Word, ignores all of it.

A table styled tag by tag, not a stylesheet

The signature is built as a `<table>` with `cellpadding="0"`, `cellspacing="0"` and `role="presentation"`, and every element carries its own inline `style` attribute: color, font size and spacing repeated on each `<div>` and `<a>` instead of centralized in a stylesheet. It is repetitive on purpose, because a `<style>` block in the `<head>` is often stripped by webmail clients like Gmail before the message renders.

The horizontal layout uses a single table row with two cells, photo on the left and details on the right, separated by a 3-pixel colored border; the vertical layout stacks the photo above the text across two table rows. In both cases the font is always sans-serif Arial or Helvetica, because custom fonts via `@font-face` have no guaranteed support in email clients.

Phone and website are automatically converted into working links: the phone becomes a `tel:` link with every character that is not a digit or plus sign stripped out (parentheses, spaces and hyphens disappear), and the website gets an `https://` prefix added in front when the user types only the domain, with no scheme. A website already typed with `http://`, `https://` or `mailto:` is left unchanged.

How each field becomes HTML

Formatted phone number

Input: +55 11 99999-0000
Expected output: href="tel:+5511999990000"

The spaces and hyphen are stripped, but the country-code plus sign stays, since only digits and "+" survive the cleanup.

Website with no scheme

Input: acme.com
Expected output: href="https://acme.com"

Since the text does not start with "http://", "https://" or "mailto:", the normalization step adds "https://" before building the link.

Two social links

Input: LinkedIn + Instagram preenchidos
Expected output: LinkedIn · Instagram (separados por ponto médio)

The social links row only appears when at least one label-and-URL pair is filled in, and each link is separated by a light gray middle-dot character.

Full tool FAQ

How do I add the signature in Gmail?

Copy the HTML, open Gmail in Settings › See all settings › General › Signature, create a new signature and paste. Gmail accepts pasting formatted HTML directly; save changes at the bottom of the page.

What about Outlook?

Why does the signature use tables instead of modern divs?

Is the photo embedded in the email?

What's the difference between “Copy HTML” and “Copy inline version”?

Is my data saved?

Frequently asked questions

Why does the signature use a table instead of flexbox `<div>`s?

Because Outlook desktop renders the email body with the same engine as Word, which does not implement flexbox, grid, or most modern layout CSS. Tables with cells (`<td>`) are the only reliable way to place a photo and text side by side in that client.

Why does the style live inside each tag instead of one `<style>` tag?

Because several webmail clients, Gmail among them, strip `<style>` blocks from the `<head>` before displaying the message for security reasons. An inline `style` attribute on each `<div>` or `<a>` survives that cleanup because it travels with the element itself.

What happens if I leave the photo blank?

The photo cell or row is simply not generated; the final HTML has no blank space reserved in its place, so the signature adjusts to show only the identity and contact block.

Why paste the finished signature as a single minified line?

Some email client signature settings fields cut or alter line breaks when pasting multi-line formatted HTML. Removing the line breaks and extra spaces before pasting keeps the table structure from getting corrupted in that process.

Email Signature Generator

Continue in the tool

HTML Email Signature: why it is a table, not a modern layout

A table styled tag by tag, not a stylesheet

How each field becomes HTML

Formatted phone number

Website with no scheme

Two social links

Full tool FAQ

Frequently asked questions

Why does the signature use a table instead of flexbox `<div>`s?

Why does the style live inside each tag instead of one `<style>` tag?

What happens if I leave the photo blank?

Why paste the finished signature as a single minified line?

Next steps