Why the markup looks like it is from 2004
Email clients are not browsers. Gmail strips <style> blocks entirely and rewrites what is left. Outlook for Windows renders mail through Microsoft Word's HTML engine, which has no support for flexbox, grid, or most positioning, and which will quietly ignore padding on some elements while honoring it on others. External stylesheets are never fetched. The only formatting instructions that reliably survive the trip are inline style attributes on individual tags, and the only layout primitive that behaves consistently is the table.
So the output here uses a two-cell table for the accent bar, a two-cell table for the side-by-side layout, and repeats the same font declaration on every cell rather than relying on inheritance — Word's engine loses inherited styles across table boundaries often enough that repeating them is cheaper than debugging it. The result is verbose. Leave it verbose.
Rendered paste versus source paste
There are two ways to get a signature into a client and they are not interchangeable. Gmail, Outlook web, new Outlook and Apple Mail all give you a rich text editor with no way to enter markup — for those, select the preview box above, copy it as rendered content, and paste. The clipboard carries the HTML along with the visible text, which is why this works at all.
Thunderbird, most CRMs, help desk tools and marketing platforms have a source field. Paste the HTML there instead. If you paste rendered content into a source field you get escaped tags shown as literal text; if you paste source into a rich text editor you get your markup displayed as a paragraph of angle brackets. Both mistakes are obvious the moment you look at the preview, which is worth doing before you send.
Logos and images
This tool deliberately makes a text-only signature. If you want a logo, add it in the client's editor afterward, and host the image at a stable public URL on a server you control. Two things go wrong with images in signatures: many recipients have remote images blocked by default, so the signature must read correctly without it, and embedding the image as a data URI or a local file attaches it to every message you send — some clients turn it into a visible attachment, which makes every reply look like it carries a file.
Also size the image in the markup with explicit width and height attributes, not just CSS. Outlook will render an unsized image at its natural pixel dimensions, and a 1200px logo will blow the layout apart in a way you will not see in your own client.
What belongs in a signature
Name, title, company, and two or three ways to reach you. Street address only if people visit. Quotes, legal disclaimers and social icon rows all get repeated on every message in a thread, so a ten-line signature becomes ninety lines after a short back-and-forth. Consider keeping a short version — name and title only — for replies, which most clients let you configure separately from the version used on new messages.
One more practical note: pick a font that exists on the recipient's machine. Arial, Helvetica, Georgia and Times are safe. A web font will not load, and the fallback you did not choose is what your correspondents will actually see.
Questions people ask
Why does my signature look different in Outlook than in the preview?
Outlook for Windows renders HTML with Word's engine rather than a browser engine. Common differences are extra space around tables, borders appearing where you did not put any, and images scaled to their natural size. The layouts here are built to minimize that, but if a border shows up, it is usually the client adding it to the table rather than something in the markup. Editing the pasted signature in Outlook's own editor to remove it is faster than fighting the HTML.
Can I paste the HTML directly into Gmail?
No. Gmail's signature editor accepts rich text only, so pasting source gives you visible tags. Select the preview area with the mouse, copy, and paste that. The clipboard carries the formatting. The HTML output is for tools that have an explicit source or code field.
Will this work on my phone?
The signature will display fine in mobile mail apps, but the Gmail and Outlook mobile apps store their own signature setting separately from the web version, and most of them support plain text only. Copy the plain text version into the mobile app so replies sent from your phone are not signed differently or not at all.
Does the two-column layout collapse on narrow screens?
No. It is a table, and tables do not reflow the way a responsive div would — media queries are unreliable in mail clients, so there is nothing sensible to attach one to. If a lot of your mail is read on phones, the stacked or accent bar layout is the safer choice.