创建电子邮件模板出现的问题

Question

我正在尝试创建类似以下的电子邮件模板。我使用了表格，除了图像没有正确显示在容器顶部居中位置外，一切都已经完成(如图1)。我尝试为容器提供负边距，但Gmail和其他邮件服务忽略了负边距。目前为止，我已经实现了下面的效果。代码可以在这里找到。请问有人能帮帮我吗？

- Nikhil N

---

可能是如何在跨客户端HTML电子邮件中使元素重叠？的重复问题。 - Paulie_D

如果是我，我会将顶部边框和图像放在同一行。 - Alex

Answer 1

更新的答案：

在HTML电子邮件中不能使用负边距。为了模仿这个效果，有两种方法可以实现，一种是嵌套表格的方式，另一种是更复杂的跨行方式：

<!-- The nested way -->

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
  <tr>
    <td width="200" height="80"  bgcolor="#007700">
      <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="40" bgcolor="#FFFFFF">&nbsp;
          </td>
        </tr>
        <tr>
          <td height="40" bgcolor="#CCCCCC">&nbsp;
          </td>
        </tr>
      </table>
    </td>
    <td width="100" height="80" bgcolor="#4444FF">
     <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="200" height="80" bgcolor="#FFFFFF">
      <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="40" bgcolor="#FFFFFF">&nbsp;
          </td>
        </tr>
        <tr>
          <td height="40" bgcolor="#CCCCCC">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="500" height="200" colspan="3">&nbsp;
    </td>
 </tr>
</table>

<br><br>

<!-- The fancy rowspan way -->

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
  <tr>
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp;
    </td>
    <td width="100"  height="80" rowspan="2" bgcolor="#4444FF">
     <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" height="40">&nbsp;
    </td>
    <td width="200" height="40">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="500" height="200" colspan="3">&nbsp;
    </td>
 </tr>
</table>

---

原始回答：

对于基本定位：

水平方向使用 align="left|center|right"，垂直方向使用 valign="top|middle|bottom"

以下是如何将图像置于表格中央顶部：

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td height="500" align="center" valign="top">
      <img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table> 

- John

Answer 2

正如我所说：

如果是我，我会将顶部边框和图像放在同一行。- Alex Thomas 23分钟前

请将您的顶部行更改为：

<td valign="bottom">
    <b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;">&nbsp;</b>
</td>
<td class="text-center" width="64">
    <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png">    </td>
<td valign="bottom">
    <b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;">&nbsp;</b>
</td>

查看结果 - http://jsfiddle.net/562ux。

我没有在邮件客户端中测试过这个，但正如@Kheema Pandey所说，你应该尝试使用内联样式。

- Alex

Answer 3

在创建新闻通讯时，使用内联样式是一个好习惯。此外，Outlook不支持负边距属性。

在您的情况下，图像未居中显示，因此您可以在此处使用内联样式 'style="text-align:center;"'。

<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>

- Kheema Pandey