任务7制作学生信息表

教案名称任务7制作学生信息表计划学时4学时知识目标掌握创建表格的HTML标记掌握合并单元格的方法掌握表格的CSS样式定义方法能力目标能根据用户需求制作各式各样的表格能够对制作的表格进行美化素质目标小组探究学习、培养团队合作能力教学重点创建表格的HTML标记教学难点表格的样式设置教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素切入点第1、2学时(表格基本标记、合并单元格)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）表格的标记有哪些？如何创建表格？=2\*ROMANII.重难点内容讲授：一、表格标记（35分钟）代码如下：<h2>学生情况表</h2><tableborder="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>实例7-2：创建学生情况表（35分钟）代码如下：<h2>学生成绩表</h2> <tableborder="1"> <tr> <thcolspan="4">基本信息</th><!--列合并4个单元格--> <thcolspan="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属性。=3\*ROMANIII.课堂小结：（10分钟）掌握创建表格的各种标记及合并单元格的方法；课后作业：课后实训7超星学习通平台作业第3、4学时(使用CSS定义表格样式、制作学生信息表格)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）表格样式定义主要用到哪些属性？=2\*ROMANII.重难点内容讲授：一、实例7-3，定义表格CSS样式（30分钟）样式代码：<styletype="text/css">h2{text-align:center;}table{border:1pxsolid#000; /*设置表格的边框*/border-collapse:collapse; /*表格的边框合并*/margin:0auto; text-align:center;}th,td{border:1pxsolid#000; /*设置单元格的边框*/}tr:first-child{ /*设置表格第一行的样式*/background:#dedede;height:40px;}.redTd{ /*设置成绩不及格的单元格的样式*/background:#F4696B;}</style>二、练习：对上面的表格自己灵活改变一下样式。（5分钟）三、任务实现：制作学生信息表（40分钟）结构搭建：<h2>学生信息表</h2> <tableclass="gridtable"> <tr> <throwspan="2">学号</th> <thcolspan="3">个人信息</th> <thcolspan="3">入学信息</th> </tr> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>班级</th> <th>入学年月</th> <th>宿舍号</th> </tr> <tr> <td>2021010201</td> <td>王大震</td> <td>男</td> <td>19</td> <td>2021计应1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010202</td> <td>于雪鲲</td> <td>男</td> <td>19</td> <td>2021计应1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010203</td> <td>王攀岩</td> <td>男</td> <td>18</td> <td>2021计应1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010204</td> <td>刘雪红</td> <td>女</td> <td>17</td> <td>2021计应1班</td> <td>2021年9月</td> <td>502</td> </tr> <tr> <td>2021010205</td> <td>李子海</td> <td>男</td> <td>29</td> <td>2021计应1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010206</td> <td>张君玉</td> <td>女</td> <td>18</td> <td>2021计应1班</td> <td>2021年9月</td> <td>502</td> </tr></table> 定义样式：<styletype="text/css"> body,h2,table,th,td{ margin:0; padding:0 } h2{ text-align:center; } .gridtable{ /*定义类选择器的样式，应用到表格上*/ width:700px; height:200px; margin:0auto; /*让表格在浏览器中水平居中*/ border:1pxsolid#666; /*给表格加边框线*/ border-collapse:collapse; /*合并表格的边框线，双线变单线*/ font-family:"微软雅黑"; font-size:14px; } .gridtableth,.gridtabletd { /*设置表格单元格的样式*/ border:1pxsolid#666; /*给单元格加边框线*/ padding:2px; /*设置单元格中的内容与边框线的距离*/ } .gridtableth{ background:#ddd; /*设置表头单元格的背景色