最省事的方法是用编辑器Emmet语法生成table骨架，如table>tr3>td4按Tab键即可生成闭合结构；必须包含<thead><tbody>等语义标签以保障可访问性、打印和JS操作；合并单元格需准确计算rowspan/colspan；边框间距须用CSS控制而非废弃HTML属性。
用编辑器快捷键生成 <table> 骨架最省事
多数现代编辑器（VS Code、Sublime Text、IntelliJ IDEA）都支持 Emmet 语法，table>tr*3>td*4 按 Tab 就能直接生成 3 行 4 列的表格结构。不用手敲每一层标签，也避免漏写 </tr> 或 </td> 导致渲染错乱。
常见错误现象：手动复制粘贴旧表格代码时，<tr> 和 <td> 层级嵌套不匹配，浏览器解析后出现“多出一列”或“整行塌陷”。Emmet 生成的结构天然闭合，可靠性高。
-
table>thead>tr>th*4→ 生成带表头的结构，适合数据报表 -
table>tbody>tr*5>td*3→ 先建主体，再填数据，逻辑清晰 - 别用
table+tr+td这种写法——Emmet 不识别，会原样输出
<caption> 和 <thead>/<tbody> 不是可选装饰
它们影响语义和可访问性，不是“看起来更规范”的摆设。屏幕阅读器依赖 <caption> 读出表格用途；<thead> 被 CSS 的 position: sticky 用来冻结表头，<tbody> 是滚动区域的边界锚点。
如果只写 <table><tr><th>...</th></tr><tr><td>...</td></tr></table>，虽然能显示，但：
- 打印时表头可能不随页重复
- 用 JS 动态增删行时，document.querySelector('tbody').appendChild(row) 会失败（因为没 <tbody>）
- border-collapse: collapse 在某些旧版 Safari 下对裸 <tr> 生效不稳定
合并单元格时 rowspan 和 colspan 容易算错
本质是“占用多少个逻辑格子”，不是“跨几行/几列”。比如一行里已有两个 <td>，第三个单元格设 colspan="2"，那这行实际占 4 列（2 + 2），若其他行还是 <td>×4，就对齐；但如果其他行只写了 3 个 <td>，表格就会错位、挤压。
立即学习“前端免费学习笔记（深入）”；
- 先画草图：用纸或 Excel 标出所有行列坐标，再数“从哪开始、占几个”
-
rowspan的值必须等于它下方被“跳过”的行数 + 1（自身那行） - 避免在
<thead>里用rowspan同时跨<thead>和<tbody>—— HTML 规范不支持，Chrome 会自动补空<tr>，导致样式错乱
边框和间距用 CSS 控制，别碰 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 时标题没 <caption> 导致 sheet 名为空。写第一行之前，先想清楚这表格将来会不会排序、导出、适配手机——这些决定了骨架要不要提前留好语义钩子。
