Web前端技术实验

实验03　商城数据表格与可访问展示

课程代码 ZY070018｜适用：2024级、2025级｜第3次
2026—2027学年第一学期

字段	内容	字段	内容
大纲锚点	实验项目三：通过表格制作商城首页	学时拆分	完整项目（2学时）
项目属性	基础验证型 / 必做 / 1人一组	课程目标	LO1、LO2

本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

掌握table、caption、thead、tbody、tfoot、th、td及跨行跨列。
理解表格适合二维数据，不再用表格承担整页布局。
能为表头设置scope并用CSS实现可读、可横向浏览的数据表。

二、核心任务

制作商城商品比较表，包含商品、价格、库存、评分、配送和操作六类字段。
使用caption说明表格用途，使用thead/tbody/tfoot划分区域，并完成一次合并单元格。
为行表头或列表头设置scope；库存不足和推荐商品具有不只依赖颜色的标识。
在窄屏中使用容器实现安全横向滚动，禁止压缩到不可读字号。

三、验收标准

序号	可观察条件	记录
1	表格语义完整，数据行列对应正确。	□通过　□需修改
2	页面布局不使用表格；表格仅承载商品数据。	□通过　□需修改
3	窄屏可查看全部列，表头与数据关系清楚。	□通过　□需修改

四、提交物

商品比较表源码
表格结构说明
窄屏测试截图
实验报告

统一命名：学号_姓名_实验03

五、90分钟流程

时间	活动
0—10	说明与安全检查
10—25	预测、演示、最小验证
25—65	独立完成核心任务
65—80	测试与同伴复核
80—90	抽查与退出记录

六、评分量规（100分）

维度	分值	判定要点
功能与任务完成	45	必做功能可运行，数据和交互正确
测试与问题修复	20	有边界或错误测试，并保留复测记录
代码与页面质量	15	结构、命名规范，控制台无未解释错误
报告与证据	15	报告、截图与源码相互对应
现场解释	5	能解释关键实现和至少一项修改

七、拓展与思考

选做：用CSS实现隔行样式和悬停高亮，并保证打印时仍可读。

思考：表格布局与CSS布局的适用边界是什么？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。