2024年6月6日发(作者：)
使用CSS3美化表格 第 课
课题
课时 2课时（90 min）
知识技能目标：
（1）掌握使用CSS3设置表格标题样式的方法
教学目标
（2）学习CSS3制作细线表格、圆角表格、隔行换色表格和自适应表格的方法
思政育人目标：
通过对CSS3美化表格的学习，提高学生的动手能力和审美能力，拓展学生的视野，开
阔学生的眼界
教学重难点
教学方法
教学用具
教学重点：使用CSS3设置表格样式
教学难点：使用 CSS3制作自适应表格
讲授法、启发法、问答法、演示法、讨论法、练习法
电脑、投影仪、多媒体课件、教材
第1节课：考勤（2 min）→导入新知（4 min）→知识讲解（29 min）→课堂练习（10
教学设计
min）
第2节课：课堂讨论（4 min）→知识讲解（20 min）→课堂练习（15 min）→课堂小
结（4 min）→作业布置（2 min）
12
使用CSS3美化表格
教学过程 主要教学内容及步骤
第一节课
设计意图
考勤
（2 min）
【教师】清点上课人数，记录好考勤
【学生】班干部报请假人员及原因
培养学生的组
织纪律性，掌握学
生的出勤情况
通过复习上一
节课内容，让学生
主动思考如何使
用CSS3美化表
格，激发学生的求
知欲
【教师】复习上一节课内容，引出新知识点
新知导入
（4 min）
前面两节课，主要介绍了HTML5中表格的创造以及对创建好
的表格的属性进行设置，这一节课重点讲述如何对表格进行美化，
包括表格标题、自适应表格的制作等
【学生】聆听、思考
【教师】讲述设置表格标题样式
1
第
12
课 使用CSS3美化表格
设置表格标题样式
在CSS3中，使用caption-side属性设置表格标题的显示位置，
属性值有top（表格上方）和bottom（表格下方）。
【学生】聆听、记录、思考
【教师】多媒体演示参考代码
制作第四季度工资单，页面效果如图6-13所示
通过讲解知识
点，让学生了解
CSS3美化表格的
基本操作功能
知识讲解
（29 min）
图6-13 第四季度工资单的页面效果（火狐浏览器）
（1）创建HTML5文档，在
标签中输入以下代码，构建第四季度工资单表格的结构。
| 月份 | 金额 |
|---|---|
| 总计 | 10450.0元 |
| 10月 | 5200.0元 |
| 11月 | 5250.0元 |
| 12月 |
（2）在
标签中添加