HTML email signatures display issues - html

Question

This is the first html email signature I''ve created and I've now discovered why I dont do them - what a pain!
It seems no matter what I do, it's not displaying correctly in one client or another.
The code I used below is displaying correctly in Android and Mac Outlook clients, however when I first upload it to outlook there is a table wrap error that I corrected by changing the table in outlook to nowrap. But now when this email signature is sent from outlook, it breaks when you look at it on ios.
I know my code probably isnt very good as it's my first time doing these. Could anybody please give me a hand to fix it??
Help me StackOverflow, you're my only hope!
Here is my code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
-->
<!--
<style>
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
</STYLE>
<tr>
<td width="0" bgcolor="#f3f3f1">
</td>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</a>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
<a href="tel:[phone]" style="text-decoration: none;color:#000000">Call the office.
<a href="tel:[phone]" style="text-decoration: none; color: #000000">Call Me.
<a href="mailto:email#domain.com.au" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
<br />
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
</a>
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold">
villagerproperty.com.au
</a>
</p>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png">
<br> <p bgcolour= "ffffff">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p> <br>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
<tr>
<td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
Thankyou #Nathan for all of your help!
Your fix worked great, however when viewing on iOswrapping error
Is this because I have the table width set at a % instead of a fixed px?
I aplogise for all the questions - I'm very new to html signatures and I seem to be having a lot of trouble!

Answer 1

A couple of helpful's for future:
Run your HTML through a w3c HTML validation check (and CSS, but that's less useful). There were quite a few tiny but significant errors: not closing </a> in the right place (it's inline, so close it before a block element like <p> or <br>), or not closing stuff, or forgetting quotes.
If you use https://validator.w3.org/#validate_by_input ignore all the obsolete messages (message filtering button can turn them off) - email is too old school for it!
And seriously, that was all, apart from removing a couple of redundant/empty td's/tables.
There is a possibility Outlook from Windows was messing with your code, it does that. But Outlook from Mac should be no problem.
Here is working code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>