Outlook Signatur HTML

[thomas.stl]

Hallo zusammen,

ich bin absoluter Anfänger in Sachen HTML und "baue" aktuell meine Signatur für Outlook & Co. zusammen.

Wie schaffe ich, wie im Screenshot zu sehen, dass der Name mit einem Strich zum Logo getrennt ist bzw. genauso angezeigt wird?
Außerdem würde ich gerne wissen, wie ich das Logo hochladen kann, damit es mir auch angezeigt wird...

Die unteren Daten konnte ich halbwegs befüllen:

Ich bin euch für jede Hilfe dankbar!!!

<table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual; width: 100%;"><tbody><tr style="display: inline;"><td style="vertical-align: middle; width: 50%;"><span style="display: block; margin: 0px auto;"><img src="LogoTest.png" role="presentation" width="30" style="max-width: 30px; display: block; margin: 0px auto;"></span></td><td style="vertical-align: middle; text-align: left; padding-left: 15px; width: 50%;"><h2 style="margin: 0px; font-size: 18px; font-family: Usual; color: rgb(0, 0, 0); font-weight: 600;"><span>Vorname</span><span>&nbsp;</span><span>Name</span></h2><p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Inhaber</span></p><div style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;" -webkit-baseline-middle; font-size: medium; font-family: Usual; width: 100%;"><tbody><tr><td height="30" aria-label="Horizontal Spacer"></td></tr><tr><td width="auto" aria-label="Divider" style="width: 100%; height: 3px; border-bottom: 1px solid rgb(0, 0, 0); border-left: none; display: block;"></td></tr></tbody></table><tr><td height="30" aria-label="Horizontal Spacer"></td></tr><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual; width: 100%;"><tbody><tr style="vertical-align: middle;"><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(0, 0, 0);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" alt="emailAddress" width="13" style="display: block; background-color: rgb(0, 0, 0);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="mailto:[email protected]" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>[email protected]</span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(0, 0, 0);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" alt="Mobiltelefon" width="13" style="display: block; background-color: rgb(0, 0, 0);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:+49 (0) " style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>+49 (0) </span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(0, 0, 0);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" alt="website" width="13" style="display: block; background-color: rgb(0, 0, 0);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="//www.homepage.com" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>homepage.com</span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(0, 0, 0);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" alt="address" width="13" style="display: block; background-color: rgb(0, 0, 0);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><span style="font-size: 14px; color: rgb(0, 0, 0);"><span>AdresseTEST</span></span></td></tr></tbody></table></td><td width="15" aria-label="Vertical Spacer"><div style="width: 15px;"></div></td><tr><td></td></tr><tr><td height="16" aria-label="Horizontal Spacer"></td></tr><tr><td><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual; margin: 0px; padding: 0px; text-align: right; display: inline-block;"><tbody><tr style="text-align: right;"><td><a href="https://www.linkedin.com/company/com/?viewAsMember=true" style="display: inline-block; padding: 0px; background-color: rgb(0, 0, 0); border-radius: 50%;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-dark-2x.png" alt="linkedin" width="24" loading="lazy" style="background-color: rgb(228, 228, 228); max-width: 135px; display: block; border-radius: inherit;"></a></td><td width="5" aria-label="Vertical Spacer"><div style="width: 5px;"></div></td><td><a href="https://www.instagram.com" style="display: inline-block; padding: 0px; background-color: rgb(0, 0, 0); border-radius: 50%;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-dark-2x.png" alt="instagram" width="24" loading="lazy" style="background-color: rgb(228, 228, 228); max-width: 135px; display: block; border-radius: inherit;"></a></td><td width="5" aria-label="Vertical Spacer"><div style="width: 5px;"></div></td></tr></tbody></table></td></tr></tr></tbody></table><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Usual;"><tbody><tr><td height="16" aria-label="Horizontal Spacer"></td></tr><tr><td><td colspan="3" style="max-width: 300px; font-size: 12px; padding-top: 1rem;"><div class="legal-content">

LG Thomas

 

[msi]

Wenn du den HTML-Code in Code-Tags postest, sieht sich das vielleicht jemand an, aber dieser Buchstabensalat ist völlig unleserlich.

 

[Sempervivum]

Hallo Thomas,
solch einen senkrechten Balken kannst Du sehr leicht durch ein Border erzeugen:

                <td
                    style="border-left: 2px solid black; vertical-align: middle; text-align: left; padding-left: 15px; width: 50%;">
                    <h2
                        style="margin: 0px; font-size: 18px; font-family: Usual; color: rgb(0, 0, 0); font-weight: 600;">
                        <span>Vorname</span><span>&nbsp;</span><span>Name</span>
                    </h2>
                    <p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
                        <span>Inhaber</span>
                    </p>
                </td>

Davon abgesehen ist das HTML noch fehlerhaft und kann sicher deutlich vereinfacht werden. Wie ist das denn entstanden?

BTW, @msi : Kein HTML-Editor zur Hand ?

 

[msi]

Kein HTML-Editor zur Hand

Bin ich für lesbaren HTML-Code zuständig?