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 选择器更友好
错误示例：<table>
<th>姓名</th>
<td>张三</td>
</table>（缺 tr）
正确写法：<table>
<tr><th>姓名</th></tr>
<tr><td>张三</td></tr>
</table>
避免 border 属性硬编码在 HTML 里
像 <table border="1"> 这种写法在现代开发中等于自找麻烦。它无法控制边框颜色、粗细、圆角，还和 CSS 冲突，尤其当多个表格共存时样式难以统一。
<ul>
<li>HTML 中完全去掉 <code>border、cellpadding、cellspacing 等过时属性
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; }，但发现没反应 —— 很可能是因为没处理好层叠或遗漏了关键规则。
-
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
