table · 专业数据表格

同一套表格基础,三种用途预设。数字怎么显示由列定义决定, 不由"这个数看起来有多大"决定。

1 · 业务 / 财务数据表

金额、比率、同比变化放在一张表里 —— 它们需要的格式各不相同: 营收不带正负号,同比必须带。单位写在列头,不在每个格子里重复。

2 · 学术出版表格(三线表 + 多级表头)

论文表格的读者要逐格比对数值,竖线和斑马纹会干扰视线 ⇒ 只留三条线。 多级表头用 scope 标明层级,读屏才知道"这一格属于哪一列"。

3 · 统计与实验结果表

估计值、标准误、置信区间、p 值各自有书写惯例,不能用同一个数字格式化函数打发。 本表不计算、也不宣称显著性 —— 区间与 p 值由调用方提供。

4 · 格式自证(这几行就是反例)

下面两列数值完全相同(都是 0.25), 只有列定义的 format 不同。旧实现会把两者都显示成 25.0% —— 因为它按"小于 1 就当比例"来猜。

5 · 转义自证(这一列故意含有 HTML)

表格 Cells 经常来自外部系统:<b>、&、 带着引号的属性串都会出现在真实数据里。 它们必须原样显示,而不是被当成标签执行。
⇒ 示例里的每一处动态文本都先过 esc(),UI 结构才是写死的 HTML。

6 · 同一张表里的两种方向语义

「同比 +16.3%」和「近 20 日 +3.21%」看起来都是"涨",但它们是两件事: 前者是会计口径(正负就是加减),后者是市场口径(红涨绿跌,国际口径正好相反)。
⇒ 会计正负用 num--pos / num--neg; 市场涨跌用嵌进单元格的 delta, 不给表格加第三组方向类(num--up / num--down 故意不存在)。
下面两块数据完全相同,只有外层 data-market 不同 —— 会计那一列一个字都不变,市场那一列整体翻转。
⚠️ 在同一张表里,会计的「+16.3%」是绿、市场的「+3.21%」是红 —— 看起来互相矛盾,这恰恰是它们必须分开命名的原因: 一个说"多了多少",一个说"涨了多少",共用一个颜色令牌就会给出矛盾信号。

注:零值两边都不带符号 —— 会计列不写 +, 市场列用 delta--flat。 「0.0%」被读成「涨了 0.0%」是本库明确反对的一类错误 (四舍五入到 0 也算 0,所以 0.0004 在 1 位精度下同样不带符号)。

7 · 缺失值与紧凑密度(对账表这种"一屏二十行"的场合)

table--compact 把字号降到 --fs-xs、内边距收到 --sp-1 --sp-2 —— 只给数字表、对账表用, 正文表格用了会读不动。
cell--na 是缺失值的统一写法:灰色、居中、不留空。 空格子和 0 是两件事:空格子读者分不清"没有数据"还是"漏了", 0 会被当成真实数值参与心算。

表 G · 银行对账明细(示例,含缺失值)
科目 期初 本期发生 期末
银行存款1,204,300318,2001,522,500
应收账款884,120—884,120
其他应收款N/A12,40012,400
预付账款46,7003,10049,800

两处缺失值用了两种写法(— 与 N/A): 会计表里 — 表示"本期无发生",N/A 表示"未取到数"。 混用会让人以为两者是同一件事 —— 选一种并在表注里说明。

对比:错写法 vs 本库写法

❌ 常见写法:只靠红绿 + 连字符

涨的那行没有 +,跌的用连字符 -:灰度打印、色觉障碍、以及"只扫一列符号"的读法,全都不成立;连字符还比真减号窄,一列数字的个位对不齐。

✅ 本库:符号 + 真减号 −

颜色是辅助,符号才是信息(WCAG 1.4.1)。符号由 .table .num--pos::before / .num--neg::before 生成 —— 数据里不用手拼 +,也就不会有人漏掉;减号用的是 U+2212,不是连字符。