参考资料

1. HTML 中最常用的
   容器元素
2. Html过滤工具有哪些
3. 如何添加按钮的过渡动画效果？
4. HTML/MarkDown互转有哪些
5. Excel转HTML表格有哪些
6. HTML 常用1600 万种不同颜色颜色代码表
7. HTML 外部样式
8. HTML id 属性在 JavaScript 中的使用

HTML 表格嵌套

基本介绍

HTML 表格嵌套是指在一个表格的单元格(<td>或<th>)中插入另一个完整的表格结构。

相关标签

• <table> - 定义表格

• <tr> - 定义表格行

• <td> - 定义表格单元格

• <th> - 定义表头单元格

• <caption> - 定义表格标题

• <thead> - 定义表头区域

• <tbody> - 定义表格主体

• <tfoot> - 定义表尾区域

基本用法

<table>
  <tr>
    <td>
      <table>
        <!-- 嵌套表格内容 -->
      </table>
    </td>
  </tr>
</table>

实例代码

<table border="1">
  <tr>
    <th>主表格标题1</th>
    <th>主表格标题2</th>
  </tr>
  <tr>
    <td>主表格单元格1</td>
    <td>
      <table border="1">
        <tr>
          <th>嵌套表标题1</th>
          <th>嵌套表标题2</th>
        </tr>
        <tr>
          <td>嵌套单元格1</td>
          <td>嵌套单元格2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

功能特点

1. 可以在单元格中创建更复杂的数据结构

2. 实现表格内容的层级展示

3. 创建多层次的表格布局

CSS 扩展

/* 主表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

/* 嵌套表格样式 */
table table {
  width: 80%;
  margin: 5px auto;
  background-color: #f5f5f5;
}

/* 单元格样式 */
td, th {
  padding: 8px;
  border: 1px solid #ddd;
}

/* 嵌套表格单元格特殊样式 */
table table td {
  background-color: #fff;
}