<table>: 表格标签

最后更新：2026-10-13

<table>表格标签

<table>（表格）元素用于以表格形式展示数据。表格由行（<tr>）和单元格（<td>/<th>）组成，常配合 <thead>/<tbody>/<caption> 使用。

分类	表格
内容模型	可选的 `<caption>`、零个或多个 `<colgroup>`、零个或多个 `<thead>`/`<tbody>`/`<tfoot>`、`<tr>`
允许的父元素	接受流式内容的元素
闭合标签	需要 `</table>` 标签
状态	标准

<table>
  <tr>
    <th>表头</th>
    <td>数据</td>
  </tr>
</table>

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<table>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： 不要用表格做页面布局（如导航栏、侧边栏），那是 CSS 的工作。表格只用于展示真正的表格数据。

Qtable 还能用来做页面布局吗？

A不能，这是被淘汰十多年的做法——表格布局损害可访问性、移动端适配和语义。表格只用于真正的二维数据（成绩单、价目表、对比清单）。布局交给 Flexbox 和 Grid。

Qtable 的行必须写 tbody 吗？

A可以不写——省略 tbody 时浏览器解析器会自动把 <tr> 包进隐式 tbody（DOM 里始终存在）。显式写 tbody 的好处：能单独给它加样式、配合 thead/tfoot 做冻结表头等高级操作。

Q响应式表格怎么做？

A表格天然不擅长窄屏，常用方案：外层容器 overflow-x: auto 横向滚动（最简单）；窄屏把行转卡片（display: block + data-label）；首列冻结。数据列超过 5 列时优先横向滚动方案。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。