表格必须用三层结构，手动写全才能确保样式控制、js操作和无障碍支持；需重置border-collapse为collapse以消除缝隙，窄屏用overflow-x: auto包裹而非删列，语义化细节如scope和caption不可省略。
表格结构必须用 <table>、<code><thead>、<code><tbody> 三层包裹
<p>浏览器对缺失 <code><thead> 或 <code><tbody> 的表格会自动补全，但补全逻辑不一致——Safari 可能忽略 <code>colspan，Chrome 可能错乱表头冻结效果。手动写全三层，是后续加样式或 JS 操作（比如排序、导出）的前提。
常见错误：只用 <table> 套 <code><tr><td>，没分组。这样后期想给表头统一加背景色或固定定位，CSS 就得绕弯子写属性选择器，还容易漏掉某一行。
<ul><li><code><thead> 只放 <code><tr> + <code><th>，语义清晰，屏幕阅读器也能正确识别列名
<li><code><tbody> 放所有数据行，每行用 <code><td>；如果需要分组（如按日期分块），可用多个 <code><tbody><li>不要用 <code><div> 模拟表格——语义丢失，打印时无法自动分页，键盘导航也失效
<h3>CSS 控制简洁感的关键是重置默认边框和间距</h3>
<p>浏览器对 <code><table> 有默认的 <code>border-collapse: separate 和 border-spacing，导致单元格之间总有白缝，看着松散。要“简洁”，第一件事就是收拢这些缝隙。
实操建议直接在 <style></style> 或 CSS 文件里加：
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
}
-
border-collapse: collapse是核心，它让相邻边框合并成一条线，不是两条线叠在一起 -
padding值别设太大，6–12px 足够呼吸感；超过 16px 就显得空洞 - 避免用
border: none然后靠背景色区分行——在暗色模式下可能完全看不见分隔
响应式窄屏下优先用 overflow-x: auto 而非删列
手机上看 5 列表格，硬塞会挤压文字、折行混乱，用户还得左右拖动。但删掉某些列（比如“创建时间”）又丢信息。更稳妥的做法是允许横向滚动，同时保证表格内容可读。
只需给父容器加一层包裹并设样式：
<div style="overflow-x: auto;"> <table>...</table> </div>
- 不要对
<table> 本身设 <code>width: 100%后再加overflow——它会强制压缩列宽，破坏内容可读性 - 确保
<th> 和 <code><td> 内没有固定宽度（如 <code>width: 200px），否则滚动条可能不触发 - 真要隐藏次要列，用
display: none配合媒体查询，但得同步处理表头与数据行的对应关系，否则错位 - 单层表头用
<th scope="col">，多级表头（如“销售额 / 本月”）用 <code>scope="colgroup"并配合<colgroup></colgroup> - 如果有操作列（编辑/删除按钮），
<th> 写 “操作”，别留空；空 <code><th> 必须加 <code>aria-label="操作" - 表格若无标题，至少加
<caption></caption>；否则 JS 插件（如 DataTables）初始化时可能报错或跳过无障碍支持
语义化细节决定是否真正“简洁”
视觉上干净 ≠ 代码简洁。一个没 scope 的 <th>，或者缺 <code>aria-label 的空操作列，会让辅助技术用户反复迷失在哪一列对应哪一数据。
最常被跳过的其实是 <caption></caption> 和 scope——它们不改变像素，但一旦需要适配读屏软件、做自动化测试或接入政府合规检查，就立刻暴露问题。
