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

Question

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

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

代码存在here .任何人都可以帮忙吗？

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>