展现形式 · 概念

Table：数据表格

说明 Table 如何用行列两个维度呈现规格、尺码和配送费率等数据，区分 Comparison 与 List，并给出语义表头、小屏滚动或转卡片、单位与未知值的处理要求。

Table 用行与列两个维度呈现同一类数据，读者按行找对象、按列找属性，最后在交叉处读取数值，典型如规格表、尺码表和配送费率表。它和 Comparison 常共用 <table> 标记，但任务不同：Table 服务于查找与读取，Comparison 服务于在共同维度下取舍。

适合与不适合

适合每个数值都要由「行标识 + 列标识」共同定位的数据：不同尺码对应多个测量部位，不同重量区间对应多个配送区域。不适合只有一个维度的信息（见 List）、行内容是长段落，或者仅为对齐版面而使用表格。

与相邻模式的区别

模式	判据	例子
Table	有行、列两个维度，读者按坐标查值	尺码表、按区域与重量的费率表
Comparison	多个选项共享维度，读者要作取舍；可用表格实现，也可用卡片	三个套餐的功能对比
List	只有一个序列，每项自成一条；「名称: 值」成对也只是一维	包装清单、单件商品的简短参数
Cards	每个对象自带字段与行动，不要求跨对象对齐	商品卡片、方案卡片

判断顺序：先问是否存在两个维度；没有就用 List 或 Cards。有两个维度再问读者是否要取舍；要取舍，按 Comparison 的推荐标签、缺失值与来源要求处理，否则就是普通查找表。

优点与缺点

优点	缺点
交叉定位清晰，屏幕阅读器可沿行列导航	列多时小屏放不下
数值对齐后便于扫读	复杂表头（合并单元格）维护与无障碍成本高
结构化数据便于与规格字段一一对应	静态表容易与运行时价格、库存脱节

内容与交互要求

单位与口径：每列单位写在表头或单元格内，不混用；尺码表注明测量位置（净尺寸还是成衣尺寸）与公差，来源见商品规格。需要英寸与厘米时，提供两份数据或切换控件，切换后表头保持不变。
未知值：区分「0」「不适用」「暂无数据」，用文字表达，不留空白。
对齐：WAI Tips 建议文本左对齐、数值右对齐。
可变数据：价格、库存、结算运费由运行时决定，不写进静态表；配送费率表只能作为通用说明，最终金额以结账为准（内容边界见配送与时效信息）。
排序与筛选：非必要不加。加排序时，APG Table pattern 用 aria-sort 标注表头的排序状态。

语义结构（依据 W3C WAI Tables Tutorial）：表头用 <th>，数据用 <td>；行列都有表头时给列头 scope="col"、行头 scope="row"；表头跨多列用 colgroup / rowgroup；列头中途变化或每个数据格关联三个及以上表头时用 id 与 headers。教程建议先考虑能否拆成多张简单表。用 <caption> 作为表的标题，其内容应像标题一样简短；对结构不规则的表可再补充「说明」，可放进 caption、用 aria-describedby 关联，或放入 <figure>。APG 提示：能用原生 table 时不要用 ARIA role 重建。

小屏：WAI Tips 要求在小屏、放大与大字号下保留表头与数据的关系。两种做法：

外层容器 overflow 横向滚动，表格本身不改。WCAG 1.4.10 Reflow 对「需要二维布局才有意义的内容」（页面列出的例子含数据表）豁免了免滚动要求，但单元格内的内容仍要满足该准则。可滚动容器必须能被键盘操作：Deque 的规则页要求在无可聚焦子元素时给容器 tabindex="0"（对应 WCAG 2.1.1 Keyboard）；同时给容器一个名称（如引用 caption）是本库的编辑口径，尚未在读屏软件中逐一验证。
转为分组卡片，每张卡片为一行，每个值前保留字段名（列头），不得只留数值。

固定表头或首列不能遮住获得焦点的元素。MDN 的示例直接给 table 设 display: block，这可能改变表格的语义，采用前需实测；本库倾向用外层容器承担滚动。

状态与退化

零项：没有数据就不渲染整张表，并说明原因或替代入口。
一行或一列：退化为 List 或一句话。
行列很多：拆表、分组，或先提供筛选，不要无限横向扩展。
加载与错误：预留高度以免布局跳动；数据获取失败时显示文字提示与重试，不显示空表。
无 JavaScript：表格在服务端输出完整标记；依赖脚本的单位切换有默认单位的静态版本。
样式失效：语义表格仍可读。

常承载的内容与模块

商品规格（参数与变体差异）、配送与时效信息（费率与时效区间）、Size Guide 页面中的尺码数据（该页面配方把尺码数据对应到表格展现）。单件商品实际尺寸与尺码表冲突时，以规格为准（见商品规格页）。

平台落点（核验于 2026-09-29）：Shopify Liquid 的 tablerow 标签为数组每项生成表格行，输出 <td> 单元格并附 row1、col1 之类的类名，不输出 <th>（shopify.dev）。因此需要 <th> 与 caption 时，表头要手写。页面富文本与页面编辑器能否插入语义表格，未核验。

发布前检查

是否真有两个维度，而不是伪装成表格的列表？
有 <caption>，<th> 与 scope（或 id / headers）正确？
每个数值的单位、口径和公差明确？未知值有文字？
320 CSS 像素与大字号下，表头关系仍可读；可滚动容器可用键盘滚动？
转卡片时字段名是否随值保留？
是否把运行时价格或库存写成了静态数字？

固定版本主题实现

Horizon 徽章、评价与订阅：Horizon 全仓库搜索未找到尺码表或表格组件，只有富文本表格的滚动包装。Dawn 解读未涉及表格。

固定基线为 Dawn v15.3.0 与 Horizon 4.2.0；结论限于这两个提交，均为静态源码分析，未运行验证。

待继续完善

未在 VoiceOver、NVDA 等读屏软件里验证滚动容器命名与卡片转换后的朗读结果。
未核对 Shopify 页面编辑器与各主题对表格的支持。
缺少经过核验的尺码表与费率表样例；样例须标注为虚构示例。