html表格必须用table→tr→td/th结构，tr不可省略，td/th须为tr直接子元素；表头用th，空单元格需填空格；合并单元格需同步调整同行td数量，否则列错位。
HTML表格写不对，八成不是语法错，而是结构缺行容器或边框没合并；列表嵌套不生效，基本是子列表没包在 li 里。
table 必须带 tr，不能直接套 td
很多人写 <table>
<td>姓名</td>
<td>年龄</td>
</table>，浏览器会自动补 tr，但补的位置不可控，后续加样式或合并单元格时极易错位。
-
tr是表格的“行容器”，td和th必须作为它的直接子元素 - 表头用
th，语义更强、默认加粗居中，屏幕阅读器能识别为标题 - 所有
tr内的单元格数量要一致，否则列对齐会偏移（比如第一行 3 个td，第二行只写 2 个，第三列数据就跑到第二列下面了） - 想加标题？用
<caption></caption>，别塞在tr里——它必须是table的第一个子元素
边框不显示？不是没写 border，是没设 border-collapse: collapse
只加 style="border: 1px solid #000;" 到 table 上，看到的是“双线”甚至“虚线”——因为每个 td 都自带独立边框，浏览器默认用 border-collapse: separate 渲染。
- 必须在
table上加style="border-collapse: collapse;"，再统一给td/th设边框 - 不加
padding的话，文字会紧贴边框，建议至少padding: 6px 12px - 旧版邮件客户端兼容性差，
border-collapse不一定生效，可退而求其次：用border属性（HTML5 中仅支持border="1"，但已废弃，仅作降级兜底）
列表嵌套失效？检查子列表是否真在 li 标签内部
写成 <ul><li>第一步</li></ul>
<ol><li>子步骤</li></ol> 是错的——ol 没包在 li 里，浏览器会把它“修复”成并列的两个列表。
- 正确结构：子列表（
ul/ol）必须完整写在某个li的起始与结束标签之间 - 嵌套层级无硬限制，但语义上超过 3 层会让屏幕阅读器播报混乱，且维护成本陡增
- 缩进过大？别用
text-indent，它只动第一行；改用ul, ol { padding-left: 2rem; }+ul ul, ul ol { padding-left: 1.5rem; } - 想让
ol编号变成 “1.1”“1.2”？得靠 CSScounter-reset+::before，HTML 本身不支持
空单元格边框消失、合并单元格错位？根源都在“占位”和“列数守恒”
某列没数据，只写 <td></td>，部分浏览器（尤其旧 IE 或 Outlook）会跳过渲染这个单元格，导致边框断开、列数错乱。
- 空单元格务必填一个空格：
<td> </td>（注意中间是空格，不是空白字符） -
colspan="2"表示“占两列”，那同一行里就得少写一个td；rowspan="3"表示“跨三行”，后面两行对应列位置就不能再出现td - 合并后若列数算错，表格视觉上会“塌陷”或“错列”，用开发者工具看 DOM 结构比肉眼更准
- 别在
tr外套div或其他块级元素——tr只能是table、tbody、thead、tfoot的直接子元素
最常被忽略的点：表格结构一旦写错，CSS 很难挽救语义缺陷；列表嵌套若只为视觉缩进而非内容逻辑，后期 a11y 测试和 SEO 都会出问题。写之前先问一句：这个结构，是不是真能表达“某项的展开说明”或“行列之间的归属关系”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
