<table>-表格容器

<table> 是 HTML 中用于创建表格的核心标签，它通过结构化方式组织数据，支持行、列、表头等元素的嵌套组合。表格在数据展示、布局设计等场景中广泛应用，但需注意语义化和可访问性。

<table> 的基本结构

一个完整的表格由 <table> 标签包裹，内部包含行（<tr>）、单元格（<td>）和表头（<th>）等子元素。以下是最简单的表格示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

渲染效果：

表格的分区结构

表头区域 <thead>

用于定义表格的标题行，通常包含 <th> 元素：

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
</table>

表体区域 <tbody>

包含表格的主要数据内容：

<tbody>
  <tr>
    <td>笔记本电脑</td>
    <td>¥5999</td>
  </tr>
</tbody>

表尾区域 <tfoot>

常用于汇总行：

<tfoot>
  <tr>
    <td>总计</td>
    <td>¥5999</td>
  </tr>
</tfoot>

完整示例：

<table>
  <thead>
    <tr><th>项目</th><th>金额</th></tr>
  </thead>
  <tbody>
    <tr><td>收入</td><td>¥5000</td></tr>
    <tr><td>支出</td><td>¥2000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>结余</td><td>¥3000</td></tr>
  </tfoot>
</table>

单元格合并技术

跨列合并 colspan

合并水平方向的单元格：

<table>
  <tr>
    <th colspan="2">用户信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>电话</td>
  </tr>
</table>

跨行合并 rowspan

合并垂直方向的单元格：

<table>
  <tr>
    <th rowspan="2">月份</th>
    <th>收入</th>
  </tr>
  <tr>
    <th>支出</th>
  </tr>
</table>

复杂合并示例：

<table border="1">
  <tr>
    <td rowspan="2">A1</td>
    <td colspan="2">B1+C1</td>
  </tr>
  <tr>
    <td>B2</td>
    <td>C2</td>
  </tr>
</table>

表格的样式控制

边框属性

通过 HTML 属性控制基础样式（已废弃，建议使用 CSS）：

<table border="1" cellpadding="5" cellspacing="0">

现代 CSS 样式

推荐使用 CSS 进行样式控制：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

响应式表格设计

水平滚动方案

当表格内容过宽时：

<div style="overflow-x:auto;">
  <table>...</table>
</div>

堆叠式布局

在小屏幕设备上的适配方案：

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级表格特性

列分组 <colgroup>

控制整列样式：

<table>
  <colgroup>
    <col style="background-color:yellow">
    <col span="2" style="background-color:lightblue">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

表格标题 <caption>

为表格添加说明：

<table>
  <caption>2023年销售数据</caption>
  <!-- 表格内容 -->
</table>

数据表格实践

动态生成表格

使用 JavaScript 创建表格：

const data = [
  { name: "产品A", price: 100 },
  { name: "产品B", price: 200 }
];

const table = document.createElement('table');
data.forEach(item => {
  const row = table.insertRow();
  row.insertCell().textContent = item.name;
  row.insertCell().textContent = `¥${item.price}`;
});
document.body.appendChild(table);

排序功能实现

通过点击表头排序：

document.querySelector('th').addEventListener('click', () => {
  const rows = [...table.querySelectorAll('tr:not(:first-child)')];
  rows.sort((a,b) => 
    a.cells[0].textContent.localeCompare(b.cells[0].textContent)
  );
  rows.forEach(row => table.appendChild(row));
});

表格的可访问性

ARIA 角色

增强屏幕阅读器支持：

<table role="grid">
  <tr role="row">
    <th role="columnheader">名称</th>
  </tr>
</table>

关联单元格

使用 headers 属性：

<th id="name">姓名</th>
<td headers="name">李四</td>