tbody标签是语义必需的，非可选；必须显式包裹数据行，否则导致HTML验证失败、CSS选择器失效、JS操作异常及可访问性问题。
tbody 标签不是可选的，而是语义必需的
浏览器和屏幕阅读器默认把 <table> 里的所有 <tr> 当作数据行处理，但一旦你加了 <thead> 或 <tfoot>，就必须显式包裹数据行为 <tbody>，否则 HTML 验证失败，且某些 CSS 选择器（比如 tbody tr:nth-child(odd)）会失效或行为异常。
常见错误是只写 <thead> 和一堆 <tr>，漏掉 <tbody> —— 这会导致 DOM 结构不完整，JS 操作 table.tBodies[0] 时返回空集合。
- 必须成对出现：
<tbody>...</tbody>，不能自闭合 - 一个
<table>可以有多个<tbody>（例如分组数据），但至少一个 - 如果只有数据行、没有表头或页脚，
<tbody>仍推荐显式写出，提升可维护性
tbody 影响 CSS 选择器和滚动性能
给 <tbody> 加 display: block; max-height: 200px; overflow-y: auto; 是实现表头固定、内容滚动的常用手法。但要注意：此时 <thead> 和 <tbody> 的列宽不再自动对齐，需用 table-layout: fixed + 显式设置 <th>/<td> 宽度，或 JS 同步列宽。
- 避免在
<tbody>上直接设height，它不生效；要用max-height+overflow -
tbody tr:hover这类选择器只作用于<tbody>内的行，不会误触表头 - 服务端渲染时若动态插入多段
<tbody>，注意不要让每个都带<tr><td colspan="3">暂无数据</td></tr>，否则语义混乱
JS 操作 tbody 时的典型陷阱
直接用 document.querySelector('table').appendChild(newRow) 会把新行插到表格末尾（可能落在 <tfoot> 后面），而不是 <tbody> 里。正确做法永远指向 tBodies[0] 或用 querySelector('tbody')。
立即学习“前端免费学习笔记（深入）”；
-
table.insertRow()默认插入到第一个<tbody>，但如果 table 没有<tbody>，它会创建一个并插入 —— 这个隐式行为容易导致结构意外 - 用
innerHTML替换整个<tbody>时，确保字符串以<tr>开头，否则浏览器会自动补<tbody>，造成嵌套错乱 - React/Vue 中动态渲染列表时，别把
<tbody>放在循环内部（如v-for包着<tbody>），应循环<tr>，外层保持单个<tbody>
tbody 在可访问性和 SEO 中的实际作用
辅助技术（如 NVDA、VoiceOver）会将 <tbody> 视为“主体内容区”，跳过 <thead> 后直接进入 <tbody> 遍历数据。如果省略 <tbody>，部分读屏软件可能重复播报表头，或无法区分数据与汇总行。
- 搜索引擎解析表格时，
<tbody>内容权重高于<thead>，尤其对结构化数据标记（如 Schema.org 的TableRow）有影响 - 单元格内含链接或按钮时，放在
<tbody>里更符合“操作对象属于数据”的逻辑，而非放在<thead>中误导用户 - 导出为 CSV 时，多数库（如 SheetJS）默认只提取
<tbody>内容，忽略<thead>/<tfoot>—— 这个行为依赖<tbody>存在
最常被忽略的是：即使表格简单，也该写上 <tbody>。它不是装饰，是表格 DOM 的骨架支点。
