如何使用HTML标签包裹td元素，为指定td块添加边框？

原表格代码：

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

核心结论 #

在HTML表格的规范里，<tr>的直接子元素只能是<td>或<th>，没有原生HTML标签可以直接包裹同一行内的多个<td>元素。如果要实现给包含“Maria Anders”和“Germany”的两个单元格区域添加边框的效果，推荐使用以下方案：

方案1：使用colspan合并列 #

将原本的两个<td>替换为一个带有colspan="2"属性的<td>，把两个内容放在这个合并后的单元格内，再为该单元格设置边框样式。这样既能实现整体边框的效果，又符合表格的HTML规范。

示例代码：

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <!-- 合并Contact和Country列，添加边框 -->
    <td colspan="2" style="border: 1px solid #000; padding: 8px;">
      <div>Maria Anders</div>
      <div>Germany</div>
    </td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

方案2：CSS模拟整体边框（保留原<td>结构） #

如果需要保留两个独立的<td>结构，可以通过CSS调整边框样式，让它们看起来像一个整体：

<table style="width:100%; border-collapse: collapse;">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td style="border:1px solid #000; border-right: none; padding: 8px;">Maria Anders</td>
    <td style="border:1px solid #000; border-left: none; padding: 8px;">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

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