HTML表格重构需严格包含（必要时），显式包裹表头与数据行；用控制列宽，禁用单元格内联width；rowspan/colspan须精确计数；统一CSS类管理样式，禁用内联padding/text-align。
HTML表格重构不是简单地把 <table> 换个 class 或加点 CSS，而是围绕语义正确性、结构健壮性和渲染一致性做系统性调整。多数“样式崩了”“打印错位”“屏幕阅读器读不出”的问题，根源都在初始结构缺陷。
<h3>表格必须包含 <code><thead>、<code><tbody>，不能省略
<p>浏览器对缺失 <code><thead> 或 <code><tbody> 的表格解析不一致：Chrome 可能自动补全，Firefox 和打印预览则常把第一行当普通数据行处理，导致表头不固定、<code>tfoot 无法跨页重复。更关键的是，无障碍工具依赖这些标签识别逻辑分区。
- 即使只有一行表头、一行数据，也要显式包裹：
<thead><tr><th>...</th></tr></thead>+<tbody><tr><td>...</td></tr></tbody> - 动态生成 HTML（如 SQL Server 的
@tableHTML）最容易漏掉这两层——拼接字符串时若没写<thead>，就等于放弃语义控制权 <li><code><tfoot> 虽可选，但需放在 <code><tbody> 之后、<code>
colgroup 和 col 是列宽控制的唯一可靠方式
用 width 属性或 style="width:20%" 直接写在 <th> 或 <code><td> 上，会导致列宽在不同内容长度下严重漂移；而 <code>table-layout: fixed 配合 <col> 才能真正锁定列宽。
- 必须把
<colgroup></colgroup>放在<thead> 之前（紧贴 <code><table> 开始），否则无效 <li>每一列对应一个 <code><col>，不要靠colspan数量推算——<col span="2">不等价于两个独立<col> - 避免混合使用：
<col style="width:150px">+<th width="20%"> 会触发浏览器冲突，优先级不可控 <h3>合并单元格（<code>rowspan/colspan）必须严格计数合并出错最常见现象是：某行突然少一列、后续所有行错位、打印时内容截断。根本原因是浏览器按“当前行已占单元格总数”来对齐下一行，一旦
rowspan值算错，整行基准就偏了。立即学习“前端免费学习笔记（深入）”；
- 计算公式：该行实际单元格数 =
<th>/<code><td> 个数 + 所有上一行 <code>rowspan > 1的单元格“遗留占用数” - 调试技巧：在 Chrome DevTools 中右键表格 → “Edit as HTML”，临时删掉
rowspan看是否恢复对齐，确认是不是合并逻辑问题 - 复杂合并（如双层表头+跨行）建议先手绘表格坐标格，标出每个单元格的
rowspan和colspan，再编码——跳过这步，90% 会返工 - 统一用 CSS 类控制：比如
.data-cell { padding: 8px; text-align: right; }，再批量加到<td> <li>表头对齐应和数据对齐逻辑一致：数值型列的 <code><th> 也该 <code>text-align: right，而非默认居中 - 移动端适配时，
padding值需随屏幕缩放——内联样式无法用媒体查询覆盖，必须抽离到 CSS
内联样式优先级高，但别在
<td> 上硬写 <code>padding和text-align表格单元格默认无内边距、文字左对齐，直接在每个
<td> 加 <code>style="padding:6px; text-align:center"看似快，实则埋下三类隐患：代码膨胀、维护困难、响应式失效。重构表格最易被忽略的一点：所有
<tr> 必须严格嵌套在 <code><thead>、<code><tbody> 或 <code><tfoot> 内部，不能直接挂在 <code><table> 下。哪怕只是临时调试，漏掉这一层，就等于放弃了结构可控性。</table> - 计算公式：该行实际单元格数 =
