实现含Date、Message列的两列邮件模板时table布局不对齐的HTML调整方法

原代码的核心结构缺陷 #

• 违反HTML表格嵌套规则：<div class='label'>Date</div> 直接放在 <tr> 标签下，没有被 <td> 包裹。主流邮件客户端（Outlook、网易邮箱、QQ邮箱等）对不合法的表格结构会执行容错渲染，自动把游离元素移出表格流，直接打乱垂直排版顺序。
• 两列内部布局参数不统一：右侧嵌套表格没有和左侧表同步设置 border="0"、cellpadding、cellspacing 参数，两侧默认内边距、边框值不一致，从渲染根源上就存在垂直偏移。
• 独立嵌套表格打破行对齐逻辑：Date、Message的标签和对应值分别放在两个独立的嵌套表格里，没有共享同一套行高计算逻辑，单侧内容长度变化时，两侧元素的垂直位置就会自动错开。

兼容全邮件客户端的对齐结构代码 #

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" style="border-collapse: collapse; width: 100%; max-width: 600px;">
  <!-- 标签行：两个标签强制处于同一水平基线 -->
  <tr>
    <td align="left" valign="top" width="50%" style="padding: 10px; border: 0; word-break: break-word;">
      <div class='label' style="font-weight: bold; margin: 0 0 8px 0;">Date</div>
    </td>
    <td align="left" valign="top" width="50%" style="padding: 10px; border: 0; word-break: break-word;">
      <div class='label' style="font-weight: bold; margin: 0 0 8px 0;">Message</div>
    </td>
  </tr>
  <!-- 内容行：与上方标签位置严格对应 -->
  <tr>
    <td align="left" valign="top" width="50%" class="leftColumnContent" style="padding: 0 10px 10px 10px; border: 0; word-break: break-word;">
      <div class='value'><?= $title; ?></div>
    </td>
    <td align="left" valign="top" width="50%" class="rightColumnContent" style="padding: 0 10px 10px 10px; border: 0; word-break: break-word;">
      <div class='value'><?= $title1; ?></div>
    </td>
  </tr>
</table>

长期对齐效果的保障规则 #

• 所有文本、div等非表格元素必须放置在合法的<td>单元格内，禁止直接作为<tr>的直接子元素。
• 两列对应的宽度、内边距、垂直对齐属性必须完全镜像一致，杜绝一侧用内联样式、另一侧靠默认样式的写法。
• 同一水平层级的对应内容（比如同一组的Date和Message标签、同一组的对应值），尽量不要拆成多个独立嵌套表格实现，直接在外层主表格的同一行拆分等宽单元格，从结构层面消除错位可能。
• 所有样式优先写在元素的style内联属性中，避免依赖外部类名的自定义CSS，防止邮件客户端过滤第三方样式导致布局错乱。

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