HTML表格布局求助：尝试实现2行2列布局出现异常

你的代码存在多处HTML结构错误，直接导致2行2列布局失效：

• 表格层级完全混乱：<tr>被错误放在<table>外部，<th>未被<tr>包裹，标签闭合顺序颠倒（比如<section>未闭合就先闭合<th>）
• 错误使用<th>：此处应使用普通单元格<td>，<th>是表头专用元素
• 硬编码的超大内边距（如padding-right:200px、padding-left:300px）导致布局错位
• 未按「行→单元格」的层级构建2行2列结构

修正后的代码 #

<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
  <!-- 标题行：横跨两列 -->
  <tr>
    <td colspan="2" style="padding: 30px; text-align: center;">
      <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span>
    </td>
  </tr>
  <!-- 第一行：2列 -->
  <tr>
    <td style="mso-line-height-rule: exactly; border-radius: 1px; padding: 50px 30px 20px;">
      <img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px;" />
      <p>Earn Points</p>
      <p>Collect 1 point for every S$1 spent online</p>
    </td>
    <td style="mso-line-height-rule: exactly; border-radius: 1px; padding: 50px 30px 20px;">
      <img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px;" />
      <p>Get Rewarded</p>
      <p>Enjoy special rewards by redeeming your accumulated FOB points</p>
    </td>
  </tr>
  <!-- 第二行：2列 -->
  <tr>
    <td style="mso-line-height-rule: exactly; border-radius: 1px; padding: 50px 30px 20px;">
      <img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px;" />
      <p>Early Access</p>
      <p>Get early access to new product launches and sales promotions.</p>
    </td>
    <td style="mso-line-height-rule: exactly; border-radius: 1px; padding: 50px 30px 20px;">
      <img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px;" />
      <p>Tier Benefits</p>
      <p>Advance to next tier for more benefits and discounts.</p>
    </td>
  </tr>
</table>

修复说明 #

1. 重建合法表格层级：严格遵循<table>→<tr>→<td>的嵌套顺序，确保结构符合HTML规范
2. 替换元素类型：用<td>替代<th>，移除多余的<section>标签（表格布局无需此类语义标签）
3. 统一内边距：删除硬编码的超大边距，用均衡的内边距保留原样式效果，避免布局错位
4. 标题跨行处理：通过colspan="2"让标题单元格横跨两列，保证布局完整性

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