I need help formatting an HTML/CSS Email Signature - html

Question

I used a free online HTML signature creator but now my always emails land in junk folders when I use the signature.
I read online that the code needs to be formatted correctly to avoid being labeled as spam.
Here's how the signature looks and should look:
and here's my code (I had to remove all links to avoid my question being marked as spam):
<tbody>
<tr>
<td style="font-size:0;height:24px;line-height:0;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:Arial;line-height:1.15;color:#000;">
<tbody>
<tr>
<td style="height:1px;width:91px;vertical-align:top;padding:.01px 1px;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="vertical-align:top;padding:.01px;width:91px;text-align:center;">
<img src="logo" height="90" width="91" style="width:91px;vertical-align:middle;border-radius:0;height:91px;">
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding:.01px 0.01px 0.01px 18px;vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="line-height:1.32;padding-bottom:18px;;font-family:Arial;"><span style="text-transform:initial;font-weight:bold;color:#62738C;letter-spacing:0;line-height:1.92;font-size:20px;"> First Last Name </span><br><span style="text-transform:initial;font-weight:;color:#62738C;line-height:1.2;font-size:14px;"> Astrobnb | Host Services </span></td>
<td style="vertical-align:bottom;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" align="right">
<tbody>
<tr>
<td style="padding:.01px 0.01px 18px 50px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="fb-icon" style="float:left;border:none;" border="0" alt="facebook">
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="ig-icon" style="float:left;border:none;" border="0" alt="instagram">
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="yelp-icon" style="float:left;border:none;" border="0" alt="yelp">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding:.01px 0.01px 18px 0.01px;border-bottom:solid 1px #45668E;border-top:solid 1px #45668E;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;">
<tbody>
<tr>
<td nowrap="" width="383" style="padding-top:18px;white-space:nowrap;width:383px;font-family:Arial;">
<p style="margin:.1px;line-height:1;">
<span style="font-size:12px;color:#62738C;white-space:nowrap;">
<img src="phone-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> 555-555-5555</span> <img src="web-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> astrobnb.co</span> <img src="email-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> email#email.com</span>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody> <table cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;">
<tbody>
<tr>
<td style="line-height:0;"></td>
<span style="display: block; text-align: center;"> <br> <a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width: 6px 100px; border-style: solid; border-color: rgb(36, 160, 237); display: inline-block; background-color: rgb(36, 160, 237); color: rgb(255, 255, 255); font-weight: 500; text-decoration: none; text-align: center; line-height: 30px; font-size: 15px; border-radius: 20px;">Book a Cleaning Today!</a>
</table>
</td>
</tr>
</tbody>
</table>
I’m not well versed in HTML/CSS, I’m very new to it so I’m unsure of how to clean up the code and how to correctly format it.
When I remove the signature from my test emails, my messages land in the appropriate inbox.

Answer 1

Do consider following points while adding raw HTML in email or creating email templates:
Sloppy HTML tends to be characteristic of spammers, spammers are busy spamming, so they don't have the time and resources to test their email code to make sure the content renders well.
While issues with your email rendering and broken HTML might not cause your emails to end up in spam right away, they can annoy your subscribers or they might find your message suspicious and hit the dreaded “mark as spam” button as a result.
Also an email HTML is NOT equal to Web HTML.
There are a lot of obvious HTML tags and CSS attributes that are not supported by major email clients.
The button of the form will require you to use JavaScript (which is a problem).
Most email clients simply don't support flash content as it is considered unsafe for something as sensitive as email. Email clients block emails containing flash. You can use GIFs as an alternative to make your emails more appealing.
Spam filters and more importantly firewalls always take a "better to be safe than sorry" approach. So, all your well-intentioned emails with any type of script will go straight to the SPAM folder.
If your email has different versions of HTML and plain text email or broken HTML, then your emails will go into the spam folder.
Broken HTML will appear sloppy and unreadable on almost all email clients. Not only will users mark your email as SPAM, but it will also alert SPAM filters (they will think you could be a lazy spammer using unsophisticated tools).
Try this and see if this works or else you can modify the HTML as per your need
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Template</title>
</head>
<body>
<table>
<tbody>
<tr>
<td style="font-size:0;height:24px;line-height:0;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:Arial;line-height:1.15;color:#000;">
<tbody>
<tr>
<td style="height:1px;width:91px;vertical-align:top;padding:.01px 1px;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="vertical-align:top;padding:.01px;width:91px;text-align:center;">
<a href="website" style="display:block;" target="_blank" rel="nofollow noreferrer">
<img src="logo" height="90" width="91" style="width:91px;vertical-align:middle;border-radius:0;height:91px;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding:.01px 0.01px 0.01px 18px;vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="line-height:1.32;padding-bottom:18px;;font-family:Arial;">
<span style="text-transform:initial;font-weight:bold;color:#62738C;letter-spacing:0;line-height:1.92;font-size:20px;"> First Last Name </span>
<br>
<span style="text-transform:initial;font-weight:;color:#62738C;line-height:1.2;font-size:14px;"> Astrobnb | Host Services </span>
</td>
<td style="vertical-align:bottom;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" align="right">
<tbody>
<tr>
<td style="padding:.01px 0.01px 18px 50px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="fb" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="fb-icon" style="float:left;border:none;" border="0" alt="facebook">
</a>
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="ig" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="ig-icon" style="float:left;border:none;" border="0" alt="instagram">
</a>
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="yelp" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="yelp-icon" style="float:left;border:none;" border="0" alt="yelp">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding:.01px 0.01px 18px 0.01px;border-bottom:solid 1px #45668E;border-top:solid 1px #45668E;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;">
<tbody>
<tr>
<td nowrap="" width="383" style="padding-top:18px;white-space:nowrap;width:383px;font-family:Arial;">
<p style="margin:.1px;line-height:1;">
<span style="font-size:12px;color:#62738C;white-space:nowrap;">
<img src="phone-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="tel:[phone]" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> 555-555-5555</span>
</a> <img src="web-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="website" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> astrobnb.co</span>
</a> <img src="email-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="mailto:email#email.com" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> email#email.com</span>
</a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<table cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;">
<tbody>
<tr>
<td style="line-height:0;"></td>
<span style="display: block; text-align: center;">
<br>
<a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width: 6px 85px; width: -webkit-fill-available; border-style: solid; border-color: rgb(36, 160, 237); display: inline-block; background-color: rgb(36, 160, 237); color: rgb(255, 255, 255); font-weight: 500; text-decoration: none; text-align: center; line-height: 30px; font-size: 15px; border-radius: 20px;">Book a Cleaning Today!</a>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>