我正在为我公司正在进行的营销制作HTML电子邮件。我不能为我的生活弄清楚我桌子底部的空白。我有嵌套表作为所有电子邮件客户端的优化协议。我不能使用疯狂的CSS,必须是内联或嵌入式(我的平台将运行嵌入式css内联。
我的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Laser Vision Care Center Wants To Help You See More Clearly</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
background:#d7bd83;
}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#e6cc89;color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px">
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0">
</td>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" valign="middle" style="background:#e0c788;text-align:center;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;color:#222961;font-weight:Bold;font-size:20px">"Our Focus Is On The Health Of Your Eyes"</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td width="600" cellpadding="0" cellspacing="0">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/BannerImage.jpg">
</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" width="232">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowTop.jpg">
</td>
<td cellpadding="0" cellspacing="0" width="368" align="right" style="background:#e6cc89;"><p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:22px;color:#6f6f6f;margin-right:20px;">WAKE UP TO CLEAR VISION WITH</span><br>
<span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:27px;color:#6f6f6f;margin-right:20px;">ALL LASER CUSTOM LASIK</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td cellpadding="0" cellspacing="0" width="232">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowSecond.jpg">
</td>
<td cellpadding="0" cellspacing="0" width="368">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ClickHere.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
<td cellpadding="0" cellspacing="0" width="231">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowThird.jpg">
</td>
<td cellpadding="0" valign="top" cellspacing="0" width="369" align="right" style="top-margin:0;"><a href="tel:1-313-724-2733" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:31px;color:#3d3e3e;">or call (313) 724-2733</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td width="600" cellpadding="0" cellspacing="0">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFouth.jpg">
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
<td cellpadding="0" cellspacing="0" width="222" align="left">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFifth.jpg">
</td>
</tr>
</table>
<tr cellpadding="0" cellspacing="0">
<td width="600" align="center">
<table cellpadding="0" cellspacing="15">
<tr>
<td width="41">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Facebook.jpg"></a>
</td>
<td width="40" cellpadding="0" cellspacing="0">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Twitter.jpg"></a>
</td>
<td width="41" cellpadding="0" cellspacing="0">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Instagram.jpg"></a>
</td>
</tr>
</table>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" style="text-align:center;">
<a href="http://www.lvccenter.com" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:12px;color:#6f6f6f;">www.lvccenter.com</span></a>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0" style="text-align:center;">
<p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:10px;color:#6f6f6f;">23522 Michigan Avenue Dearborn, MI 48124</span></p>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:1)
您的第一个差距是因为您的p
个代码之一使用默认边距。让<p style="margin:0;">
修复它(#47行)。
第二个差距是因为你有两个不同高度的图像:ArrowSecond.jpg是73px,而ClickHere.jpg是74px。您需要使它们匹配才能使表格行对齐。
P.S。:您的HTML需要一些小修复。尝试将其提供给html验证器。
P.S.2:单词&#34; WAKE&#34;和&#34;所有&#34;没有垂直排列。