table标签本身不构成可用表格，必须配合tr、th或td才能渲染有效结构；单独的不显示内容，tr是唯一合法直接子元素，th仅用于表头，td用于数据单元格，thead/tbody/tfoot提升语义与样式控制，caption提供无障碍标题。

table 标签本身不构成可用表格，必须配合 tr、th 或 td 才能渲染出有效结构。单独写 <table></table> 在浏览器中不会显示任何内容，甚至可能被解析器忽略。

必须嵌套的三个基础标签：tr、th、td

表格的骨架由这三类标签协同完成：tr 定义行，th 和 td 定义单元格；二者不能直接放在 table 下，必须包裹在 tr 内。

• tr 是唯一合法的 table 直接子元素（除 caption、thead 等语义化分组标签外），漏写 tr 会导致 HTML 结构断裂，浏览器可能自动补全但行为不可控
• th 应仅用于表头，比如首行或首列；混用在数据行里会破坏语义，影响屏幕阅读器和 SEO
• td 用于普通数据单元格，里面可嵌套任意内联或块级内容（如 img、a、div），但避免嵌套 table——现代布局已不推荐“表格套表格”

语义化分组标签：thead、tbody、tfoot

它们不是必需的，但加上后能让结构更清晰、样式更可控、滚动时表头固定等高级操作成为可能。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• thead 必须包含至少一个 tr，且其中单元格应为 th；它默认出现在表格最上方，但 CSS 可改变渲染顺序（如 display: table-header-group）
• tbody 是数据主体，默认隐式存在；显式写出后，多个 tbody 可实现逻辑分组（例如按月份拆分销售数据）
• tfoot 必须写在 tbody 之前（HTML 顺序），但浏览器会自动渲染到底部；适合放汇总行，且在长表格打印时可重复出现在每页底部

caption 标签的位置与作用

caption 是 table 的第一个或最后一个子元素，用于提供表格的标题说明，对无障碍访问至关重要。

• 它不属于表格“内容区域”，不参与行列计算，也不受 colspan/rowspan 影响
• 若用 CSS 隐藏 caption（如 visibility: hidden），屏幕阅读器仍会读出，适合做“视觉隐藏但语义保留”的标题
• 不要用 h2 或 div 替代 caption——前者无法被辅助技术识别为该表格专属标题

真正容易被忽略的是：即使结构完全正确，如果缺失 border-collapse: collapse 这类 CSS，表格默认会有 2px 的 cellspacing（已废弃属性）残留感，看起来松散难看。这不是 HTML 结构问题，但常被误认为是标签没写对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！