参考资料

1. HTML 超链接
2. HTML移除边框 Iframe
3. HTML 内联式
4. HTML 预期格式文本
5. HTML 数学符号
6. HTML "计算机输出"标记
7. HTML 表格空间
8. HTML 水平线

HTML 表格的嵌套

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;
}