标签本身定义表格行，行数等于在//内的实际数量；它只能作为这三个元素的直接子元素，且必须显式写出以确保可选中性和语义正确。

<tr> 标签不“划分”行数，它就是行本身——每出现一次 <code><tr>，浏览器就渲染一行；行数 = <code><tr> 标签在 <code><tbody>（或 <code><thead>/<code><tfoot>）内的实际数量。 <h3>为什么写多个 <code><tr> 才算多行，而不是靠属性控制 <p>HTML 表格是“显式结构”：没有类似 <code>rows="5" 这种声明式属性。行的存在完全依赖于你手写多少个 <tr> 元素。浏览器解析时，遇到一个 <code><tr> 就创建一个行盒（<code>display: table-row），然后把里面所有 <td> 或 <code><th> 按顺序排成一横排。 <p>常见错误现象：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>只写一个 <code><tr> 却指望它自动拆成三行（比如误以为 <code>colspan="3" 能生成三行）

把 <tr> 错放在 <code><table> 外面，导致浏览器静默忽略或重排（DevTools 里看不到该 <code><tr>） <li>用 CSS 的 <code>display: grid 强行套在 <tr> 上，破坏表格语义和可访问性 <h3><code><tr> 必须嵌在哪几个父容器里才合法 <p>根据 HTML5 规范，<code><tr> 只能作为以下三个元素的直接子元素： <ul><li><code><thead>：表头行组（通常放 <code><th>） <li><code><tbody>：主体行组（绝大多数数据行应放这里） <li><code><tfoot>：页脚行组（如汇总行） <p>即使省略 <code><tbody>，浏览器也会自动补上一个隐式的 <code><tbody>，但这个隐式容器无法用 CSS 选中或 JS 查询——所以实际开发中务必显式写出 <code><tbody>，否则用 <code>document.querySelector('tbody tr') 会漏掉内容。

动态增删行时，<tr> 的插入位置决定语义归属 <p>用 JavaScript 操作表格时，不能只往 <code><table> 上调用 <code>insertRow()，必须指定插入到哪个逻辑分组：

• table.tBodies[0].insertRow() → 插入到第一个 <tbody>（推荐） <li> <code>thead.insertRow() → 插入到表头区（适合动态加列标题）
• table.insertRow() → 插入到隐式 <tbody>，不可控，容易和显式 <code><tbody> 混乱 <p>性能影响：频繁操作 <code><tr> 会触发重排（reflow）。如果要批量插入 100 行，别用 100 次 <code>insertRow()，改用 innerHTML 或 DocumentFragment 一次性挂载。

  容易被忽略的语义细节：空 <tr> 和跨行单元格的对齐 <p>一个空的 <code><tr>（里面没 <code><td> 或 <code><th>）在视觉上不占高度，但仍是合法 DOM 节点，会影响 <code>:nth-child(n) 计数、JS 遍历索引，以及屏幕阅读器播报行数。

  当某行中有 <td rowspan="2"> 时，下一行的 <code><tr> 仍需存在，且该行对应列位置必须留空（不能少写一个 <code><td>），否则表格列宽错位、辅助技术识别混乱。正确做法是让下一行的该列用空 <code><td> 占位，或用 <code><td></td> 显式写出。

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