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

我正在尝试创建一个如下所示的电子邮件模板。我用过表。除了图像未显示在正确的位置之外，我可以做所有事情。图像应该显示在容器的中间和顶部（参见屏幕 1），但我无法完成它。我试图提供negative margin to container，但 gmail 和其他邮件服务忽略了负边距。

这是到目前为止我能够完成的事情。

代码已存在here。有人可以帮忙解决这个问题吗？

更新的答案：

您不能在 html 电子邮件中使用负边距。为了模仿这一点，有两种方法可以做到这一点：嵌套表方式和更复杂的 rowspan 方式：

<!-- 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>