Space between table rows in html email signature from Outlook - html

Question

I am building a email signatures and have trouble on Android. Everywhere works fine, but in Android email client i have big spaces between table rows. I send signature from MS Outlook 2013 and Outlook add to code own span's:
<span style=3D'font-size:12.0pt;font-family:"Times New =Roman","serif"'> <o:p></o:p></span>
I don't know what's that but 99% it's a reason of troubles.
Original code looks like this:
<tr>
<td width="40px"></td>
<td width="20">
<span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: bold;color: #004e7c;">
W
</span>
</td>
<td width="260px" >
<span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: regular; font-style: italic; color: #004e7c;">
example.com
</span>
</td>
</tr>
When I send email from Mailchimp, everything is good and code looks like this (classes form head included to html)
<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
<td width="40px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
<td width="20px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
<span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">
W
</span>
</td>
<td width="260px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
<span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;">
example.com
</span>
</td>
</tr>
But email form Outlook looks like this:
<tr><td =
style=3D'padding:1.5pt 0in 1.5pt 0in'></td><td width=3D20 =
style=3D'width:15.0pt;padding:1.5pt 0in 1.5pt 0in'><p =
class=3DMsoNormal><b><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
W</span></b><span style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'> <o:p></o:p></span></p></td><td style=3D'padding:1.5pt =
0in 1.5pt 0in'><p class=3DMsoNormal><i><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
<a href=3D"http://example.com/"><span =
style=3D'color:#004E7C'>example.com</span></a> </span></i><span =
style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'><o:p></o:p></span></p></td></tr>
There We have this <span>, what causes troubles. How i can eliminate this <span>?

Answer 1

Simple solution is to remove the span and place the styling into the TD tag. This is actually a more reliable way to style text anyway. (Also, when declaring the html width/height, you just do the number, you do not add the px.) It would also be a good idea to add a styling in the stylesheet that 0's the P tags padding and margin as Outlook likes to throw in P tags. E.g.
<style>
p {margin: 0; padding: 0; }
</style>
---------------------------
<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
<td width="40" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
<td width="20" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">W</td>
<td width="260" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;">example.com</td>
</tr>