直接写可运行的html表格比死记步骤更有效：先用table、tr、td搭建最简结构，再逐步添加th表头、thead/tbody语义分区、caption标题及rowspan/colspan合并，始终确保嵌套正确、语义清晰、单元格总数对齐。

直接上手写一个能跑的表格，比背步骤更有效。HTML 表格不是靠“学完再练”，而是边写边理解结构关系——table 是容器，tr 是行，td 和 th 是单元格，三者嵌套关系固定，错一层就可能渲染异常。

从最简结构开始：只用 table、tr、td

别一上来就加边框、标题、合并单元格。先确保浏览器能画出一个有行列感的空架子：

姓名	年龄
张三	25

• 每行必须包裹在 tr 里，不能把 td 直接丢进 table
• td 数量不必每行严格一致，但浏览器会自动补空单元格，容易导致错位——建议手动对齐列数
• 默认无边框、无间距，看起来像普通段落，这是正常现象；不要因此怀疑代码写错了

加表头必须用 th，不是加粗 td

th 不只是视觉加粗居中，它传递语义：这是标题，不是数据。屏幕阅读器、搜索引擎、打印样式都依赖这个区分。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 把第一行的 td 全部换成 th，比如 <th>姓名</th> <th>年龄</th>
• 不要在数据行里混用 th，除非你真在定义某一行的“行标题”（如左侧分类栏）
• 如果想让 th 左对齐或不加粗，用 CSS 覆盖，而不是退回去用 td + <strong></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 值之和，应该相等；否则表格会错列

真正卡住人的从来不是标签名记不住，而是嵌套层级松动、语义缺失、合并时没算清单元格总数。写完立刻在浏览器里右键“查看页面源代码”，对照 DOM 树看结构是否如你所想——这比反复读文档管用得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！