HTML5+CSS3网页设计实战 教案 4.9 表格标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.9表格标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）table标签及thead、tbody、th、tr、td子标签的用法。（2）常见表格的制作。（3）表格样式的定义，掌握Odd、even关键字。能力目标：具备制作常规表格的能力。素养目标：了解本章成语的出处，理解成语含义与知识点理解的结合。table标签及子标签表头th与td标签的设置，thead、tbody的使用及记忆方法。通过与head、body标签的联想来理解标签的用法。odd、even关键字的应用。通过具体案例的尝试来理解odd、even参数的作用。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习页脚部分采用的dl标签，dl标签的结构。多组dl标签水平排列，主要使用float属性进行布局。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在呈现大量文字类数据时，我们经常采用表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.9表格标签HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，由<tr>标签定义；每行被分割为若干单元格，由<td>标签定义；表格还可以包含标题行<th>用于定义列的标题。tr：表示表格的一行。td：表示表格的数据单元格。th：表示表格的表头单元格。1.table标签<table>标签用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。比如最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。还可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。2.tr标签 <tr>

标签行中可以包含<th>或<td>单元格，用来显示表格的标题或数据。3.td标签<th>标签定义表格中的数据单元格。每个单元格可以包含各种类型的内容，包括文本、图像、链接等。此外，单元格还可以包含其他HTML元素，如段落、列表等。4.th标签<th>标签定义表格中的表头单元格（标题单元格）。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例22】完成如图4-99所示的表格。（1）编写大体框架的HTML代码。如何记忆thead和tbody的结构？Thead——tableheadTbody——tablebody类推tfooter标签定义的是什么？（2）设置每个单元格的右、下边框，同时设置整个表格的上、左边框。这样就可以得到效果。编写对应的CSS代码。（3）保存文件后预览的效果。（4）接下来设置第3列的列宽，同时给奇数行设置背景色。上机操作提问。巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Thead标签代码正确，内部th标签正确。30Tbody标签代码正确，内部tr和td标签正确。30Css样式预览效果与原图一致。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）table标签及thead、tbody、t