项目7 制作员工信息表（表格）教案一

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次12授课学时2教学目标学习目标：1.掌握创建表格的HTML标记；2.掌握合并单元格的方法；3.掌握表格的CSS样式设置方法。技能目标：1.掌握HTML表格标签的使用，能搭建基础表格结构；2.会用CSS美化表格样式，实现单元格合并、边框、对齐等效果；3.能完成企业级网页中表格的实战开发与调试；素质目标：培养代码规范书写与细节把控能力；提升网页布局的逻辑思维；树立工程化的开发意识和团队协作的基础素养教学重点创建表格的HTML标记、合并单元格的方法、表格的CSS样式设置方法教学难点表格的相关知识点综合运用教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计以企业级网页表格应用为导向，先讲解HTML表格核心标签及结构，再结合案例演示CSS美化技巧，重点突破单元格合并等难点；通过课堂实操、小组任务巩固知识，结合企业真实表格案例，实现理论与实战结合，达成技能与素质目标。教学实施要求注重实操性，每讲解一个知识点配套即时练习；规范学生代码书写，强调细节把控；分组完成简易企业表格开发任务，培养协作能力；及时点评纠错，引导学生主动调试问题，树立工程化开发意识，贴合高职软件专业技能培养需求。教学后记课后练习完成教材对应习题拓展提高教学反思教学内容与教学过程注释巩固复习，导入新课提问HTML基础标签、CSS基础样式的核心知识点，如“常用块级标签有哪些？”“如何设置元素基础样式？”，抽查2-3名学生回答，点评纠错，衔接本节课表格教学，说明表格在网页布局中的应用场景，引出新课内容。讲授新课结合ppt讲授本节课知识点：HTML表格核心标签（table、tr、td、th）及基础结构搭建；HTML表格由<table>标记来定义。HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行由<tr>标记定义，每行被分割为若干单元格，每格由<td>标记定义，表格可以包含标题行。标签作用<table></table>构建HTML表格的容器；<tr></tr>tablerow的缩写，表示表格的一行。<td></td>tabledata的缩写，表示表格的数据单元格。表格标记的语法格式如下：<table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> … </tr> <tr> … </tr>…</table>（1）<table></table>用于定义一个表格。（2）<tr></tr>用于定义表格中的一行，嵌套在

<table>

内。表格有几行，就有几对

<tr>

标签。（3）用于定义行内的一个普通单元格，嵌套在<tr>内。一行有几个单元格，就有几对<td>标签。其内容可以是文本、图片、列表等多种元素。单元格合并（rowspan、colspan）难点解析；设计表格时，面对格式不规则的表格，可以通过合并单元格来进行调整格式，合并单元格可以给单元格标记<td>或<th>添加colspan或rowspan属性合并单元格。（1）列合并即让同行不同列的单元格合并为一个单元格，需找到被合并的最左侧的单元格，添加colspan属性，语法格式如下，其中number为合并的单元格数目：<tdrowspan="number">内容</td>（2）行合并即让同列不同行的单元格合并为一个单元格，需找到被合并的最上面的单元格，添加rowspan属性，语法格式如下，其中number为合并的单元格数目：<tdcolspan="number">内容</td>CSS美化表格（边框、对齐、背景色）实操方法。使用CSS定义表格样式，可以让表格更佳美观、简洁。详细讲解表格常用的CSS样式属性：width、height、text-align、vertical-align、padding、border、border-collapse、border-spacing、empty-cells。教师演示结合表格的知识点部分。教师写代码演示标题为“员工信息表”的表格。2.教师现场编写代码，演示构建一个完整的“班级课程表”。（1）从<table>开始，依次添加<caption>说明表格主题。（2）使用<thead>包裹首行，用<th>定义星期几表头，并添加scope="col"。（3）用<tbody>包含课程数据行，每行首单元格使用<thscope="row">标注节次。（4）演示如何使用rowspan合并上午/下午的时段单元格。（5）全程强调代码缩进、注释规范，并打开屏幕阅读器模拟器，展示良好的可访问性效果，让学生直观感受。学生练习，教师集中指导让学生独立完成第三部的案例练习，鼓励学生互相探讨，独立解决bug,教师集中指导问题。总结归纳，思政元素总结回顾：师生共同回顾表格的语义化结构、分组标签及可访问性关键属性。强调：企业级开发中，表格应用于呈现真正的表格式数据，其价值在于清晰、严谨、平等的信息传递。布置作业：1.必做：优化课堂练习的表格代码，确保通过W3C验证，并撰写一份该表格的“可访问性设计说明”。2.选做/拓展：调研并尝试使用<th>的headers属性实现复杂表头的关联，思考其应用场景。3.思政元素：技术是服务于人与社会的工具。作为一名未来