原创源码练习 · 让表格中的数值有清楚上下文
9.1免费版代码数据表格
表格适合表达同一组对象的相同字段。先写表格标题、表头和单位，再填教学数据；使用th与scope表达表头方向，窄屏保留可理解的字段关系。9.1在本文仍只是检索线索。
通过9.1免费版代码检索学习原创HTML任务表，用caption、行列scope、主题筛选与分钟数值排序理解字段关系，不把预计时长当成实测。
直接答案
9.1免费版代码数据表格
表格适合表达同一组对象的相同字段。先写表格标题、表头和单位，再填教学数据；使用th与scope表达表头方向，窄屏保留可理解的字段关系。9.1在本文仍只是检索线索。
按顺序操作
具体操作步骤
- 打开data-table，确认六行教学任务与预计分钟声明可直接阅读。
- 在源码定位caption、四个列标题、行标题及data-category和data-minutes。
- 选择CSS，核对显示20和25分钟两项任务。
- 点击“改为从多到少”，核对顺序变成25再20，表头aria-sort变为descending。
- 恢复全部主题并缩窄窗口，横向浏览四列，保留记录与字段关系。
- 在源码新增一行时同时填写四列和两个data属性，刷新后再检查筛选与排序。
先判断是否需要表格
本例比较六项原创网页练习，共享“任务、主题、预计分钟、练习目标”四列。相同字段使逐行比较有意义。预计分钟10、15、20、25、30、45是构造的学习安排，不是实际测量；HTML、CSS、JavaScript各有两项。数据在初始HTML中，关闭脚本仍可阅读全部六行。
给表格写主题与单位
caption写明“原创网页练习清单（预计时长为示例数据）”。分钟列把单位与数据用途写清，任务列说明当前记录。读到20时，可以追溯为“调整手机卡片”的预计分钟。复制到真实项目时，数值口径与来源需重新说明，不把教学安排引用为真实统计。
用th和scope保存关系
顶行的th scope="col"表示四个列字段，每行首格的th scope="row"表示任务名称。分钟表头带aria-sort，初始是ascending，点击排序后与方向同步。thead与tbody让源码分组更容易阅读，但不能替代表头关系。入门练习先保持这四列，不随意增加合并单元格。
窄屏允许滚动，不丢失上下文
给表格外层安排可识别的滚动区域，让宽表在窄窗口中横向移动。检查第一列名称、列标题与数据是否仍能对照；不要为了装进手机宽度把字缩到难以阅读。若以后提供卡片视图，每个值都应带相应字段名，不能只保留数字。
主题筛选与数值排序对应真实行
选择CSS时只显示“调整手机卡片”和“补充焦点样式”，分钟数分别为20和25；点击“改为从多到少”后顺序反转。脚本通过data-category筛选、用Number转换data-minutes进行数值比较，再更新hidden、aria-sort和文字状态。若在源码新增任务行，需要同时填写这两个属性及四个单元格，再刷新让脚本重新取得行集合。
相关字段比较
| 结构或说明 | 承担的职责 | 本次练习的检查方法 |
|---|---|---|
| caption | 整表主题与教学声明 | 确认预计分钟不是实测结果 |
| th scope="col" | 任务、主题、预计分钟、练习目标 | 每个值均能追溯列名 |
| th scope="row" | 每项任务的名称 | 每行能识别对应对象 |
| data-category与data-minutes | 主题匹配与数值排序 | CSS筛选显示20和25分钟 |
| aria-sort与文字状态 | 当前排序方向及显示数量 | 切换后与可见行次序一致 |
数据透明度
技术参考与说明依据
这些公开文档用于解释网页元素和 API，不代表本站已经执行外部产品实测，也不确认某个 9.1 产品的身份。
常见问题