The original issue I was having has been very kindly solved and I'm now just looking to get the rest of my signature aligned nicely on the right of the corrected code in the answers. The section I need on the right is:
<td width="" style="padding-top: 0; padding-bottom: 0; padding-left: 15px; padding-right: 0px;">
<table class="ExternalClass" width="170" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td colspan="2" valign="middle" style="padding-bottom: 2px; color: #000000 !important; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif;line-height:15px;">
<b>Ben Powis</b>
</td>
</tr>
<tr>
<td colspan="2" style="color: #000000 !important; font-size: 10px; font-family:Verdana, Arial, Helvetica, sans-serif;padding-bottom:17px;"> Filmmaker </td>
</tr>
<tr>
<td width="20" valign="middle" style="vertical-align: middle; width: 20px; color: #000000 !important; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:2px;line-height:10px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYTQs4EzP_-qXaNPzX5PYAezfZw1RQVQdsjPUhv0MclZM0ajbSrxTGKOmWtcllKm-9EZSeMevtJz3a4L8xf73f8GxZ_8=s2560" height="11" width="11" alt="" />
</td>
<td valign="top" style="vertical-align: top; color: #000000 !important; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:10px;">
<style=" color: #000000 !important; text-decoration: none; font-weight: normal; font-size: 10px;">+44 20 7636 5497</a>
</td>
</tr>
<tr>
<td width="20" valign="middle" style="vertical-align: middle; width: 20px; color: #000000 !important; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:2px;line-height:10px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYT47LE5Vek2JhDA684SvsOdskAKhnw4wInfHGbIyZn9EPhuvIUPgMpP6mnhbgmxGf7g4eLiB84hU4e5gxFYG9Pyfp9Pvg=s2560" height="12" width="11" alt="" />
</td>
<td valign="top" style="vertical-align: top; color: #000000 !important; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:10px;">
<style=" color: #000000 !important; text-decoration: none; font-weight: normal; font-size: 10px;">+44 7904 496406</a>
</td>
</tr>
<tr>
<td width="20" valign="middle" style="vertical-align: middle; width: 20px; color: #16254D; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:0px;line-height:10px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQxt75TGE-8FDRVc_VF0nZbW51k33wlpPrVv1vxfqIma_P2wOmBFtLjZQ5viGso5__OR_drxhSe08Bc4YuKaVJa9hesxQ=s2560" height="11" width="11" alt="" />
</td>
<td valign="top" style="vertical-align: top; color: #000000 !important; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;padding-bottom:0px;line-height:10px;">
<a>
<style=" color: #000000 !important; text-decoration: none; font-weight: normal; font-size: 10px;">quitefranklyproductions.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm having an issue with my HTML email signature not recognizing a table's borderline and the social icons ignoring their vertical middle alignment. Is there any chance someone could point me at something I'm missing? It works fine when sending from Gmail and receives ok in Outlook and Apple Mail. But when I send from Apple Mail, the right sided 1px border line disappears and the social icons ignore their vertical middle alignment. I'm very new to this and employed some freelance help to get it off the ground.
<table class="ExternalClass" width="" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td width="90" valign="middle" style="padding-top: 0px; padding-bottom: 0; padding-left: 0; padding-right: 15px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid 1px #000000; text-align:center;">
<a href="https://www.quitefranklyproductions.com/" style=" color: #0E0E57; text-decoration: none; font-weight: normal; font-size: 10px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQU5Y9jpTc1U1eUbcfgE7yML1JoXGFAouIRsdobjRdwAzwB6tyzgCeWNi3j5Whx_xOYp-UROF-k77T7wKwlomjF9eqOaA=s1600" width="93" height="56" alt="" />
</a>
<br />
<a href="https://twitter.com/QF_production" style="border-width:0px; border:0px; text-decoration: none;">
<img valign="middle" width="24" height="24" style="border: none; width: px; max-width: px !important; height: 24px; max-height: 24px !important;" src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYSREHe5H6_gtIHxKs22OPbHZG8PtUaa4ZgWh1VXVc44F893Go1Dh4SWXNXE-RY-VHKQaOTKPpwZzu2ed6-N14M63PofpA=s2560">
</a>
<a href="https://www.instagram.com/QF_Production/" style="border-width:0px; border:0px; text-decoration: none;">
<img valign="middle" width="24" height="24" style="border: none; width: px; max-width: px !important; height: 24px; max-height: 24px !important;" src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYSP9cqVmMIPFfm6UrpOZ4LMiMLsFY_YrwU-QiqAZxIuovaFnE_q5RnB7Y8G3sYP-EcCxpvGJKpoj3J32qvNbOuO-UMT6Q=s2560">
</a>
<a href="https://www.linkedin.com/company/quite-frankly-productions/" style="border-width:0px; border:0px; text-decoration: none;">
<img valign="middle" width="24" height="24" style="border: none; width: px; max-width: px !important; height: 24px; max-height: 24px !important;" src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQCXDiQwZzMwb7Sbh0VOrqGA22GxjZCTyRKQAIP5cfDSJWZw1ZpBYG-HQUoBWevqKmiNG0adCEvICuol48QR6THUesXQQ=s2560">
</a>
</td>I have been trying to tweak the inline css with not much success...
Your first <td> instances has border-bottom: 0:. This should be border-bottom: 0;. That may fix your border issue. In regards to vertically centered elements, you'll want to place each social media icon image in its own cell and use <td valign="middle">. Overall, if I were to code up your layout for email, it would look more like this...
<!-- Signature -->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-spacing:0 !important; border-collapse:collapse;">
<tr>
<!-- left column -->
<td valign="top" align="left" style="padding-right: 15px; border-right: 1px solid #000000;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-spacing:0 !important; border-collapse:collapse;">
<tr><!-- logo -->
<td valign="top" align="left" style="padding-bottom: 6px;">
<a href="https://www.quitefranklyproductions.com" target="_blank">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQU5Y9jpTc1U1eUbcfgE7yML1JoXGFAouIRsdobjRdwAzwB6tyzgCeWNi3j5Whx_xOYp-UROF-k77T7wKwlomjF9eqOaA=s1600" alt="Quite Frankly Productions" width="93" height="56" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</a>
</td>
</tr>
<tr><!-- social channels -->
<td valign="top" align="center">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-spacing:0 !important; border-collapse:collapse;">
<tr>
<td valign="middle">
<a href="https://twitter.com/QF_production" target="_blank">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYSREHe5H6_gtIHxKs22OPbHZG8PtUaa4ZgWh1VXVc44F893Go1Dh4SWXNXE-RY-VHKQaOTKPpwZzu2ed6-N14M63PofpA=s2560" alt="X" width="24" height="24" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</a>
</td>
<td valign="middle">
<a href="https://www.instagram.com/QF_Production/" target="_blank">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYSP9cqVmMIPFfm6UrpOZ4LMiMLsFY_YrwU-QiqAZxIuovaFnE_q5RnB7Y8G3sYP-EcCxpvGJKpoj3J32qvNbOuO-UMT6Q=s2560" alt="IN" width="24" height="24" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</a>
</td>
<td valign="middle">
<a href="https://www.linkedin.com/company/quite-frankly-productions/" target="_blank">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQCXDiQwZzMwb7Sbh0VOrqGA22GxjZCTyRKQAIP5cfDSJWZw1ZpBYG-HQUoBWevqKmiNG0adCEvICuol48QR6THUesXQQ=s2560" alt="LI" width="24" height="24" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- right column -->
<td valign="top" align="center" style="padding-left: 15px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-spacing:0 !important; border-collapse:collapse;">
<tr>
<td colspan="2" valign="top" align="left" style="padding-bottom:3px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; line-height: 16px; color: #000000;">
Ben Powis
</td>
</tr>
<tr>
<td colspan="2" valign="top" align="left" style="padding-bottom:12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 12px; color: #000000;">
Filmmaker
</td>
</tr>
<tr>
<td valign="middle" align="left" width="20" style="padding-bottom:3px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYTQs4EzP_-qXaNPzX5PYAezfZw1RQVQdsjPUhv0MclZM0ajbSrxTGKOmWtcllKm-9EZSeMevtJz3a4L8xf73f8GxZ_8=s2560" alt="*" width="11" height="11" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</td>
<td valign="middle" align="left" style="padding-bottom:3px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 12px;">
<a href="tel:+44 20 7636 5497" style="color: #000000; text-decoration: none;" target="_blank">+44 20 7636 5497</a>
</td>
</tr>
<tr>
<td valign="middle" align="left" width="20" style="padding-bottom:3px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYT47LE5Vek2JhDA684SvsOdskAKhnw4wInfHGbIyZn9EPhuvIUPgMpP6mnhbgmxGf7g4eLiB84hU4e5gxFYG9Pyfp9Pvg=s2560" alt="*" width="11" height="11" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</td>
<td valign="middle" align="left" style="padding-bottom:3px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 12px;">
<a href="tel:+44 7904 496406" style="color: #000000; text-decoration: none;" target="_blank">+44 7904 496406</a>
</td>
</tr>
<tr>
<td valign="middle" align="left" width="20" style="padding-bottom:3px;">
<img src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYQxt75TGE-8FDRVc_VF0nZbW51k33wlpPrVv1vxfqIma_P2wOmBFtLjZQ5viGso5__OR_drxhSe08Bc4YuKaVJa9hesxQ=s2560" alt="*" width="11" height="11" style="margin:0; outline:none; border:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;">
</td>
<td valign="middle" align="left" style="padding-bottom:3px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 12px;">
<a href="https://quitefranklyproductions.com" style="color: #000000; text-decoration: none;" target="_blank">quitefranklyproductions.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>Regarding the rest of your signature (Name, title, etc.), you can insert that <table> in the parent <td> of my original HTML snippet (see comment 'left column'). I updated my HTML snippet. Note: your snippet contains a opening <span> and a closing </a> around the phone numbers. That's invalid. It's best to wrap phone numbers with an <a href> as shown in my example.
I hope this is helpful.