标签必须嵌套在内，否则无效；其直接子元素仅限、、；行内单元格需逻辑对齐列数；样式须用CSS作用于单元格而非；动态操作应使用insertRow()/deleteRow()等原生方法。
tr标签必须嵌套在table里，不能单独存在
直接写 | 数据 |
的语义是“表格中的一行”，它天然依赖 容器。没有 ， 就失去上下文，DOM 解析时可能被丢弃或移到 body 外部。常见错误现象：
页面没显示表格、开发者工具里看不到 节点、CSS 选择器 tr:hover 完全不生效。
- 正确结构只能是：
- 若用 JavaScript 动态插入，也得先确保父元素是
或已存在的 允许的直接子元素只有 、、 会导致解析异常
一行里的单元格数量要对齐，否则语义和渲染都会出问题
同一张表里，所有 应该有相同数量的列（即 或 ），尤其当用了 colspan 或 rowspan 时，必须手动计算“视觉列数”是否一致。否则表格会错位、表头和数据列错配、屏幕阅读器读错行列关系。比如表头是 4 列：| 姓名 |
部门 |
入职 |
薪资 | 里的 也应逻辑上对应这 4 列。- 用
colspan="2" 合并两个单元格，就相当于少了一个独立 ，后面需补足总数（例如：1 个 colspan="2" + 2 个普通 = 视觉 4 列）
- 浏览器不会报错，但
table-layout: fixed 下列宽可能崩坏，打印预览时更明显
- 可借助 DevTools 的“Accessibility”面板检查行列关联是否被正确识别
tr本身不控制对齐或背景，这些必须用CSS
HTML5 已废弃 、、 等属性。现在所有样式都得走 CSS，而且推荐用 class 而非 style 行内写法，便于复用和维护。关键点在于：对齐是作用于单元格内容的，不是整行“居中”——text-align 控制水平，vertical-align 控制垂直，且必须设在 或 上，设在 上无效（除非用 tr td { ... } 这类后代选择器）。- 想让某行高亮？用
+ .warning td { background-color: #fff3cd; }
- 想奇偶行变色？用
tr:nth-child(odd) td { background-color: #f9f9f9; }
- 避免写
—— 它无法被 :hover 或媒体查询覆盖，也不利于主题切换
动态添加/删除行要用 insertRow() 和 deleteRow()，别直接 innerHTML 拼接
用 document.getElementById('myTable').innerHTML += '| 新行 | ' 看似简单，但会触发整个 重绘，丢失已有事件监听、破坏 focus 状态、清空 input 值，还可能因 HTML 字符转义出错。原生 DOM 方法更可靠：
Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
- 添加行：
tableEl.insertRow(-1)（-1 表示追加到末尾），再对返回的 调用 insertCell(0) 插入单元格
- 删除行：
tableEl.deleteRow(index)，index 从 0 开始，注意 tbody 里的行号 ≠ 整个 table 的行号
- 获取某行所有单元格：
trEl.cells 是只读的 HTMLCollection，比 trEl.querySelectorAll('td, th') 更轻量
复杂交互（如拖拽排序、编辑状态保存）建议配合 分组管理，避免操作影响 或
| |
| |
|
| |
| |
