直接写可运行的HTML表格比死记步骤更有效：先用table、tr、td搭建最简结构，再逐步添加th表头、thead/tbody语义分区、caption标题及rowspan/colspan合并，始终确保嵌套正确、语义清晰、单元格总数对齐。
table 是容器，tr 是行，td 和 th 是单元格，三者嵌套关系固定，错一层就可能渲染异常。
从最简结构开始：只用 table、tr、td
别一上来就加边框、标题、合并单元格。先确保浏览器能画出一个有行列感的空架子：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
- 每行必须包裹在
tr里，不能把td直接丢进table -
td数量不必每行严格一致，但浏览器会自动补空单元格，容易导致错位——建议手动对齐列数 - 默认无边框、无间距，看起来像普通段落，这是正常现象；不要因此怀疑代码写错了
加表头必须用 th，不是加粗 td
th 不只是视觉加粗居中，它传递语义：这是标题，不是数据。屏幕阅读器、搜索引擎、打印样式都依赖这个区分。
- 把第一行的
td全部换成th，比如<th>姓名</th><th>年龄</th> - 不要在数据行里混用
th，除非你真在定义某一行的“行标题”（如左侧分类栏） - 如果想让
th左对齐或不加粗，用 CSS 覆盖，而不是退回去用td+<strong>
用 thead/tbody 划分逻辑区域，不是可选项
很多教程说“可以不用”，但实际项目里漏掉 thead 和 tbody 会埋坑：滚动时表头无法固定、CSS 选择器失效、无障碍支持打折扣。
-
thead只包第一组tr（通常是表头行），tbody包所有数据行 - 即使只有一行数据，也建议写全：
<thead><tr>...</tr></thead><tbody><tr>...</tr></tbody> -
caption标签要放在table开始后第一位置，它是表格不可分割的标题，不是普通段落
合并单元格时，rowspan 和 colspan 只写一次
这是最容易写错的地方：有人在每一行都加 rowspan="2"，结果多出空白行；有人以为 colspan="3" 后还要删掉两个 td，其实不用删，只要总数对得上就行。
立即学习“前端免费学习笔记（深入）”；
- 垂直合并两行？只在第一个单元格写
rowspan="2"，下一行对应位置的td必须省略 - 水平合并三列？只在那个单元格写
colspan="3"，同一行其他td数量要相应减少，保证整行单元格总数不变 - 检查方式：数每行
td+th的colspan值之和，应该相等；否则表格会错列
