让数据排得明白

01 · 先清洗，再排版

表格最常见的问题不是 CSS，而是字段不一致。先统一日期格式、时间单位和缺失值表达。不要为了看起来专业编造小数。

工具,场景,每周使用次数,单次节省分钟,状态
写作助手,初稿整理,4,35,在用
搜索助手,资料初筛,3,25,在用
图片助手,封面草图,2,40,试用
会议助手,纪要整理,1,30,暂停
代码助手,网页修改,5,45,在用
音频助手,逐字稿,2,,待评估

1. 确认“每周使用次数”都是次数，“单次节省分钟”都是分钟。
2. 缺失数字保留为空并显示“待记录”，不要替换成 0。
3. 写下一句用户查看这张表要回答的问题。

02 · 生成语义表格

让 Agent 直接使用明确数据，而不是自己搜索工具价格。这样课程重点会留在信息设计，事实也不会过期。

请在 04-readable-table 中创建 tools-table.html，使用我提供的 CSV 数据制作“我的 AI 工具使用清单”。

目标：让我快速看出哪些工具使用频繁、哪些数据还未记录。
要求：使用 table、caption、thead、tbody、th；数字列右对齐并在表头写明单位；缺失值显示“待记录”，不能当成 0；状态同时用文字和样式表达；表头在长表滚动时保持可见；不加载表格框架。
移动端：表格可以在自身容器内横向滚动，但整个页面不能横向滚动；首列保持可辨认；滚动容器要有文字提示。
验收：键盘可以到达滚动区域；表头和数据列对应；CSV 中的 6 行全部出现。

03 · 检查视觉扫描路径

文字通常左对齐，数字右对齐。右对齐让位数更容易比较；单位放在表头，避免每格重复。状态颜色必须配文字，因为颜色不是可靠的唯一编码。

1. 沿每列向下扫，确认没有数据错位。
2. 遮住颜色，确认仍能通过“在用/试用/暂停”理解状态。
3. 将一条场景改成 30 个字，确认不会挤坏其它列。
4. 将浏览器缩到 390px，只允许表格容器滚动。

04 · 增加一个有用的排序

排序是帮助回答问题，不是炫技。只增加“按每周使用次数排序”，并清楚显示升序或降序。缺失值始终放在末尾。

为 tools-table.html 增加“每周使用次数”排序按钮。第一次点击从高到低，第二次从低到高；按钮文字要说明当前顺序；缺失值始终排在末尾；不改变原始数据文案。请同时保证键盘操作和焦点样式。