阶梯价格表应采用语义化表格结构：档位标题置于thead，明细数据置于tbody，配合scope属性明确表头作用范围，禁用rowspan/colspan硬凑层级，避免cellspacing/cellpadding，响应式折叠推荐details/summary嵌套独立表格。
阶梯价格表本质是「结构化数值区间 + 对应单价」的展示，不是靠视觉缩进或手动空格，而是用语义化表格结构 + CSS 控制层级感。直接写 或用 colspan 硬凑层级，后期维护和可访问性都会出问题。
用 thead/tbody 区分价格层级标题与明细行
阶梯价格天然有“档位标题”（如“0–99件：¥12/件”）和“明细项”（如具体数量、单价、小计）。把档位标题放在 thead，明细数据放 tbody，既符合语义，又方便用 CSS 单独控制样式：
-
thead行加粗、背景色、上边框加粗，视觉上“压住”下面一组明细 -
tbody内部可用:nth-child(odd)做斑马纹，提升可读性 - 避免把档位说明塞进
td里用rowspan跨多行——那样会破坏表格行列逻辑，屏幕阅读器无法正确播报
用 scope 属性让表头真正“管住”对应列
阶梯价格表常含“数量区间”“单价”“优惠说明”等列，但若只用 th 不设 scope，辅助技术可能误判关联关系。必须明确指定作用范围：
-
<th scope="col">数量区间</th>→ 表示该表头控制整列 -
<th scope="row">0–99件</th>→ 表示该单元格是当前行的描述性标题（适用于档位行） - 不要省略
scope；scope="col"比单纯用th更可靠，尤其在复杂嵌套或响应式场景下
避免用 cellspacing/cellpadding 控制分级间距
老式 HTML 属性 cellspacing 和 cellpadding 已被废弃，且无法精准表达“档位组间距离”。它们影响的是所有单元格，会导致标题行和数据行间距失衡：
立即学习“前端免费学习笔记（深入）”；
- 改用 CSS 的
border-collapse: collapse统一边框，再通过thead th的padding-bottom和tbody tr:first-child td的padding-top控制档位组间距 - 若需“缩进感”，给
tbody加margin-left: 1em，比在每个td里塞 -
cellspacing="0"在现代浏览器中仍生效，但和 Flex/Grid 混用时容易冲突，不建议依赖
响应式折叠细节行需用 JS 配合 details/summary，别硬塞进表格
真要实现“点击展开/收起某档位明细”，HTML 表格本身不支持交互折叠。强行用 display: none 切换 tr 会导致表格结构断裂（如跨行合并失效、辅助技术丢失上下文）：
- 推荐方案：档位标题用
<details><summary>0–99件</summary><table>...</table></details>，每档一个独立表格 - 这样每个
table保持完整语义，summary自动提供可访问的开关提示 - 如果必须单表呈现，就放弃动态折叠，改用纯 CSS 分组高亮（如 hover
tbody时背景微变），更稳定也更轻量
最易被忽略的一点：阶梯价格表常被复制粘贴进 Excel 或后台系统，所以 th 和 td 的顺序、是否遗漏 scope、thead 是否闭合，直接影响下游数据解析结果——结构比样式更关键。
