<table>-表格容器

<table> 是 HTML 中用于创建表格的核心标签，它通过嵌套其他表格相关标签（如 <tr>、<td>）来构建结构化数据展示。表格在网页中常用于展示统计信息、对比数据或布局内容，其功能远超过简单的行列排列。

<table> 的基本结构

一个完整的表格至少包含以下标签：

• <table>：定义表格容器。
• <tr>：定义表格行。
• <td>：定义单元格（表格数据）。
• <th>：定义表头单元格（加粗居中显示）。

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

表格的扩展标签

表头、表体和表尾

通过 <thead>、<tbody> 和 <tfoot> 将表格分为逻辑部分，便于样式控制和数据分组：

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本</td>
      <td>¥5999</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>¥5999</td>
    </tr>
  </tfoot>
</table>

合并单元格

使用 colspan 和 rowspan 实现单元格合并：

<table border="1">
  <tr>
    <td colspan="2">跨两列</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>单元格B</td>
  </tr>
  <tr>
    <td>单元格C</td>
  </tr>
</table>

表格的样式控制

边框与间距

通过 HTML 属性或 CSS 调整边框和单元格间距：

<!-- HTML 属性（已废弃，建议用CSS） -->
<table border="1" cellspacing="10" cellpadding="5">
  <tr><td>旧式样式</td></tr>
</table>

<!-- CSS 方式 -->
<style>
  table.modern {
    border-collapse: collapse;
    width: 100%;
  }
  table.modern td, table.modern th {
    border: 1px solid #ddd;
    padding: 8px;
  }
</style>

响应式表格

针对小屏幕设备，可通过 CSS 让表格横向滚动：

div.table-container {
  overflow-x: auto;
}

高级应用场景

数据可视化

结合 JavaScript 动态生成表格内容：

<table id="data-table">
  <thead><tr><th>ID</th><th>Value</th></tr></thead>
  <tbody></tbody>
</table>

<script>
  const data = [{id: 1, value: 'A'}, {id: 2, value: 'B'}];
  const tbody = document.querySelector('#data-table tbody');
  data.forEach(item => {
    tbody.innerHTML += `<tr><td>${item.id}</td><td>${item.value}</td></tr>`;
  });
</script>

可排序表格

通过点击表头实现排序功能：

document.querySelectorAll('th').forEach(th => {
  th.addEventListener('click', () => {
    const column = th.cellIndex;
    const rows = Array.from(document.querySelectorAll('tr')).slice(1);
    rows.sort((a, b) => a.cells[column].textContent.localeCompare(b.cells[column].textContent));
    rows.forEach(row => document.querySelector('tbody').appendChild(row));
  });
});

表格的可访问性

ARIA 角色与属性

为屏幕阅读器增强可访问性：

<table role="grid">
  <tr role="row">
    <th role="columnheader">项目</th>
    <th role="columnheader">进度</th>
  </tr>
  <tr role="row">
    <td role="gridcell">任务A</td>
    <td role="gridcell">80%</td>
  </tr>
</table>

标题与描述

使用 <caption> 和 <details> 提供额外说明：

<table>
  <caption>2023年销售数据</caption>
  <details>
    <summary>数据说明</summary>
    <p>数据来源于财务系统季度报表</p>
  </details>
  <!-- 表格内容 -->
</table>

表格的替代方案

CSS Grid 布局

对于非数据型布局，现代 CSS 可能是更好的选择：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  border: 1px solid #000;
  padding: 10px;
}

Flexbox 实现

简单行列布局可以使用 Flexbox：

.flex-table {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
}
.flex-cell {
  flex: 1;
  padding: 8px;
}