如何用HTML实现表格垂直对齐，使内容对应指定列？

原代码存在标签嵌套错误、布局逻辑混乱的问题，导致内容无法正确对齐。以下是修正后的实现方案，确保指定内容垂直对应到目标列下方：

核心修正点 #

• 移除重复的<html>/<body>标签，保证页面结构合法
• 将底部的Number和Lottery内容嵌入到对应列的单元格内，而非独立成表格
• 修复未闭合的标签，规范表格嵌套结构
• 利用表格的自然布局实现垂直对齐，无需额外复杂样式

修正后的完整代码 #

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <br><br><br>
  <!-- 主表格：三列布局，对应三个Linked Element -->
  <table width="900" border="1" cellpadding="10" cellspacing="0">
    <tr>
      <!-- 第一列：Linked Element -->
      <td style="vertical-align: top;">
        <table width="100%" border="0" cellpadding="5">
          <tr>
            <td><strong>Linked Element</strong></td>
          </tr>
          <tr>
            <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
          </tr>
          <tr>
            <td>Number 546</td>
          </tr>
          <tr>
            <td>Lottery 1</td>
          </tr>
        </table>
      </td>
      <!-- 第二列：Linked Element1 -->
      <td style="vertical-align: top;">
        <table width="100%" border="0" cellpadding="5">
          <tr>
            <td><strong>Linked Element1</strong></td>
          </tr>
          <tr>
            <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
          </tr>
          <tr>
            <td>Number 547</td>
          </tr>
          <tr>
            <td>Lottery 2</td>
          </tr>
        </table>
      </td>
      <!-- 第三列：Linked Element2 -->
      <td style="vertical-align: top;">
        <table width="100%" border="0" cellpadding="5">
          <tr>
            <td><strong>Linked Element2</strong></td>
          </tr>
          <tr>
            <td><img src="img_girl.jpg" height="180" width="180" border="0"></td>
          </tr>
          <tr>
            <td>Number 548</td>
          </tr>
          <tr>
            <td>Lottery 3</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

说明 #

• 主表格设置宽度为900px（三列各300px），通过cellpadding和cellspacing控制内边距和间距
• 每列的vertical-align: top确保所有列从顶部开始对齐，避免因内容高度不同导致错位
• 每个列内的子表格包含标题、图片、对应编号和抽奖信息，实现内容垂直对应到列下方的需求

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