跳到主要内容

HTML Table 表格结构

面试速答（30 秒版 TL;DR）​

  • HTML 表格的核心结构是：table、caption、colgroup、thead、tbody、tfoot、tr、th、td。
  • 语义上：表格适合展示二维数据，不适合做页面整体布局。
  • 结构上：行是 tr，表头单元格常用 th，普通单元格用 td；thead / tbody / tfoot 用来分区。
  • 高频面试点：
    • 浏览器会在很多情况下 自动补 tbody
    • th 应配合 scope 提升可访问性
    • 合并单元格靠 colspan / rowspan
    • 大表格布局性能和列宽控制常结合 table-layout: fixed

先建立结构图​

最小可用示例​

<table>
  <caption>
    前端岗位面试结果
  </caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">岗位</th>
      <th scope="col">结果</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>前端工程师</td>
      <td>通过</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>前端实习生</td>
      <td>待定</td>
    </tr>
  </tbody>
</table>

这段结构基本覆盖了面试里最常讲的骨架。

每个标签分别做什么？​

标签作用备注
table整个表格容器表格根元素
caption表格标题语义和可访问性都很重要
colgroup / col列级样式或宽度配置适合统一控制列
thead表头区域通常放列标题
tbody表体区域正文数据
tfoot表尾区域汇总、统计、备注
tr一行table row
th表头单元格header cell
td普通单元格data cell

高频考点 1：浏览器会自动补 tbody​

很多人直接这样写：

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

浏览器在解析 DOM 时，通常会自动补成：

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

所以面试里如果被问“为什么 table > tr 选不中”，常见原因就是 真实 DOM 树里中间多了一层 tbody。

高频考点 2：th 不只是“加粗”​

很多人误以为 th 只是默认粗体居中。更重要的是它有 表头语义。

<tr>
  <th scope="col">姓名</th>
  <th scope="col">岗位</th>
  <th scope="col">结果</th>
</tr>

scope 常见取值：

  • col：这个表头对应一列
  • row：这个表头对应一行

这样屏幕阅读器在读某个单元格时，更容易知道“这个值属于哪一列/哪一行”。

高频考点 3：合并单元格​

横向合并：colspan​

<tr>
  <th colspan="3">2026 春招结果汇总</th>
</tr>

纵向合并：rowspan​

<tr>
  <th rowspan="2" scope="row">前端</th>
  <td>一面</td>
  <td>通过</td>
</tr>
<tr>
  <td>二面</td>
  <td>待定</td>
</tr>

面试表达建议：

  • colspan 合并列
  • rowspan 合并行
  • 合并后需要同步调整其它行列的单元格数量，否则结构容易错位

高频考点 4：表格布局算法​

CSS 里常见两个取值：

table {
  width: 100%;
  table-layout: auto;
}
table {
  width: 100%;
  table-layout: fixed;
}

区别：

取值特点适用场景
auto浏览器会根据内容算列宽内容不固定、希望自适应
fixed更快，列宽更可控大表格、后台列表、希望稳定截断

工程里如果表格很大、列很多、内容长度差异大，fixed 往往更稳。

Table 为什么不推荐做页面布局？​

历史上确实有人拿表格做整站布局，但现代项目不推荐，原因主要有三类：

  1. 语义错误：表格是数据结构，不是页面布局系统
  2. 可维护性差：嵌套复杂、响应式改造困难
  3. 可访问性差：屏幕阅读器会按“表格数据”理解整页内容

所以现代页面布局应该优先用 flex、grid、普通文档流，而不是 table。

典型题 & 标准答法​

Q1：HTML table 的基本结构有哪些？​

答法建议：

  • 根元素 table
  • 可选 caption、colgroup
  • 分区 thead、tbody、tfoot
  • 每一行是 tr
  • 表头单元格 th，普通单元格 td

Q2：th 和 td 的区别是什么？​

答法建议：

  • 不只是样式差异，关键是语义差异。
  • th 表示表头单元格，常配合 scope。
  • td 表示普通数据单元格。

Q3：为什么很多时候明明没写 tbody，DOM 里却有？​

答法建议：

  • 因为浏览器在解析表格时会自动补齐 tbody。
  • 所以 DOM 结构和源码结构可能不完全一样。

常见追问​

  • tfoot 必须写在最后吗？
    • 源码里不一定必须放最后，但语义上它表示表尾区域。现代浏览器会按表格模型解析。
  • caption 和标题 h2 有什么区别？
    • caption 是表格自己的标题语义，和 h2 这种文档标题不是一回事。
  • 响应式表格怎么做？
    • 常见做法是横向滚动、列裁剪、卡片化重排，但这已经超出纯 HTML 结构问题，偏 UI 设计了。

易错点 / 坑​

  • 把表格当布局工具。
  • 只用 td，不用 th 和 scope，导致可访问性差。
  • 忽略浏览器自动插入 tbody，写选择器或脚本时踩坑。
  • 合并单元格后不校正结构，导致视觉和语义错位。

速记要点（可背诵）​

  • 表格 = table + 分区 + 行 + 单元格。
  • thead/tbody/tfoot 管区域，tr 管行，th/td 管单元格。
  • 浏览器常自动补 tbody。
  • 表格用于二维数据，不用于整页布局。