HTML表格精美与否取决于CSS，但结构必须正确：table为顶层容器，每行须用tr包裹，th仅用于表头且不可替代td，应避免HTML内联样式而用CSS控制边框、间距与颜色。

直接说结论：HTML 表格本身不“精美”，table、tr、th、td 这几个标签只负责结构，真正决定是否“精美”的是 CSS —— 但结构写错，再好的样式也救不回来。

用对 table、tr、th、td 四个基础标签

这是最常出错的环节。很多人把 th 当成“加粗的 td”随便用，或者漏掉 tr 直接往 table 里塞 td，浏览器会自动纠错但渲染不可控。

• table 必须是顶层容器，不能嵌套在 p 或 div 里（除非语义合理）
• 每一行必须用 tr 包裹，哪怕只有表头 —— 没有 tr，th 和 td 就是孤儿节点
• th 只用于列标题或行标题，语义上代表“这个单元格描述了它所在行/列的数据”，不是视觉装饰标签
• 如果表格有明确的头部和主体，优先用 thead 和 tbody 区分，这对可访问性和 CSS 选择器更友好

错误示例：

姓名	张三

（缺 tr）
正确写法：

姓名

张三

避免 border 属性硬编码在 HTML 里

像

这种写法在现代开发中等于自找麻烦。它无法控制边框颜色、粗细、圆角，还和 CSS 冲突，尤其当多个表格共存时样式难以统一。

• HTML 中完全去掉 border、cellpadding、cellspacing 等过时属性
• 用 CSS 的 border-collapse: collapse 解决双线边框问题（默认 separate 会让相邻单元格边框叠加）
• 给 th 和 td 单独设 border，比只给 table 设更灵活
• 记得加 padding，否则文字紧贴边框，再“精美”也显得局促

推荐最小 CSS 块：

table { border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; }

让表头和隔行变色真正起效的细节

很多人写了 th { background: #f0f0f0; } 和 tr:nth-child(even) { background: #fafafa; }，但发现没反应 —— 很可能是因为没处理好层叠或遗漏了关键规则。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• th 默认是加粗+居中，但如果不显式设置 text-align 和 font-weight，换字体后可能失效
• tr:nth-child(even) 选中的是偶数行，但如果 thead 里有 tr，它会被计入计数，导致第一行数据也被染色；改用 tbody tr:nth-child(even) 更稳妥
• 深色背景配浅色文字时，别忘了给 th 和 td 都设 color，否则继承父级黑色文字在深底上就看不见
• 鼠标悬停高亮建议加 transition: background-color 0.2s，不然切换生硬

响应式表格在小屏下容易崩的根本原因

表格天生是横向扩展的，overflow-x: auto 包一层 div 是最低成本解法，但用户得手动滑动 —— 更“精美”的方案往往要牺牲部分语义或增加 JS。

• 纯 CSS 方案：用 @media 把 table 改成 display: block，再把 tr 设为 display: flex，th/td 设为 display: block 并加 label 模拟表头，但会丢失原生表格语义
• 真正兼顾可访问性和体验的，是用 JS 动态生成每行的 key-value 列表，而不是强行压缩列宽
• 千万别给 table 设固定 width: 100% 后再加 min-width，移动端反而更容易溢出

最易被忽略的一点：表格内容本身是否真的需要全量展示？很多时候删掉冗余列、用 tooltip 折叠次要字段，比做响应式更有效。

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