最省事的方法是用编辑器emmet语法生成table骨架，如table>tr3>td4按tab键即可生成闭合结构；必须包含等语义标签以保障可访问性、打印和js操作；合并单元格需准确计算rowspan/colspan；边框间距须用css控制而非废弃html属性。
用编辑器快捷键生成 <table> 骨架最省事<p>多数现代编辑器（VS Code、Sublime Text、IntelliJ IDEA）都支持 Emmet 语法，<code>table>tr*3>td*4 按 Tab 就能直接生成 3 行 4 列的表格结构。不用手敲每一层标签，也避免漏写
常见错误现象：手动复制粘贴旧表格代码时，<tr> 和 <code><td> 层级嵌套不匹配，浏览器解析后出现“多出一列”或“整行塌陷”。Emmet 生成的结构天然闭合，可靠性高。<ul>
<li>
<code>table>thead>tr>th*4 → 生成带表头的结构，适合数据报表
table>tbody>tr*5>td*3 → 先建主体，再填数据，逻辑清晰table+tr+td 这种写法——Emmet 不识别，会原样输出
<caption></caption> 和 <thead>/</thead>
<tbody> 不是可选装饰<p>它们影响语义和可访问性，不是“看起来更规范”的摆设。屏幕阅读器依赖 <code><caption></caption> 读出表格用途；<thead> 被 CSS 的 <code>position: sticky 用来冻结表头，<tbody> 是滚动区域的边界锚点。<p>如果只写 <code><table>
<tr><th>...</th></tr>
<tr><td>...</td></tr>
</table>，虽然能显示，但：
- 打印时表头可能不随页重复
- 用 JS 动态增删行时，document.querySelector('tbody').appendChild(row) 会失败（因为没 <tbody>）
- <code>border-collapse: collapse 在某些旧版 Safari 下对裸 <tr> 生效不稳定<h3>合并单元格时 <code>rowspan 和 colspan 容易算错
本质是“占用多少个逻辑格子”，不是“跨几行/几列”。比如一行里已有两个 <td>，第三个单元格设 <code>colspan="2"，那这行实际占 4 列（2 + 2），若其他行还是 <td>×4，就对齐；但如果其他行只写了 3 个 <code><td>，表格就会错位、挤压。<ul>
<li>先画草图：用纸或 Excel 标出所有行列坐标，再数“从哪开始、占几个”</li>
<li>
<code>rowspan 的值必须等于它下方被“跳过”的行数 + 1（自身那行）
<thead> 里用 <code>rowspan 同时跨 <thead> 和 <code><tbody> —— HTML 规范不支持，Chrome 会自动补空 <code><tr>，导致样式错乱<h3>边框和间距用 CSS 控制，别碰 <code>border、cellpadding 属性
HTML 属性 border="1"、cellpadding="5" 是废弃写法（HTML5 中已不推荐），且无法精细控制：比如只想给表头加底边框，或让内边距在移动端变小，这些属性完全做不到。
正确做法是统一用 CSS：
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}
注意：border-collapse: collapse 必须加，否则默认 separate 模式下，border 会双倍叠加，看起来特别粗；而 cellspacing 在 CSS 里对应的是 border-spacing，但它只对 border-collapse: separate 有效——所以基本不用。
表格结构本身不复杂，但真正卡住人的往往是语义缺失带来的后续维护成本，比如加筛选功能时发现没 <thead>，或导出 Excel 时标题没 <code><caption></caption> 导致 sheet 名为空。写第一行之前，先想清楚这表格将来会不会排序、导出、适配手机——这些决定了骨架要不要提前留好语义钩子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
