创建复杂HTML表格时遇单元格布局偏移问题求助

我一眼就看出问题出在哪了——你给右侧文本单元格设置了rowspan="10"，但左侧实际上只有3行内容。当右侧的文本量变大时，浏览器会强制把这个跨10行的单元格高度撑起来，可左边根本没那么多行来“匹配”这个高度，结果第三行的三个小单元格就被挤到右侧内容的底部去了，完全偏离了你想要的布局。

修正方案：用嵌套表格替代跨行列布局 #

最稳妥的办法是把左侧的所有内容打包到一个单元格里，内部用嵌套表格来组织结构，这样左右两个单元格就变成了同级关系，各自的高度由自身内容决定，不会互相干扰。修改后的代码如下：

<table border="0" cellpadding="0" width="100%">
  <tr>
    <!-- 左侧内容容器 -->
    <td style="vertical-align:top" width="27%">
      <table border="0" cellpadding="0" width="100%">
        <tr>
          <td style="vertical-align:top" colspan="3">
            <div style="text-align:center">
              <img src="IMAGE_URL" hspace="10"/><br/>
              <a href="URL" title="TITLE" target="_blank">
                <img src="IMAGE_URL" onmouseover="this.src='IMAGE_URL'" onmouseout="this.src='IMAGE_URL'"/>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td style="vertical-align:top; line-height:20px; font-size:15pt;" colspan="3">
            <br/><div style="text-align:center"><b>TEXT</b></div>
          </td>
        </tr>
        <tr>
          <td style="vertical-align:top; line-height:20px" width="10px">
            <p style="text-align:right">TEXT<br/>TEXT<br/>TEXT</p>
          </td>
          <td style="vertical-align:top; line-height:20px" width="10px">
            <p style="text-align:right">TEXT<br/>TEXT<br/>TEXT</p>
          </td>
          <td style="vertical-align:top; line-height:20px" width="10px">
            <p style="text-align:left">TEXT<br/>TEXT<br/>TEXT</p>
          </td>
        </tr>
      </table>
    </td>
    <!-- 右侧文本容器 -->
    <td align="justify" style="vertical-align:top; line-height:20px" width="73%">
      <font size="3">这里可以放大量文本内容，不会再影响左侧布局了</font>
    </td>
  </tr>
</table>

额外优化建议 #

• 我把过时的<center>标签换成了CSS的text-align:center，这是更符合现代标准的写法；
• 尽量减少rowspan和colspan的滥用，这类属性在复杂布局里很容易导致不可预期的排版问题；
• 可以把内联样式抽出来写成外部CSS类，让代码更整洁易维护。

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