HTML表格必须严格遵循<table>→<thead>/<tbody>/<tfoot>→<tr>→<th>/<td>层级结构，孤立<tr>会触发浏览器错误修复，导致语义丢失、样式失效及辅助技术不可用。
表格标签必须嵌套在 <table> 内部，不能直接放在 <body> 里
HTML 表格不是“写个 <tr> 就能显示”的自由结构。所有行、单元格都必须包裹在 <table> 标签中，否则浏览器会自动修正或渲染异常（比如把孤立的 <tr> 提到 body 外、丢弃样式、甚至触发 quirks mode）。
常见错误现象：
- 只写
<tr><td>A</td></tr>，没包<table>→ 页面不显示表格，开发者工具里能看到 DOM 被重排 - 把
<thead>或<tbody>单独扔在<body>下 → 浏览器强行补全<table>，但结构错乱，CSS 选择器失效
正确层级起点只能是：<table> → （可选 <caption>）→ <thead> / <tbody> / <tfoot> → <tr> → <th> 或 <td>
<thead>、<tbody>、<tfoot> 的顺序不是随意的
这三个标签在 <table> 内部有隐含的语义顺序约束：浏览器期望 <thead> 在前、<tfoot> 在后、<tbody> 居中。虽然 HTML 规范允许 <tfoot> 写在 <tbody> 前（便于渲染时提前显示页脚），但实际书写时仍建议按逻辑顺序排列，否则：
立即学习“前端免费学习笔记（深入）”；
- CSS 的
display: table-header-group等行为可能异常 - 某些屏幕阅读器会按 DOM 顺序朗读，
<tfoot>出现在数据前会造成理解混乱 - 用 JavaScript 遍历
table.tBodies时，tFoot和tHead是独立属性，顺序错乱不影响 JS，但维护成本上升
示例（推荐写法）：
<table>
<caption>销售统计</caption>
<thead>
<tr><th>月份</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>12000</td></tr>
</tbody>
<tfoot>
<tr><td>合计</td><td>12000</td></tr>
</tfoot>
</table>
<tr> 只能直接子元素是 <th> 或 <td>，不能套 <div>
表格行的直接子节点必须是表头单元格或数据单元格，这是 HTML 的内容模型硬性限制。试图在 <tr> 里放 <div>、<p> 或其他块级元素，浏览器会自动拆解并移出表格结构——轻则样式失效，重则 DOM 错位。
典型踩坑场景：
- 想给某行加背景色或边框，直接写
<tr><div class="highlight"><td>...</td></div></tr>→<div>被提到<table>外，<tr>变空 - 用 CSS Flex 布局改造
<td>内容，却把display: flex错加到<tr>上 → 失效，因为<tr>的 display 默认是table-row，且不能被 flex 替代
正确做法：样式直接作用于 <tr> 或 <td>；复杂布局需求应通过 <td> 内部嵌套实现，而非破坏表格层级。
合并单元格时，rowspan 和 colspan 影响的是后续行/列的布局逻辑
这两个属性不是“画个大格子”，而是告诉浏览器：“这个单元格要占据接下来的 N 行/N 列，后面那些位置就跳过”。所以它们必须配合整体结构理解，否则容易漏掉空单元格导致错行。
关键点：
-
rowspan="2"的<td>所在行之后的下一行，对应列位置必须留空（不写<td>），否则会被当成新单元格，破坏对齐 -
colspan="3"后，同一行内需减少两个<td>（因为已占三列，本该有三个单元格的位置只剩一个） - 混合使用时，优先计算
rowspan对行的影响，再处理colspan对列的影响，顺序反了极易出错
简单验证方法：数每行 <th>/<td> 总数是否一致（合并后该行数量会减少），否则表格必然变形。
<thead> 消失导致打印样式错乱，或辅助技术无法识别表头关联。动手前先默念一遍层级链：table → thead/tbody/tfoot → tr → th/td。 
