Responsive mail signature - html

Question

I've been trying to make responsive mail signature. This is my code.
<!-- --><!-- 1. Google Fonts Code --><!-- 2. Dotty Cell Borders -->
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table class="table" style="background-color: #ffffff; font-family: lato; text-align: left; color: #000000; font-size: 14px;">
<tbody>
<tr style="height: 1px;">
<th class="table__heading" style="width: 100px; padding-right: 20px; padding-left: 20px; text-align: center;" rowspan="4">
<p><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LOGO.png" width="90px" /></p>
<p><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" /> <img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" /> <img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" /></p>
</th>
<td class="table__content" style="font-weight: bold;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="tel:-">-</a></td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="mailto:-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
I found an example how to make second column responsive, but I spent hours on it and can't apply it to my signature...
This is this example:
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>{Display name}</strong><br>Phone {Phone}<br>Email {E-mail}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Company.com</strong>
​</div>
<span style="clear: both;"></span>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
Can someone please tell me how to make it right?

Answer 1

It's recommended to use tables when doing the HTML layout for mails. The different email readers are not really barely compatible with other than tables.
I'd go with a two-column table to achieve what you are looking for, as float is one of that properties that not all readers understand
Something like
<table>
<tr>
<td>
<strong>{Display name}</strong><br>Phone {Phone}<br>Email {E-mail}
</td>
<td>
<strong>Company.com</strong>
</td>
</tr>
</table>