HTML中另一个表中的表

在HTML中嵌套一个表格是非常常见的。不过，有时候需要在一个单元格中嵌套另一个表格。

嵌套表格的语法

要在HTML表格中嵌套另一个表格，只需要在一个单元格中添加一个新表格即可。这可以通过<table>标签来完成。以下是一个基本的嵌套表格的示例代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>兴趣</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>32</td>
    <td>
      <table>
        <tr>
          <th>运动</th>
          <th>音乐</th>
          <th>电影</th>
        </tr>
        <tr>
          <td>篮球</td>
          <td>钢琴</td>
          <td>科幻</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这个代码会产生一个类似以下的表格：

| 姓名 | 年龄 | 兴趣 | | ---- | ---- | ------------- | | 张三 | 32 | 运动 音乐 电影 | | | | 篮球 钢琴 科幻 |

嵌套表格的CSS样式

要为嵌套表格添加样式，可以使用CSS。如果不希望内部表格继承外部表格的样式，可以为内部表格设置border-collapse: separate;属性。以下是一个嵌套表格的CSS样式的示例代码：

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  padding: 8px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

table table {
  border-collapse: separate;
  border-spacing: 0px;
}

table table td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: center;
}

table table th {
  padding: 6px;
  text-align: center;
  background-color: #2196F3;
  color: white;
}

这个CSS样式会产生以下的效果：

总结

在HTML中嵌套另一个表格是很简单的。只需要把新的表格作为单元格插入到现有表格中即可。可以使用CSS来添加样式，以使嵌套表格看起来更为清晰。