HTML邮件中如何实现4个不同高度table并排且不占用上方空闲空间

你当前实现出错的核心原因是所有table都设置了浮动，浮动元素会自动填充上方相邻的空白区域，就会出现你遇到的错位问题。且top属性对非定位元素不生效，所以你给第三个table加的top:20%完全没有作用。

HTML邮件场景下，最兼容、无需使用div的方案是外层套一个两列的父级table，左右列分别存放对应列的两个子table，左右列完全独立，不会出现互相填充空隙的问题，兼容绝大多数邮件客户端。

改后的参考代码如下：

<style>
  .textCenter {
    text-align: center;
  }
</style>
<body>
<!-- 父级容器table，用来做两列布局 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- 左列容器 -->
    <td width="48.5%" valign="top">
      <!-- 左列第一个子table -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td id="td1" class="textCenter" style="text-align: center;">
          </td>
        </tr>
      </table>
      <!-- 左列两个子table之间的间距，可按需调整高度 -->
      <table width="100%" height="20px" cellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table>
      <!-- 左列第二个子table -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td id="td3" class="textCenter" style="text-align: center;">
          </td>
        </tr>
      </table>
    </td>
    <!-- 中间间隙列 -->
    <td width="3%" valign="top"></td>
    <!-- 右列容器 -->
    <td width="48.5%" valign="top">
      <!-- 右列第一个子table -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td id="td2" class="textCenter" style="text-align: center;">
          </td>
        </tr>
      </table>
      <!-- 右列两个子table之间的间距，可按需调整高度 -->
      <table width="100%" height="20px" cellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table>
      <!-- 右列第二个子table -->
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td id="t4" class="textCenter" style="text-align: center;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

补充两个适配HTML邮件的注意点：

• 所有table建议加上cellpadding="0" cellspacing="0" border="0"属性，避免不同邮件客户端的默认边距导致错位
• 样式尽量都写inline行内样式，不要依赖head里的style块，部分邮件客户端会过滤外部/内部样式表
• 给左右列的td加上valign="top"，保证两列内容都从顶部开始排列，不会出现垂直居中的错位

内容的提问来源于stack exchange，提问作者Micko Magallanes