<tr> 标签仅为布局容器，无数据语义；数据行需由 <tbody> 包裹并配合 <td>/<th> 构成；禁止在 <tr> 中嵌套 <div>，须用 <td> 内部布局；colspan/rowspan 影响视觉列数但不改变 tr.cells.length。
TR 标签本身不定义数据记录，只是容器
<tr> 是 HTML 表格中纯粹的布局结构标签，它不携带语义含义，也不表示“一行数据记录”。浏览器和辅助技术不会把它当作数据单元处理。真正定义数据行语义的是 <tbody> + <tr> 的组合，且需配合 <th>（表头）或 <td>（数据单元格）才能构成可被解析的行式结构。
常见错误是把 <tr> 当作数据模型层的“record”来操作，比如在 JS 中直接给 <tr> 加 data-id="123" 就以为完成了数据绑定——这能用，但不可靠：若后续用 aria-rowindex 或表格导出工具（如 SheetJS）读取，缺失 <thead>/<tbody> 区分会导致索引错位。
- 必须将数据行包裹在
<tbody>内，表头放在<thead>，否则table.rows和table.tBodies[0].rows返回的 NodeList 顺序可能不一致 - 避免在
<tr>上写role="row"—— 原生<tr>已有该 role，重复声明会干扰屏幕阅读器 - 如果要用 JS 动态生成行，优先用
document.createElement('tr')+appendChild()，而非拼接字符串后innerHTML插入，否则事件委托失效、<td>内的<input>状态丢失
水平单元格必须用 TD 或 TH，不能用 DIV 塞进 TR
HTML 规范明确限定：<tr> 的合法子元素只有 <td>、<th>、<template> 和空白字符。把 <div> 直接塞进 <tr> 会导致浏览器自动纠错：DOM 中出现隐式 <tbody>、<tr> 被拆开、甚至整行消失（尤其在 Safari 中）。
典型报错现象：console.log(tr.children) 返回空集合，但 tr.innerHTML 看起来有内容——其实是浏览器把非法结构重排成了 <table><tbody><tr><td><div>...</div></td></tr></tbody></table> 这种嵌套。
- 所有横向单元格一律用
<td>（数据）或<th>（列头），哪怕只是展示文字 - 需要复杂布局？在
<td>内部嵌套<div>、<span>或 Flex 容器，而不是替换<td> - 用 CSS 控制单元格宽度时，优先设
table { table-layout: fixed }+td { width: 120px }，避免依赖内容撑开导致列宽错乱
TR 的 colspan/rowspan 影响行内单元格逻辑数量
colspan 和 rowspan 不改变 <tr> 的 DOM 子元素个数，但会改变其“视觉占据的列数”。这意味着：用 tr.cells.length 获取单元格数时，结果可能小于表格实际列数；而用 tr.querySelectorAll('td, th').length 也一样——它只数显式写的单元格，不管 colspan。
例如：<tr><td colspan="2">A</td><td>B</td></tr> 在 3 列表格中，tr.cells.length === 2，但视觉上占满 3 列。做列对齐、导出 CSV 或键盘导航（如 Tab 键跳转）时，这个差异常被忽略。
- 需要精确列数匹配时，先从
<thead>的第一行算出总列数（遍历th并累加colSpan），再逐行校验 -
rowspan更危险：跨行单元格在后续<tr>中不会再次出现，但逻辑上仍占位——JS 遍历时若没跳过“空位置”，容易误判数据归属列 - 避免嵌套
colspan+rowspan，Chrome 和 Firefox 对双重跨单元格的渲染行为不完全一致
服务端渲染或框架中，TR 不该承担状态管理职责
React/Vue 中常见反模式：把整行数据挂载到 <tr key={id}> 上，然后在 onClick 里从 event.currentTarget 取 dataset。这看似方便，实则破坏了组件粒度和可测试性——点击区域和数据耦合太紧，无法单独复用单元格逻辑，也无法响应键盘空格/回车触发。
更可靠的方式是把数据下放到每个 <td> 或内部按钮，并用事件委托收口：
tbody.addEventListener('click', e => {
const td = e.target.closest('td');
if (td && td.dataset.field === 'status') {
// 处理状态列点击
}
});
- 不要在
<tr>上绑定v-model或useState，状态应属于行对应的数据对象，而非 DOM 节点 - SSR 场景下，
<tr>没有innerHTML属性（它是 HTMLElement，不是 Element），想动态插入内容得用insertAdjacentHTML或append() - 用
getComputedStyle(tr).display === 'none'判断隐藏比检查tr.style.display更准，因为后者不反映 CSS 类或父级影响
<tbody> 的存在、<td> 的合规使用，以及跨行属性带来的隐式列偏移——这些地方不显眼，但一出问题就难定位。 
