已提供依据
带行列标题的任务表
以虚构的网页练习任务为数据，保留caption和th表头。筛选控件增强可见行，读者可对照源码查看scope和数值处理；关闭脚本时仍保留完整初始任务表。
- 源码标识
- TABLE-03
- 技术
- HTML / CSS / JavaScript
- 运行方式
- 本地浏览器
- 范围
- 独立学习示例
本站原创教学源码；练习中的昵称、任务和数据为虚构。编号用于本站组织内容，与9.1产品版本没有对应关系。
从能力到可运行任务
数据表格
为练习任务写caption、列标题、行标题，并在原始表格上增加筛选。
表格表达行列关系。先建立静态数据与表头关联，筛选只改变可见行，不改变列名称；不要用表格安排整页布局。
适用读者：需要展示学习进度或小型清单的读者
练习顺序
一步一步确定目标
按本类步骤阅读源码，先确认结构，再操作，再修改。
- 先解释每一列的单位与含义。完成后记录预期与实际结果。
- 使用th和scope区分行标题、列标题。完成后记录预期与实际结果。
- 保留空筛选状态与恢复全部行的入口。完成后记录预期与实际结果。
独立源文件
本类可运行示例
以下是本站原创练习，阅读详情了解运行条件和源码路径。
实现差异
相关实现比较
从运行环境、增强行为和控件选择理解实际差异。
先排查这些位置
容易忽略的细节
想展示三到五行数据并保留清楚的阅读顺序。。遇到不同结果时，先确认本地文件、焦点位置和页面状态。
- 用td加粗伪装表头。
- 把数值当字符串导致排序顺序错误。
常见问题
关于数据表格的常见问题
继续阅读
相关指南
指南
9.1免费版代码数据表格
表格适合表达同一组对象的相同字段。先写表格标题、表头和单位，再填教学数据；使用th与scope表达表头方向，窄屏保留可理解的字段关系。9.1在本文仍只是检索线索。
包含 6 个可复现步骤
阅读指南相邻能力