HTML 表格进阶（Advanced HTML Tables）

一、表格的语义化结构

1.1 为什么表格结构如此重要

HTML 表格不仅仅是用来展示网格数据的容器。正确的表格结构对于屏幕阅读器用户理解数据关系至关重要——想象一下一个盲人用户如何理解一个没有表头标识的财务表格？他的屏幕阅读器只能读出"A1 单元格内容，B1 单元格内容"，完全没有上下文。

<table> 元素在 HTML 中有独特的地位：它是少数几个同时具有流内容和短语内容双重内容模型的元素之一，这意味着它可以在特定上下文中作为短语内容使用（如在 <p> 中）。

1.2 完整的表格结构

<table>
  <caption>2024年第四季度销售报表</caption>

  <thead>
    <tr>
      <th scope="col">产品名称</th>
      <th scope="col">10月</th>
      <th scope="col">11月</th>
      <th scope="col">12月</th>
      <th scope="col">总计</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">产品 A</th>
      <td>¥12,000</td>
      <td>¥15,000</td>
      <td>¥18,000</td>
      <td>¥45,000</td>
    </tr>
    <tr>
      <th scope="row">产品 B</th>
      <td>¥8,000</td>
      <td>¥9,500</td>
      <td>¥11,200</td>
      <td>¥28,700</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">季度总计</th>
      <td>¥20,000</td>
      <td>¥24,500</td>
      <td>¥29,200</td>
      <td>¥73,700</td>
    </tr>
  </tfoot>
</table>

结构元素说明：

<caption> 必须作为 <table> 的第一个子元素出现。它描述表格的用途，屏幕阅读器会在用户进入表格时朗读它。

<thead>, <tbody>, <tfoot> 将表格分为逻辑区域。<tfoot> 在源代码中的位置在 <tbody> 之前，但渲染时会在 <tbody> 之后显示——这是为了支持滚动 tbody 时让表尾始终可见。

1.3 单元格关联：scope 和 headers

对于简单表格（每行/列只有一个表头），使用 scope 属性即可：

<th scope="col">  <!-- 列标题 -->
<th scope="row">  <!-- 行标题 -->
<th scope="colgroup">  <!-- 跨越多列的标题 -->
<th scope="rowgroup">  <!-- 跨越多行的标题 -->

对于复杂表格（单元格与多个表头关联），使用 headers 属性：

<table>
  <thead>
    <tr>
      <th></th>
      <th id="h1">物理</th>
      <th id="h2">化学</th>
    </tr>
    <tr>
      <th id="h3">张三</th>
      <th id="h4">李四</th>
      <th id="h5">王五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="h6">期中考试</th>
      <td headers="h4 h6">95</td>  <!-- 李四的成绩 -->
      <td headers="h5 h6">88</td>  <!-- 王五的成绩 -->
    </tr>
  </tbody>
</table>

二、表格布局算法

2.1 表格布局的两种模式

HTML 表格有两种布局算法：自动布局算法（默认）和固定布局算法。

自动布局算法中，浏览器需要遍历所有单元格内容来确定列宽。这提供了最大的灵活性，但性能较差——特别是对于大型表格。

固定布局算法中，列宽由表格第一行的单元格定义，后续行不影响列宽。这性能更好，但灵活性差。

<!-- 自动布局（默认） -->
<table>

<!-- 固定布局 -->
<table style="table-layout: fixed;">

2.2 固定布局的实现

<table style="table-layout: fixed; width: 100%;">
  <colgroup>
    <col style="width: 30%;">  <!-- 第一列占 30% -->
    <col style="width: 20%;">  <!-- 第二列占 20% -->
    <col style="width: 50%;">  <!-- 第三列占 50% -->
  </colgroup>
  <thead>
    <tr>
      <th>名称</th>
      <th>类型</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>类型A</td>
      <td>这是一段比较长的描述文本</td>
    </tr>
  </tbody>
</table>

2.3 自动布局的列宽计算

自动布局按照以下规则分配列宽：

1. 对每个单元格计算最小宽度（内容不换行的宽度）
2. 对每个单元格计算最大宽度（内容可以换行的最大宽度）
3. 根据单元格跨列数分配可用宽度
4. 考虑 table-layout: auto 时的 width 属性约束

/* 单元格宽度约束 */
td, th {
  /* 强制不换行 */
  white-space: nowrap;

  /* 限制最大/最小宽度 */
  max-width: 300px;
  min-width: 100px;

  /* 溢出处理 */
  overflow: hidden;
  text-overflow: ellipsis;
}

三、合并单元格

3.1 rowspan 和 colspan 的使用

<table border="1">
  <tr>
    <!-- 合并两列 -->
    <th colspan="2">合并的单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <!-- 合并两行 -->
    <td rowspan="2">垂直合并</td>
    <td>单元格B</td>
    <td>单元格C</td>
  </tr>
  <tr>
    <!-- 第一列已被合并占用，不需要再定义 -->
    <td>单元格E</td>
    <td>单元格F</td>
  </tr>
</table>

3.2 复杂表格的构建

构建复杂表格时，建议先画出网格草图，标注每个单元格的 rowspan/colspan：

┌─────────┬─────────┬─────────┐
│ 跨2列   │         │ 普通    │
├─────────┼─────────┼─────────┤
│ 普通    │ 跨2行   │ 普通    │
│         ├─────────┼─────────┤
│         │ 跨2行   │ 普通    │
│         │ (续)    │         │
└─────────┴─────────┴─────────┘

