语义化表格需用明确划分结构，置于首；合并单元格须配平colspan/rowspan；边框需border-collapse: collapse；垂直居中推荐flex方案。

用 、、 划分语义结构

表格不是一堆

和 ，CSS 里想单独给表头加背景色或固定表头滚动，基本得绕路写 JS。

常见错误：把所有行都塞进一个

块里，或者漏掉 —— 这会让后续用 JavaScript 操作数据体（比如翻页、筛选）时找不到目标容器。

必须放在

堆出来的，浏览器和屏幕阅读器靠语义标签识别“哪是标题、哪是数据、哪是汇总”。不加

内第一位置，它是表格的“正式名称”，对无障碍访问至关重要

只包表头行（ 包所有数据行，哪怕只有一行也要包

要写在 之后、 之前，浏览器会自动渲染到底部，不是按代码顺序排

合并单元格必须配平 colspan 和 rowspan 的数量

写 colspan="3" 却没删掉右边两个

），别塞数据；

，表格立刻错位——浏览器不会报错，但视觉上会多出一列空格，甚至整行塌陷。这不是样式问题，是 HTML 结构崩了。

典型场景：跨列表头（如“成绩”下分“语文/数学/英语”）或跨行项目名（如“iPhone 15”占三行，后面每行是不同配置）。

• 先确定主干行数/列数，再从上到下、从左到右填单元格；填到带 rowspan 的单元格时，它下面对应行里要跳过同列位置
• colspan 和 rowspan 的值必须是正整数，不能为 0 或负数，否则被忽略
• 避免嵌套合并：比如一个

里面再放个 并合并其内部单元格，可读性和维护性会急剧下降

边框显示异常？先查 border-collapse 和单元格边框重复

明明只给

加了 border: 1px solid #ccc，结果看到双线边框——这是因为每个单元格都有自己的边框，相邻单元格边框并排显示，形成“双线”。这不是 bug，是默认行为。

修复方式很简单，但常被跳过：

• 必须在 上设 border-collapse: collapse;，否则
  的边框永远不合并
• 不要同时用 HTML 的 border 属性（如 ）和 CSS 边框，二者冲突且后者可能被覆盖
• 如果只要外边框，可以只给
设 border，

不设边框，再配 border-collapse: separate; + border-spacing: 0; 让内容垂直居中别只依赖 vertical-align vertical-align: middle 在

上看似有效，但一旦单元格里有 HTML Text Extract 从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。 下载 、 或多行文本，它就失效——因为 vertical-align 只对 inline-level 或 table-cell 元素起作用，且对内部块级子元素无穿透力。 更稳的方案是升级容器行为： 给

加 display: flex; align-items: center;，一行代码搞定垂直居中，顺便支持水平居中（加 justify-content: center） 若需兼容 IE10+ 且不想用 Flex，可用 line-height 匹配单元格高度（仅限单行纯文本） Grid 方案（display: grid; place-items: center;）更简洁，但 Safari 旧版本支持略弱 真正容易被忽略的是：表格行高由内容撑开，不是由 height 属性直接控制。设了 height: 40px 但内容两行，结果还是撑高——这时候得配合 overflow: hidden 或 white-space: nowrap 才能压住。

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