用语义化table结构（thead/tbody）和border-collapse: collapse等精简css可实现真正简洁表格，需避免滥用tfoot、漏删合并单元格、混用border属性，并通过适度留白与视觉层次提升可读性。
直接用 <table> 搭配语义化结构 + 精简 CSS 就能做出真正简洁的表格，不需要额外框架或复杂嵌套。
<h3>用 <code><thead>、<code><tbody> 明确划分结构
<p>浏览器和屏幕阅读器依赖这些标签理解表格逻辑。省略它们会让样式难维护，也影响可访问性。</p>
<ul><li><code><thead> 只放一行或多行 <code><th>，别塞 <code><td>
<li><code><tbody> 包住所有数据行，哪怕只有一行也要包
<li>避免用 <code><tfoot> 做视觉装饰——它本意是汇总/页脚，滥用会误导辅助技术
<li>不要为了“省代码”把表头写在 <code><tbody> 里，否则 <code>:nth-child(even) 隔行变色会错位
边框控制优先用 border-collapse: collapse
默认的分离边框（separate）会产生双线、间隙和对齐漂移，是“不简洁”的主要视觉来源。
- 加
table { border-collapse: collapse; }后，相邻单元格共享边框，线条干净利落 - 若想保留一点呼吸感，改用
border: 1px solid #e0e0e0统一设在th, td上，而不是靠border-spacing - 避免混用
border和旧式border="1"属性——后者会覆盖 CSS，且无法精确控制颜色/样式
合并单元格时必须删掉被占位的空 <td>
<p><code>colspan 和 rowspan 不是“自动隐藏”，而是“跳过后续单元格”。漏删会导致列数错乱、样式塌陷。
- 比如
<th colspan="2">姓名与工号</th> 后，同一行不能再有另一个 <th> 或 <code><td>，否则总列数超预期
<li>跨行合并时，下一行对应位置的 <code><td> 必须删掉，否则会多出一格、破坏对齐
<li>先写好完整行列结构，再加 <code>colspan/rowspan，比边写边合并更少出错
最易被忽略的是：简洁 ≠ 无样式。一个没边框、没内边距、字体挤在一起的表格，反而最难读。真正的简洁来自克制的留白、统一的间距和明确的视觉层次——这些都靠几行 CSS 控制，而不是删代码。
<th colspan="2">姓名与工号</th> 后，同一行不能再有另一个 <th> 或 <code><td>，否则总列数超预期
<li>跨行合并时，下一行对应位置的 <code><td> 必须删掉，否则会多出一格、破坏对齐
<li>先写好完整行列结构，再加 <code>colspan/rowspan，比边写边合并更少出错最易被忽略的是：简洁 ≠ 无样式。一个没边框、没内边距、字体挤在一起的表格，反而最难读。真正的简洁来自克制的留白、统一的间距和明确的视觉层次——这些都靠几行 CSS 控制，而不是删代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
