电商规格表应使用语义化，每参数独占，标名称，内多值用分隔并以•连接，禁用和rowspan/colspan；折叠用aria-hidden+inert的组，不抽离DOM。
用 <table> 但别套用“教程式”结构
<p>电商规格表不是数据报表，不需要<code>caption、thead、tfoot这些冗余语义。用户扫一眼找“重量”“接口类型”“是否防水”，核心是清晰+可读+易维护。
常见错误是把所有参数塞进一个两列表格，左边th右边td，结果一加“多选属性”（如颜色：红/蓝/黑）就崩——td里塞ul或换行符，语义混乱，CSS难对齐，屏幕阅读器也念得乱。
- 每个参数单独一行，用
<tr>包裹，不要合并行（<code>rowspan）或列（colspan） <th>只用于参数名单元格，且必须带<code>scope="row"，否则辅助技术无法关联值- 值单元格统一用
<td>，即使内容是多个选项，也用<code><span></span>或<data></data>分隔，别嵌<div>或<code><p></p>颜色/尺寸等多值参数怎么写才不破坏表格流
电商最常踩的坑：把“支持颜色”写成
<td>红色, 蓝色, 黑色</td>，看着省事，实际导致复制粘贴错乱、SEO抓取不准、翻译工具误判为一句话。正确做法是保持单值单元格结构，用机器可读的方式表达多值：
立即学习“前端免费学习笔记（深入）”；
- 用
<data value="red">红色</data>包裹每个选项，value属性存标准英文或编码，方便 JS 处理和搜索过滤 - 多个
<data></data>并列放，中间用•或<span aria-hidden="true">•</span>分隔，视觉清爽且无障碍友好 - 避免用
<br>换行——它不是语义标签，屏幕阅读器会读成“换行”，而不是“另一个选项”
示例：
<td> <data value="red">红色</data> • <data value="blue">蓝色</data> • <data value="black">黑色</data> </td>移动端折叠/展开规格项的 DOM 结构要点
整张表在手机上全展开会撑爆视口，但用
details/summary又容易被 SEO 忽略，或和商品主图动效冲突。关键不是“怎么动”，而是“DOM 怎么留后路”：
- 折叠区域必须仍保留在
<table>内，不能抽成<code><div>再动态插入——否则表格语义断裂，打印样式、爬虫解析全失效 <li>用<code><tbody class="spec-group">包裹一组参数（如“包装清单”），配合<code>aria-hidden="true"和inert控制显隐，比纯 CSSdisplay: none更可靠 - JS 控制展开时，记得同步切换
aria-expanded和aria-controls，否则 VoiceOver 用户点开没反馈 -
<dl></dl>无法原生对齐多列值（比如“长度”“宽度”“高度”要横向并排），靠float或grid会破坏阅读顺序 - 部分旧版微信内置浏览器对
<dl></dl>的margin重置异常，导致参数间距忽大忽小 - 当需要导出为 Excel 或对接 ERP 系统时，
<table>结构能被直接识别为二维数据，<code><dl></dl>得额外清洗表格不是过时，是当前最稳的规格表达载体——只要不用
border="1"或align="center"这种老古董写法就行。真正麻烦的是参数来源混杂：CMS 手动填、API 动态拉、SKU 继承字段……结构再规范，数据源头乱了，前端怎么写都是补丁。
为什么不用
dl/definition list替代table有人觉得
<dl></dl>语义更贴切：“参数名是<dt></dt>，值是<dd></dd>”。但实际在电商场景中问题明显： - 用
