<tr>标签本身定义表格行，行数等于<tr>在<thead>/<tbody>/<tfoot>内的实际数量；它只能作为这三个元素的直接子元素，且必须显式写出<tbody>以确保可选中性和语义正确。
<tr> 标签不“划分”行数，它就是行本身——每出现一次 <tr>，浏览器就渲染一行；行数 = <tr> 标签在 <tbody>（或 <thead>/<tfoot>）内的实际数量。
为什么写多个 <tr> 才算多行，而不是靠属性控制
HTML 表格是“显式结构”：没有类似 rows="5" 这种声明式属性。行的存在完全依赖于你手写多少个 <tr> 元素。浏览器解析时，遇到一个 <tr> 就创建一个行盒（display: table-row），然后把里面所有 <td> 或 <th> 按顺序排成一横排。
常见错误现象：
- 只写一个
<tr>却指望它自动拆成三行（比如误以为colspan="3"能生成三行） - 把
<tr>错放在<table>外面，导致浏览器静默忽略或重排（DevTools 里看不到该<tr>） - 用 CSS 的
display: grid强行套在<tr>上，破坏表格语义和可访问性
<tr> 必须嵌在哪几个父容器里才合法
根据 HTML5 规范，<tr> 只能作为以下三个元素的直接子元素：
立即学习“前端免费学习笔记（深入）”；
-
<thead>：表头行组（通常放<th>） -
<tbody>：主体行组（绝大多数数据行应放这里） -
<tfoot>：页脚行组（如汇总行）
即使省略 <tbody>，浏览器也会自动补上一个隐式的 <tbody>，但这个隐式容器无法用 CSS 选中或 JS 查询——所以实际开发中务必显式写出 <tbody>，否则用 document.querySelector('tbody tr') 会漏掉内容。
动态增删行时，<tr> 的插入位置决定语义归属
用 JavaScript 操作表格时，不能只往 <table> 上调用 insertRow()，必须指定插入到哪个逻辑分组：
-
table.tBodies[0].insertRow()→ 插入到第一个<tbody>（推荐） -
thead.insertRow()→ 插入到表头区（适合动态加列标题） -
table.insertRow()→ 插入到隐式<tbody>，不可控，容易和显式<tbody>混乱
性能影响：频繁操作 <tr> 会触发重排（reflow）。如果要批量插入 100 行，别用 100 次 insertRow()，改用 innerHTML 或 DocumentFragment 一次性挂载。
容易被忽略的语义细节：空 <tr> 和跨行单元格的对齐
一个空的 <tr>（里面没 <td> 或 <th>）在视觉上不占高度，但仍是合法 DOM 节点，会影响 :nth-child(n) 计数、JS 遍历索引，以及屏幕阅读器播报行数。
当某行中有 <td rowspan="2"> 时，下一行的 <tr> 仍需存在，且该行对应列位置必须留空（不能少写一个 <td>），否则表格列宽错位、辅助技术识别混乱。正确做法是让下一行的该列用空 <td> 占位，或用 <td></td> 显式写出。
