HTML表格合并单元格需遵循“占位+删除”原则：colspan="n"须删n−1个，rowspan="m"须在后续m−1行同列留空；每行真实列数必须一致，否则导致错位、读屏乱序。
直接改 <table> 标签内部的 HTML 结构和 CSS 样式，就能完成绝大多数表格编辑需求；不需要依赖可视化编辑器或 CMS 后台。
<h3>怎么改表格结构：增删行列、合并单元格</h3>
<p>结构修改必须手动编辑 HTML 标签，浏览器不会自动推导逻辑关系。常见操作对应到具体标签和属性：</p>
<ul><li>加一行：在 <code><tbody> 或 <code><table> 内插入新的 <code><tr></tr>，再往里填 <td> 或 <code><th>
<li>删一列：需逐行删掉每个 <code><tr> 里的第 N 个 <code><td> 或 <code><th>，不能只删一行就完事
<li>横向合并（跨列）：给某个 <code><td> 或 <code><th> 加 <code>colspan="2"，同时删掉它右边相邻的那个单元格
<td> 或 <code><th> 加 <code>rowspan="3"，然后在接下来的两行中，跳过该列位置，不写 <td>
<li>顺序很重要：先设 <code>rowspan/colspan，再删对应单元格；反过来会导致错位或渲染异常怎么调样式：边框、间距、宽高控制
CSS 比 HTML 属性更可靠，且兼容性更好。老式 cellpadding、cellspacing 在现代项目中应避免使用。
- 统一边框：用
border-collapse: collapse;配合table, th, td { border: 1px solid #ccc; }，比border="1"更可控 - 内边距（单元格文字离边距离）：只对
th和td设padding: 8px;，不要碰cellpadding - 列宽固定：给
<col>标签设width，或对th:first-child, td:first-child写width: 120px; - 整表宽度：优先用
width: 100%;或max-width: 800px;，而非width="600"这类像素硬编码 -
table-layout: fixed;能防止内容撑开列宽，但会忽略td内部的width声明，慎用
怎么让表格可编辑：contenteditable 的坑与替代方案
contenteditable="true" 看似简单，但上线后常出问题——它不是为数据采集设计的。
立即学习“前端免费学习笔记（深入）”；
- 不触发
change事件，无法监听“值是否真变了” - 复制粘贴可能带入富文本标签（比如
<strong></strong>），后端解析 JSON 时直接报错 - 移动端软键盘收起后焦点丢失，用户输一半就没了
- 更稳妥的做法是双击
<td> 时动态插入 <code><input type="text">，失焦或按 Enter 时把值写回textContent并移除input - 务必在保存前遍历所有
td，检查是否含input，有则取.value，否则取.textContent；别直接用innerText扫全表 - 原生 JS 场景：编辑后必须显式调用
updateTableData()类函数，把新值塞进数组或对象 - 框架场景：禁止直接操作
innerHTML或替换td，要用v-model或onChange绑定，否则状态脱钩 - 导出为 CSV/JSON 时，别用正则从 HTML 字符串里提取内容——容易漏转义、错列；应从原始数据源生成，再映射到表格 DOM
- 多人协作时，表格结构变更（如新增列）要同步更新 JS 中的字段名映射，否则后端收到的 key 是旧的
怎么批量更新数据：避免只改 HTML 不同步 JS 变量
如果表格背后连着 JavaScript 数据源（比如 Vue 的 data 或 React 的 useState），光改 DOM 是无效的，视图不会响应。
最易被忽略的一点：表格语义化。哪怕只是内部管理页，也该用 <thead>、<code><tbody>、<code>scope="col"，否则屏幕阅读器读不出来，后续加无障碍支持或自动化测试时会返工。
