表格

讲解

<table> 用来展示二维的结构化数据：成绩表、价格对比、赛程安排——注意是「数据」，不是版式。最基础的骨架是 <tr>（行）套 <td>（单元格）；表头单元格用 <th> 替代 td，浏览器默认加粗居中，更重要的是它携带「我是标题」的语义。给 th 加上 scope="col" 或 scope="row"，能明确告诉屏幕阅读器这个标题管辖一整列还是一整行，读表时会自动报出对应表头，复杂表格的可访问性全靠它。

规范的数据表建议分三段：<thead> 放表头行，<tbody> 放数据行，<tfoot> 放汇总行（如合计）。分段不仅语义清晰，还让长表格打印时每页都能重复表头。<caption> 是表格的标题，必须作为 table 的第一个子元素，用一句话说明「这是什么表」，比在外面包一个 h3 更贴切。

跨行跨列用 colspan（横向合并）和 rowspan（纵向合并）：<td colspan="2"> 占两列，被合并的位置直接少写对应数量的单元格。合并单元格是表格最容易写乱的地方，画个草图数清楚每行实际写了几个单元格再动手。最后强调历史教训：上古时代曾用 table 做整个页面的布局，这是早已被 CSS 取代的反模式——table 只装表格数据，布局交给 Flexbox 和 Grid。

示例

<table>
  <caption>2026 年第一季度销售数据（单位：万元）</caption>
  <thead>
    <tr>
      <th scope="col">地区</th>
      <th scope="col">一月</th>
      <th scope="col">二月</th>
      <th scope="col">三月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">华东</th>
      <td>120</td>
      <td>135</td>
      <td>150</td>
    </tr>
    <tr>
      <th scope="row">华南</th>
      <td>98</td>
      <td>110</td>
      <td>126</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合计</th>
      <td colspan="3">739</td>
    </tr>
  </tfoot>
</table>

想让表格在手机窄屏上不撑破版式，通行的做法是外面包一层容器并允许横向滚动：

.table-wrapper {
  overflow-x: auto;
}

常见坑

• 用 table 做页面布局：两栏、居中都靠表格摆——这是 2005 年之前的做法，语义错乱、难以维护、对移动适配极不友好。
• 表头用 td 加粗冒充 th：视觉上一样，但丢掉了表头语义和 scope 的关联能力，屏幕阅读器无法把数据和表头对应起来。
• colspan/rowspan 后没减单元格：合并了几格，本行就要少写几格，多写的单元格会把整行顶歪。
• 忘记 caption、summary 全靠猜：表格标题让用户在扫读时立刻知道这张表讲什么，也是无障碍的基本要求之一。

小结

table 只装数据：tr 行、td 格、th 表头（配 scope），thead/tbody/tfoot 分段，caption 命名，colspan/rowspan 合并。布局不要用表格。下一章进入交互的大门：表单基础。