用可构建基础表格，但需注意：1.边框需设border-collapse:collapse+统一border；2.空单元格填 防消失；3.合并单元格时对应位置须省略避免错位。
直接用 、、 这三样就能跑起来，不需要框架、不依赖 JS，但边框默认不可见，空单元格可能“消失”，这是新手最常卡住的两个点。基础结构必须闭合完整
浏览器对标签闭合其实挺宽容，但 嵌套层级一乱，后续加 或合并单元格时容易错位。常见错误是漏掉 写成 | 必须直接在 或 里，不能套
- 每行
内的 / 数量要一致，否则渲染会“偏移”
只用于表头，语义上比 更强，屏幕阅读器会读作“标题”，别全用 充数
边框不显示？不是没写对，是没设 border-collapse
只加 style="border: 1px solid #000;" 到 上，看到的是“双线边框”——因为每个 | 自带独立边框。正确做法是先合并边框，再统一描边：
注意：padding 不加的话文字会紧贴边框，看着很挤；border-collapse: collapse 必须加在 上，加在 上无效。空单元格边框消失？填个 就行
比如某行第二列没数据，只写 | 的边框。这不是 bug，是规范允许的行为。
- 填
是最轻量解法：| |
- 不要用空格字符（
），HTML 会自动合并连续空白
- 如果该列逻辑上就是“无值”，且样式允许，也可用 CSS 控制：
empty-cells: show（但兼容性不如 ）
合并单元格时，colspan 和 rowspan 容易算错行数
colspan="2" 表示“占两列”，rowspan="3" 表示“跨三行”，但关键在于：被跨过的那些位置，对应行里必须少写一个 | ，否则总列数对不上，表格就歪了。 比如第一行第一个单元格要横跨两列：
<tr>
<td colspan="2">标题行</td>
<td>第三列</td>
</tr><tr>
<td>第二行第一列（这里不能写！）</td>
<td>第二行第二列（也不能写！）</td>
<td>第二行第三列</td>
</tr>
上面第二行如果还写满三个 ，浏览器会当成 4 列来排，视觉错位。真正该写的是：<tr>
<td>第二行第三列</td>
</tr>
——因为前两列已被上一行的 colspan="2" 占用，本行只需补足剩余列。
最麻烦的其实是动态生成表格时算 rowspan：得提前知道某数据要跨几行，还得同步跳过后续行中对应位置的单元格。这种逻辑一错，整张表就塌。
|
|
|
|
|
| | | | |
|
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
