参考资料

1. HTML 用于双向重写
2. HTML 表格空间
3. HTML 用于联系信息的
4. HTML <cite>用于著作标题的
5. 如何添加按钮的过渡动画效果？
6. http-equiv=&quot;expires&quot; 模拟 HTTP 头部中的 Expires 字段
7. HTML 内联 元素
8. 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;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。