I'm trying to create a email sign. and I thought I did it but in mobile nested tables rows have extra whitespace, how can I remove it?
What I Wrote:
<table class="tg" border="0" cellspacing="0" cellpadding="0" width="813" height="146" style="display:block; border-collapse: collapse; border:hidden; max-height:156px; max-width:813px">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.isverenim.com">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/a.png" width="250" height="146">
</a>
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/b.png" width="154" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.bariserdem.com"><img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/c.png" width="232" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/d.png" width="71" height="146">
</td>
<td>
<table style="display:block; border-collapse: collapse; border:hidden;" border="0" cellspacing="0" cellpadding="0" width="106" height="146">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="51">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e1.png" width="106" height="51">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.linkedin.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e2.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.twitter.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e3.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="41">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e4.png" width="106" height="41">
</td>
</tr>
</thead>
</table>
</td>
</tr>
</thead>
Related
I have been helping a friend of mine by editing his HTML code. I am also still a newbie so I am not sure what is going on in terms of tags and structure.
It seems unecessairly complicated but I was wondering whether the following piece of code for two tables could be put side-by-side instead of appearing one above the other?
<html>
<head></head>
<body>
<table group_name="Small left image box 2" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" class="" bgcolor="#ffffff">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; height: 5px;" src="http://static.contactlab.it/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center">
<table class="two-col" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;">
<table class="columns" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none; width:580px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;">
<table block_name="Left Column" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" class="">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:188px;" class="column">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" height="282">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="left" height="282">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Text">
<tbody>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 7px;" src="http://static.contactlab.it/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 2px;" src="http://static.contactlab.it/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding: 0px; vertical-align:top; width:2px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="2" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<!-- /tiny -->
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="1" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:2px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="2" height="1" border="0"></td>
</tr>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 2px;" src="http://static.contactlab.it/spacer.gif" width="1" height="2" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;vertical-align:top;" >
<![endif]-->
<table block_name="Right Column" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="right" class="">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center" height="282">
<table class="two-col" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;">
<table class="columns" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none; width:580px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" height="282">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="left" height="282">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Text">
<tbody>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 7px;" src="http://static.contactlab.it/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:280px;" class="padded" align="center">
<a href="#" target="_blank"><img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;"
border="0"></a>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<!-- /tiny -->
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="left">
Lorem ipsum dolor sit amet, consectetur adipisici elit, tempor inc <br> idunt ut labore et dolore <br> magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr tiny_name="Call to action">
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal" align="left">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" bgcolor="#353535">
<tbody>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
<td style="padding: 0px; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color:#ffffff;" class="button" align="center">
<a href="#" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color:#ffffff; text-decoration: none;">
LOREM SIT
</a>
</td>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="1" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;vertical-align:top;" >
<![endif]-->
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="right">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Image">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Don't use table tag repeats, use screen grid system.
You can divide screen using columns.
Please use following code. just copy and paste.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<!-- /tiny -->
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Try to learn CSS.
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Occasionally, I get notified of issues from clients that the HTML email signature I created for them is collapsing upon itself in the default Apple Mail app on iOS.
This tends to only occur when I implement multiple tables on top of each other, which is necessary for designs such as the one below in order to ensure one of the tables has a complete background color, with no hairlines of white in between table cells.
Anyway, what seems to happen is the tables collapse upon each other, but I can't replicate the issue on my iPad 3 running iOS 9.3.5, which is the only Mac device I own and can test installing and sending from (I use Email on Acid to test receiving on multiple devices and platforms).
Below is an example of the issue and the underlying code... Any help would be greatly appreciated... Thanks!
How it should look vs how it sometimes looks from Apple Mail on iOS:
And here's the code for this example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="130" rowspan="4" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
</tr>
<tr>
<td width="295" style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;" width="50"></td>
</tr>
<tr>
<td width="295" valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span>
</td>
</tr>
<tr>
<td width="295" valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;">
<div nowrap style="white-space: nowrap;">
<span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com
</div></td>
</tr>
<tr>
<td width="130" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
<td width="295" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" height="46" bgcolor="#00aeef" valign="middle" rowspan="2" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td width="175" height="23" bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165">
</td>
</tr>
<tr>
<td width="210" height="23" bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td width="425" colspan="2" height="5" bgcolor="#3a3a3c" style="background-color: #3a3a3c; font-size: 5px; line-height: 5px;"> </td>
</tr>
</tbody>
</table>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;">
<img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table>
</body>
</html>
Like i said in my above comment, you are using heights on td's, rowspan and colspan. Try to stay away from them. I have recoded bits and pieces of your HTML and added a few more things.
<table width="425" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="120" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
<td width="295" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;"></td>
</tr>
<tr>
<td valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span></td>
</tr>
<tr>
<td valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;"><div nowrap style="white-space: nowrap;"> <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" bgcolor="#00aeef" valign="middle" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td bgcolor="#00aeef" align="left" valign="top" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00aeef" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Hope this works for you.
Can anyone tell me why the rows in this layout are breaking the width? I know it's a fixed-width static layout, and it's an in-line mess, but this is what we need to use until I can develop a fluid/responsive layout.
Self-taught coder, so there's probably a lot I'm doing wrong here. The layout should be a single column, with one row at the bottom that needs 3 table cells as displayed in the snippet.
<!doctype html>
<html>
<head><title>JFG eNewsletter</title></head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine, WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you're talking about the line just above your footer being slightly narrower than the rest, all you need to do is ensure a constant width for the rows of 600px by adding width: 600px inline to the relevant <tr> element:
<!doctype html>
<html>
<head>
<title>JFG eNewsletter</title>
</head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block; width: 600px;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary
Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible
loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine,
WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hope this helps! :)
I have this "infobox" being sent in an email that is rendering well across most clients except for Outlook 2013. The text in the bottom row of the table is shifted when received by Outlook 2013?
Any ideas?
Here's my code:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style='padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;' class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</tr>
</table>
</td>
<td style='padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->
It looks like the issue was a validation error. You had the closing TR for "Live chat" below the closing TR for "Tweet us". Once moved to correct position works fine.
The other possibility is if you are talking about Outlook 2013 when viewed on a larger DPI screen (https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013) then Outlook 'conveniently' increases the size of your text and images, but does so without truly scaling the whole email to the higher setting, which can royally screw up an email.
If the DPI scaling is your issue, I would use the above article and this recent SO question to hopefully solve your issue: Prevent Images in HTML Email Scaling Up With DPI Scaling, Outlook 2013
Below is info pulled from SO answer above:
Use inline styles and px units on tables.
You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.
<table>
<tr>
<td height="500" style="width: 500px;height: 500px;">
</td>
</tr>
</table>
Add this to your code to make VML scale.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
Use MSO Magic for cellspacing and cellpadding.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>
Below is the code with the validation error fixed:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style="padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;" class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
</tr>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</table>
</td>
<td style="padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->