tbody 不是可选的装饰标签，因为浏览器会自动补全缺失的 tbody，导致 dom 结构与源码不一致，引发选择器误匹配、样式污染、js 操作错位等问题；必须显式包裹全部数据行以确保语义清晰、控制精准。
为什么 tbody 不是可选的“装饰标签”？
浏览器会自动补全缺失的 tbody，但这种隐式行为会让 DOM 结构和你写的 HTML 不一致——比如用 document.querySelector('table tr') 获取行时，实际拿到的是 tbody 里的 tr，而你以为它直接挂在 table 下。调试时容易误判层级，尤其配合 jQuery 或现代框架（如 React 中手动操作 DOM）时更易出错。
明确写出 tbody 能让结构意图清晰：表头用 thead，主体数据用 tbody，页脚用 tfoot（如有）。这不是“多此一举”，而是让 HTML 语义真实反映逻辑分层。
tbody 必须包裹所有数据行，不能只包一部分
常见错误是只把前几行放进 tbody，剩下几行裸写在 table 下。这会导致浏览器强制重排：它会把那些裸 tr 移进一个自动生成的 tbody，结果页面出现两个 tbody（一个你写的，一个浏览器塞的），CSS 选择器或 JS 查询可能漏掉部分行。
- ✅ 正确写法：
<table> <thead>...</thead> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> - ❌ 错误写法：
<table> <thead>...</thead> <tbody><tr>...</tr></tbody> <tr>...</tr> </table> - 如果表格没有
thead或tfoot，tbody仍需存在，且必须包含全部tr
用 CSS 选择器精准控制主体样式，避开“全局 tr”陷阱
直接写 table tr { ... } 会同时影响 thead 和 tfoot 里的行，导致表头字体被意外加粗、背景色污染。用 tbody tr 就能干净隔离主体样式。
例如固定表头滚动时，常需给 tbody 设置 display: block; max-height: 200px; overflow-y: auto;，而保持 thead 固定不动——没 tbody 就没法这样拆分控制。
-
tbody tr:hover { background-color: #f5f5f5; }—— 只高亮数据行，不影响表头 -
tbody tr:nth-child(even) { background-color: #fafafa; }—— 隔行变色更可靠 - 避免用
table > tr：它永远匹配不到任何元素，因为所有tr都在thead/tbody/tfoot内部
动态插入行时，别往 table 直接 appendChild
JS 里用 table.appendChild(tr) 看似简单，但新 tr 会被塞进浏览器自建的 tbody，而非你预期的位置。如果页面已有显式 tbody，再往 table 插入就会造成结构混乱。
- ✅ 正确做法：先获取
tbody元素，再调用tbody.appendChild(tr) - ✅ 更稳妥：用
table.querySelector('tbody') || table.appendChild(document.createElement('tbody'))确保tbody存在 - ⚠️ 注意：jQuery 的
$('table').append(...)同样有这个问题，应改用$('table tbody').append(...)
可读性不只是“人看着舒服”，更是让 DOM 操作、样式作用域和浏览器解析行为都落在预期轨道上。少一层隐式假设，就少一个深夜调试的 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
