我一直在尝试将HTML电子邮件模板组合在一起工作，并且在所有浏览器中看起来都很棒。除了Outlook电子邮件客户端。
我尝试尽可能谨慎地使用基于表的布局，内联样式。当我使用石蕊试纸测试代码时，代码没有按照应有的方式呈现，我也不知道为什么。
整个部分的边框都不正确，我也看到边框出现了断裂。一个中断在页眉图像中，另一个在页脚中。另外，页眉和页脚中也有一些空白（例如，页眉和页脚部分周围）。
有人能够识别出我在这里可能会缺少什么吗？
下面是下面的代码段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Template 1</title>
</head>
<body style="color: #333; font-family:'Arial', sans-serif; font-weight: normal; text-align: left; font-size:14px; margin: 6px; padding:0;">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0; margin: 0; width:100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border:1px solid #b1b2b3;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:transparent;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td valign="top" colspan="3">
<img src="https://embed.widencdn.net/img/cap/zi5lyt62bm/exact/600x80.jpeg" height="80" width="600" border="0" style="border-style:none;padding:0;display:block;margin:0;" alt="The College of American Pathologists" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center" height="15" colspan="3"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;background-color:transparent;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;font-family:'Arial', sans-serif;line-height: 130%;text-align: left;color: #333;font-size: 18px !important;font-weight: 300 !important;">
<tbody style="border-collapse: collapse;">
<tr style="border-collapse: collapse;">
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
<td valign="top" colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;">
<h2 style="font-size: 20px;margin:0px;font-weight: 500;display: block;font-family:'Arial', sans-serif;line-height: 130%;">Lead-in title</h2>
</td>
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
</tr>
<tr>
<td valign="top" colspan="5" align="center" height="15"></td>
</tr>
<tr style="border-collapse: collapse;">
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
<td align="left" colspan="3" valign="top" style="background-color:transparent !important;color:#333; font-family:'Arial', sans-serif;">
<p style="font-family:'Arial', sans-serif;line-height: 130%;padding: 0px;margin:0;font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
</tr>
<tr style="border-collapse: collapse;">
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
<td align="left" valign="top" style="background-color:transparent !important;color:#333; font-family:'Arial', sans-serif;">
<ul>
<li style="font-family:'Arial', sans-serif;line-height:130%;padding: 0px;margin:0;font-size: 14px;font-weight:500">Nullam sit amet ex pellentesque, accumsan magna id.</li>
<li style="font-family:'Arial', sans-serif;line-height:130%;padding: 0px;margin:0;font-size: 14px;font-weight:500">Sed scelerisque laoreet condimentum. Nulla <strong>sodales tristique</strong> cursus.</li>
<li style="font-family:'Arial', sans-serif;line-height:130%;padding: 0px;margin:0;font-size: 14px;font-weight:500">Ut mattis leo magna, sed hendrerit ligula pulvinar non.</li>
</ul>
</td>
<td valign="top" width="3%" style="background-color:transparent !important;color:#333; font-family:'Arial', sans-serif;"></td>
<td valign="top" width="22%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #2d2d2d;">
<img src="https://embed.widencdn.net/img/cap/be4qzqf76f/exact/140x140.jpeg" height="140" width="140" style="height:140px;border-style:none;padding:0;display:block;margin:0;" alt="Image" />
</td>
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
</tr>
<tr style="border-collapse: collapse;">
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
<td align="left" colspan="3" valign="top" style="background-color:transparent !important;color:#333; font-family:'Arial', sans-serif;">
<p style="font-family:'Arial', sans-serif;line-height:130%;padding: 0px;margin: 0;font-size: 14px;font-weight:500;"><a href="#" style="color:#00a3bb;" target="_blank">Read more</a></p>
<p style="font-family:'Arial', sans-serif;line-height: 130%;padding: 0px;margin:10px 0 10px 0;font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #00a3bb;border-radius: 0px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;font-family:'Arial', sans-serif;">
<tbody>
<tr>
<td align="left" valign="middle" style="color: #FFFFFF;font-size: 12px;line-height: 1;padding: 10px 15px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:'Arial', sans-serif;">
<a href="#" style="color: #FFFFFF;text-decoration: none;font-weight: 600;font-family:'Arial', sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-size: 12px;" target="_blank">Read More >></a>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="11%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse;color: #333;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center" height="15" colspan="5"></td>
</tr>
<!-- END BODY -->
<!-- BEGIN FOOTER -->
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td align="center" valign="top" style="font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;background-color:#00a3bb !important;border-collapse: collapse !important;">
<tr>
<td valign="top" align="center" height="15" colspan="4" bgcolor="#00a3bb"></td>
</tr>
<tr>
<td valign="top" width="11%" bgcolor="#00a3bb" style="padding: 0px;font-family:'Arial', sans-serif;"></td>
<td valign="top" width="50%" bgcolor="#00a3bb" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse: collapse !important;">
<tr>
<td valign="top" bgcolor="#00a3bb" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;text-align: left;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;font-size: 14px;line-height: 130%;color: #333;border-collapse: collapse !important;">
<tr>
<td valign="top" align="left" bgcolor="#00a3bb" style="padding: 0px;font-family:'Arial', sans-serif;">
<address style="color:#fff; font-size:12px; font-style: normal;font-family:'Arial', sans-serif; font-weight: normal;">
<span style="font-weight:600;font-family:'Arial', sans-serif;">XXXX</span><br/><span style="color:#ffffff !important; text-decoration:none !important;font-family:'Arial', sans-serif;">XXXX<br/>XXXX</span><br/><a href="#" style="color:#fff; text-decoration:none;font-style: normal;font-size:12px;font-family:'Arial', sans-serif;">XXXX</a> | <a href="#" style="color:#fff; text-decoration:none;font-style: normal;font-family:'Arial', sans-serif;font-size:12px;">XXXX</a>
</address>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="28%" bgcolor="#00a3bb" style="padding: 0px; font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse: collapse !important;">
<tr>
<td valign="top" bgcolor="#00a3bb" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;text-align: left;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;font-size: 14px;line-height: 130%;color: black;border-collapse: collapse !important;">
<tr>
<td align="right" bgcolor="#00a3bb" valign="top" style="color: #ffffff;font-size: 12px;padding: 0px;" border="0" cellpadding="0" cellspacing="0">
<h3 style="font-size:18px; color:#fff; text-align:right;font-family:'Arial', sans-serif;margin:0;">Connect with us...</h3>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#00a3bb" align="center" height="5" style=" -webkit-text-size-adjust:none;background-color:#00a3bb;"></td>
</tr>
<tr>
<td align="right" bgcolor="#00a3bb" valign="top" style="color: #ffffff;font-size: 12px;font-family:'Arial', sans-serif;padding: 0px;" border="0" cellpadding="0" cellspacing="0">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" bgcolor="#00a3bb">
<a href="XXXX"><img src="https://embed.widencdn.net/img/cap/7tkyrkmwpd/exact/icon-cap.jpeg" height="25" width="25" border="0" alt="CAP Connect" style="display:block;margin:0;"/></a>
</td>
<td width="5%" valign="top" bgcolor="#00a3bb"></td>
<td valign="top" bgcolor="#00a3bb">
<a href="XXXX"><img src="https://embed.widencdn.net/img/cap/ofcf42fbjr/exact/icon-fb.jpeg" height="25" width="25" border="0" alt="Facebook" style="display:block;margin:0;"/></a>
</td>
<td width="5%" valign="top" bgcolor="#00a3bb"></td>
<td valign="top" bgcolor="#00a3bb">
<a href="XXXX"><img src="https://embed.widencdn.net/img/cap/dmkx3d6ahv/exact/icon-tw.jpeg" height="25" width="25" border="0" alt="Twitter" style="display:block;margin:0;"/></a>
</td>
<td width="5%" valign="top" bgcolor="#00a3bb"></td>
<td valign="top" bgcolor="#00a3bb">
<a href="XXXX"><img src="https://embed.widencdn.net/img/cap/3rnxsmjqms/exact/icon-li.jpeg" height="25" width="25" border="0" alt="LinkedIn" style="display:block;margin:0;"/></a>
</td>
<td width="5%" valign="top" bgcolor="#00a3bb"></td>
<td valign="top" bgcolor="#00a3bb">
<a href="XXXX"><img src="https://embed.widencdn.net/img/cap/8dhktwcwv7/exact/icon-yt.jpeg" height="25" border="0" width="25" alt="YouTube" style="display:block;margin:0;"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="11%" bgcolor="#00a3bb" style="padding: 0px;"></td>
</tr>
<tr>
<td valign="top" align="center" height="15" colspan="4" bgcolor="#00a3bb"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN disclaimer // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;background-color:transparent !important;border-collapse: collapse !important;">
<tr>
<td valign="top" align="center" height="15" colspan="4"></td>
</tr>
<tr>
<td valign="top" width="11%" style="padding: 0px;font-family:'Arial', sans-serif;"></td>
<td valign="top" width="50%" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse: collapse !important;">
<tr>
<td valign="top" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;text-align: left;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;font-size: 9px;line-height: 130%;color: black;border-collapse: collapse !important;">
<tr>
<td valign="top" align="left" style="padding: 0px;font-family:'Arial', sans-serif;color:#00a3bb;">
<a href="#" style="color:#00a3bb;">XXXX</a> | <a href="#" style="color:#00a3bb;">XXXX</a> | <a href="#" style="color:#00a3bb;">XXXX</a> | <a href="#" style="color:#00a3bb;"><strong>XXXX</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="28%" style="padding: 0px; font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse: collapse !important;">
<tr>
<td valign="top" style="padding: 0px;font-family:'Arial', sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;text-align: right;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;font-size: 9px;line-height: 130%;color: black;border-collapse: collapse !important;">
<tr>
<td align="right" valign="top" style="color:#00a3bb;font-size: 9px;padding: 0px;" border="0" cellpadding="0" cellspacing="0">
<p style="font-family:'Arial', sans-serif;line-height:130%;padding: 0px;font-size: 9px;color:#333;margin:0;text-align: right;">All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="11%" style="padding: 0px;" ></td>
</tr>
<tr>
<td valign="top" align="center" height="15" colspan="4"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- /framing wrapper -->
<!-- // END BODY -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</center>
</body>
</html>
我附上了我在石蕊中看到的图像。预先感谢您的协助！
Image 1: you can see the border break and the white space (outlook 2013)
