任务7制作学生信息表电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版

教案名称 任务7 制作学生信息表 计划学时 4学时 学习目标 掌握创建表格的HTML标记 能够对单元格进行合并 掌握表格的CSS样式设置方法 素质目标 培养与时俱进，不断创新的精神 培养不断学习，终身学习的习惯 教学重点 创建表格的HTML标记 教学难点 表格的样式设置 教学模式 任务驱动教学法 线上+线下混合教学模式 教学活动及主要环节 思政元素 切入点 第1、2学时 (表格基本标记、合并单元格) 课前发布任务： 观看学习通平台相关学习视频。 做课前测试题。 I.学生讨论：（10分钟） 表格的标记有哪些？如何创建表格？ II.重难点内容讲授： 一、表格标记（35分钟） 代码如下： <h2>学生情况表</h2> <table border="1"> <!—border属性给表格添加边框 --> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>专业</th> <th>入学成绩</th> </tr> <tr> <td>2021021506</td> <td>王大震</td> <td>男</td> <td>计算机应用技术</td> <td>390</td> </tr> <tr> <td>2021021507</td> <td>于雪</td> <td>女</td> <td>计算机应用技术</td> <td>412</td> </tr> <tr> <td>2021021508</td> <td>马文文</td> <td>女</td> <td>计算机应用技术</td> <td>376</td> </tr> </table> （1）<table></table> （2）<tr></tr> （3）<th></th> （4）<td></td> 2、 实例7-2：创建学生情况表（35分钟） 代码如下： <h2>学生成绩表</h2> <table border="1"> <tr> <th colspan="4">基本信息</th> <!-- 列合并4个单元格 --> <th colspan="3">成绩信息</th> <!-- 列合并3个单元格 --> </tr> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>班级</th> <th>Web前端开发</th> <th>信息技术基础</th> <th>C语言</th> </tr> <tr> <td>2021021506</td> <td>王大震</td> <td>男</td> <td>2021级计应1班</td> <td>90</td> <td>47</td> <td>88</td> </tr> <tr> <td>2021021507</td> <td>于雪</td> <td>女</td> <td>2021级计应1班</td> <td>89</td> <td>76</td> <td>90</td> </tr> <tr> <td>2021021508</td> <td>马丽</td> <td>女</td> <td>2021级计应1班</td> <td>79</td> <td>93</td> <td>53</td> </tr> </table> 合并单元格的方法： 给标记<td>或<th>添加colspan或rowspan属性。 III.课堂小结：（10分钟） 掌握创建表格的各种标记及合并单元格的方法； 课后作业： 课后实训7 超星学习通平台作业 第3、4学时 (使用CSS定义表格样式、制作学生信息表格) 课前发布任务： 观看学习通平台相关学习视频。 做课前测试题。 I.学生讨论：（10分钟） 表格样式定义主要用到哪些属性？ II.重难点内容讲授： 一、实例7-3，定义表格CSS样式（30分钟） 样式代码： <style type="text/css">