<table border="1">
  <tr>
    <td colspan="2">跨2列</td>
    <td>普通</td>
  </tr>
  <tr>
    <td rowspan="3">跨3行</td>
    <td rowspan="2">跨2行</td>
    <td>普通</td>
  </tr>
  <tr>
    <td>普通</td>
  </tr>
  <tr>
    <td rowspan="2">跨2行（续）</td>
    <td>普通</td>
  </tr>
  <tr>
    <td>普通</td>
  </tr>
</table>

四、表格的无障碍

4.1 屏幕阅读器如何处理表格

当屏幕阅读器用户导航到表格时，它会：

1. 首先朗读 caption（如果存在）
2. 朗读表格维度（"3 行 4 列的表格"）
3. 提示表格是否有表头（"包含表头"）
4. 进入表格后，为每个单元格朗读其坐标和内容

对于有正确 scope 标记的表头：

• "第 1 列，列标题：产品名称"
• "第 2 列，列标题：10 月"

4.2 表格无障碍检查清单

<!-- ✅ 每列都应该有 <th scope="col"> -->
<!-- ✅ 每行都应该有 <th scope="row"> -->
<!-- ✅ 复杂表格使用 headers 属性关联 -->
<!-- ✅ 有 caption 描述表格用途 -->
<!-- ✅ 避免空单元格，如果必须空着使用 aria-label -->

<!-- ❌ 不用表格做布局 -->
<!-- ❌ 不在表格中使用 section/article 等语义元素混乱结构 -->
<!-- ❌ 不省略表格标题 -->

4.3 空单元格和视觉占位

<!-- 空单元格应该明确标记，便于屏幕阅读器理解 -->
<td></td>  <!-- 朗读为"空" -->

<!-- 如果空单元格有视觉意义，使用 aria-label -->
<td aria-label="无数据">—</td>

<!-- 视觉占位符不应依赖空格或全角空格 -->
<td>　</td>  <!-- ❌ 这不是真正的空 -->

五、响应式表格

5.1 水平滚动方案

最简单的响应式方案：允许表格水平滚动。

<div style="overflow-x: auto;">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

table {
  min-width: 600px; /* 确保内容不压缩变形 */
}

5.2 卡片式堆叠方案

在移动端，将每行转换为卡片形式：

<table class="responsive-cards">
  <!-- 表格内容 -->
</table>

<style>
@media (max-width: 600px) {
  .responsive-cards,
  .responsive-cards tbody,
  .responsive-cards tr,
  .responsive-cards td {
    display: block;
  }

  .responsive-cards thead {
    display: none;  /* 隐藏表头 */
  }

  .responsive-cards tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }

  .responsive-cards td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  /* 用 ::before 显示列标题 */
  .responsive-cards td::before {
    content: attr(data-label);
    font-weight: bold;
  }
}
</style>

<table class="responsive-cards">
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="产品">iPhone 15</td>
      <td data-label="价格">¥6,999</td>
      <td data-label="库存">有货</td>
    </tr>
  </tbody>
</table>

5.3 固定列方案

对于需要同时看到左右数据的长表格（如金融数据），固定列很有用：

.table-fixed {
  border-collapse: collapse;
  width: 100%;
}

.table-fixed thead th {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  box-shadow: 2px 0 3px rgba(0,0,0,0.1);
}

六、表格与 CSS

6.1 表格特有的 CSS 属性

table {
  /* 边框折叠模式 */
  border-collapse: collapse;
  /* border-collapse: separate; 边框分离模式 */

  /* 单元格间距（仅在分离模式有效）*/
  border-spacing: 10px;

  /* 标题位置 */
  caption-side: top;  /* 默认 */
  /* caption-side: bottom; */

  /* 布局算法 */
  table-layout: auto;  /* 默认 */
  /* table-layout: fixed; */
}

/* 垂直对齐 */
td, th {
  vertical-align: middle;  /* top, middle, bottom */
}

6.2 斑马纹和悬停效果

/* 斑马纹表格 */
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 行悬停效果 */
tbody tr:hover {
  background-color: #f0f0f0;
}

/* 列悬停（需要 JS 或 CSS :has()） */
td:hover,
th:hover {
  background-color: #e0e0e0;
}

6.3 表格单元格尺寸处理

/* 最大宽度约束 */
td {
  max-width: 300px;
}

/* 长文本截断 */
.table-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 允许换行 */
.table-wrap {
  white-space: normal;
  word-break: break-word;
}

七、什么时候不该用表格

7.1 布局不是表格的用途

现代 CSS 提供了足够强大的布局能力（如 Flexbox、Grid），使用 <table> 进行页面布局是过时的做法。表格布局的缺点：

• 语义不正确：屏幕阅读器会将其理解为数据表
• 布局不灵活：表格的单元格总是等高对齐
• 样式控制困难：需要用表格特定属性而非标准 CSS

7.2 替代方案

<!-- ❌ 表格布局 -->
<table class="layout">
  <tr>
    <td class="header">...</td>
  </tr>
  <tr>
    <td class="sidebar">...</td>
    <td class="main">...</td>
  </tr>
</table>

<!-- ✅ CSS Grid 布局 -->
<div class="layout">
  <header>...</header>
  <aside>...</aside>
  <main>...</main>
</div>

<style>
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 250px 1fr;
}
</style>

参考资料

• MDN: HTML table element
• W3C HTML5 Specification — Table processing model
• WebAIM: Data Tables

延展阅读

• MDN: Table accessibility
• A11y Project: Table accessibility
• CSS-Tricks: Complete Guide to the Table Element