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