《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第11课 使用HTML5添加表格_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第11课 使用HTML5添加表格_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第11课 使用HTML5添加表格_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第11课 使用HTML5添加表格_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第11课 使用HTML5添加表格_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1131第1131第课使用HTML5添加表格的基基本本PAGE141132111321使用HTML5添加表格第课PAGE13113212使用HTML5113212使用HTML5添加表格第课PAGE1

课题使用HTML5添加表格课时2课时（90min）教学目标知识技能目标：（1）了解表格的基本组成（2）掌握使用HTML5添加表格的方法（3）学习HTML5中设置表格标签常用属性的方法思政育人目标：通过学习HTML5添加表格的方法，培养出学生认真、严谨的工作态度，同时锻炼学生的逻辑思维、辩证思维教学重难点教学重点：掌握使用HTML5设置表格标签常用属性的方法教学难点：使用HTML5语言添加表格教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（20min）第2节课：问题导入（4min）

知识讲解（20min）

代码分析（12min）

多维评价（5min）

课堂小结（2min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况问题导入

（4min）【教师】提出问题，引出新知识点在网页中使用表格可以清晰直观地显示数据，让用户更加直观找到自己想要的数据，那么如何在网页中添加表格呢？添加表格的方式与之前学习的内容是否存在不同【学生】思考、发言【教师】总结学生发言HTML5语言提供很多插入表格的方法，让用户选择最适合的方法去操作通过问答的方式，让学生思考如何在HTML5中加入表格，引出本节课的内容知识讲解

（20min）【教师】讲解字典的创建添加表格表格由行和列组成，它们的交点称为单元格，如图6-1所示。图6-1表格的基本结构一个最基本的表格结构包括行标签与单元格标签。在HTML5中，使用<table>标签标记表格，使用<tr>子标签标记行，<td>子标签标记单元格，具体格式为：<table> <tr> <td>…</td>……<td>…</td> </tr> ……</table>其中，一个<tr>标签表示一行，一个<td>标签表示一个单元格，<td>标签必须包含在<tr>标签中。【教师】演示【例6-1】操作流程，实现图6-2的效果制作一个基本表格（部分代码），页面效果如图6-2所示。<table> <tr><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr> <tr><td>《肖申克的救赎》</td><td>1994年</td><td>9.6分</td></tr> <tr><td>《阿甘正传》</td><td>1994年</td><td>9.4分</td></tr> <tr><td>《罗马假日》</td><td>1953年</td><td>8.9分</td></tr> <tr><td>《阳光灿烂的日子》</td><td>1994年</td><td>8.7分</td></tr></table>图6-2基本表格的页面效果创建HTML5文档，在<body>标签中输入以下代码，使用表格标签制作电影佳作推荐表。<table> <caption>电影佳作推荐表</caption> <tr><th>电影名称</th><th>上映时间</th><th>评分</th></tr> <tr><td>《辛德勒的名单》</td><td>1993年</td><td>9.4分</td></tr> <tr><td>《肖申克的救赎》</td><td>1994年</td><td>9.6分</td></tr> <tr><td>《阿甘正传》</td><td>1994年</td><td>9.4分</td></tr> <tr><td>《罗马假日》</td><td>1953年</td><td>8.9分</td></tr> <tr><td>《阳光灿烂的日子》</td><td>1994年</td><td>8.7分</td></tr></table>表头与标题1．表头表头是对一组数据的概括或解释，表头信息可以方便用户理解表格数据的含义，提高网页的可读性。在HTML5中，使用<th>标签标记表头单元格，具体格式为：<table> <tr> <th>…</th>……<th>…</th> </tr> ……</table>其中，<th>标签必须包含在<tr>标签中，一般位于表格的首行或每行的第一个单元格。2．标题标题就是表格的名称，可以提示整个表格要表达的内容。在HTML5中，使用<caption>标签标记表格标题，具体格式为：<table> <caption>…</caption> ……</table>一个<table>标签中只能添加一个<caption>标签，一般位于首行【教师】演示【例6-2】操作流程，实现图6-3的效果制作电影佳作推荐表，页面效果如图6-3所示。图6-3电影佳作推荐表的页面效果【教师】讲解表格分组表格分组1．按行分组一个完整的表格按行分组可分为表头、表体和表尾3部分，它们分别对应<thead>、<tbody>和<tfoot>标签。当表格中的数据过多以至于在屏幕中无法完整显示时，可以将表头与表尾设置为始终可见，表体则滚动或翻页显示。在实际的网页制作中，一般将表体放置在表头与表尾之后。【教师】演示【例6-3】操作流程，实现图6-4的效果制作第一季度工资单，页面效果如图6-4所示。图6-4第一季度工资单的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建第一季度工资单表格的结构。<table> <caption>第一季度工资单</caption> <thead> <tr><th>月份</th><th>金额</th></tr> </thead> <tfoot> <tr><th>总计</th><td>15200.0元</td></tr> </tfoot> <tbody> <tr><td>1月</td><td>5000.0元</td></tr> <tr><td>2月</td><td>5000.0元</td></tr> <tr><td>3月</td><td>5200.0元</td></tr> </tbody></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格中单元格的样式。th,td{width:100px;text-align:center;}/*设置所有单元格的宽度与居中对齐*/2．按列分组当需要单独设置表格中某一列或多列的样式时，可以将表格按列分组。在HTML5中，使用<col>标签对列进行分组，该标签必须包含在<table>标签中。多个<col>标签依次对应表格中的列，当需要同时为多个列设置样式时，可以设置<col>标签的span属性，属性值为对应列的个数。【教师】演示【例6-4】操作流程，实现图6-5的效果制作高中课程表，页面效果如图6-5所示。图6-5高中课程表的页面效果【学生】聆听、记录、思考【教师】讲解参考代码【学生】聆听、思考通过讲解知识点，让学生了解在HTML5插入表格的方法课堂练习

（14min）【教师】布置课堂练习新建自己的家庭表格，包括自己的父母、亲戚等，表格中有表头与标题，最终的效果跟6-5类似【教师】讲解课堂练习创建HTML5文档，在<body>标签中输入以下代码，构建个人的家庭表格的结构。在<head>标签中添加<style>标签，在其中输入以下代码，设置两组单元格与表格内文本的样式。.c1{width:70px;background-color:#d6f580;}.c2{width:80px;background-color:#fff689;}/*分别设置两组单元格的宽度与背景颜色*/tr{text-align:center;}/*设置表格行中的文本居中对齐*/【学生】完成课堂练习【教师】巡视课堂，督促学生完成课堂练习【学生】提出问题，向老师寻求帮助【教师】回答学生提问【教师】公布课堂练习答案【学生】参考答案，修改内容利用练习法，培养出学生对HTML5中表格的操作经验知识抢答

（5min）【教师】开展知识抢答活动设置知识抢答内容（1）表格的基本组成包括哪些（2）表头与标题的区别在哪里（3）表格可以按照哪些方式分组以小组为单位，统计小组得分【学生】参加知识抢答【教师】公布小组分数，组织小组总结【学生】总结学习心得让学生参与知识抢答，形成头脑风暴，巩固知识点第二节课问题导入

（4min）【教师】提出问题，引入新知识点当表格创建之后，我们需要对表格进行设置，包括表格的内外边框、内外边距以及单元格的属性，那么应该如何对这些对象进行操作呢，操作流程跟常见的表格操作是否存在不同呢【学生】聆听、思考通过问答的方式，对课程进行深入的讲解，激发学生对HTML5中表格的探索欲知识讲解

（20min）【教师】讲述整体边框与单元格内外边距整体边框与单元格内外边距在HTML5中，使用<table>标签的border属性设置表格的整体边框，它与CSS3中的border属性用法不同，其属性值为数值（省略其单位“px”）在<table>标签中，使用cellpadding和cellspacing属性设置单元格的内外边距，属性值为数值（省略其单位“px”）。单元格内边距是指单元格边框与内容之间的距离，单元格外边距则是指单元格边框与整个表格的边框或其他单元格之间的距离【教师】演示【例6-5】操作流程，实现图6-6的效果制作第二季度工资单，页面效果如图6-6所示。默认情况下，单元格之间有宽度为1px的外边距默认情况下，单元格之间有宽度为1px的外边距图6-6第二季度工资单的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建第二季度工资单表格的结构，并通过设置<table>标签的border属性添加表格的整体边框。<tableborder="1"> <caption>第二季度工资单</caption> <thead> <tr><th>月份</th><th>金额</th></tr> </thead> <tfoot> <tr><th>总计</th><td>15700.0元</td></tr> </tfoot> <tbody> <tr><td>4月</td><td>5200.0元</td></tr> <tr><td>5月</td><td>5250.0元</td></tr> <tr><td>6月</td><td>5250.0元</td></tr> </tbody></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格中单元格的样式。th,td{width:100px;text-align:center;}/*设置所有单元格的宽度与居中对齐*/（3）在<table>标签中，使用cellpadding和cellspacing属性设置单元格的内外边距，属性值为数值（省略其单位“px”）。单元格内边距是指单元格边框与内容之间的距离，单元格外边距则是指单元格边框与整个表格的边框或其他单元格之间的距离。【学生】聆听、思考、理解【教师】询问学生，是否有不理解的地方【学生】举手提问【教师】回答学生提问【教师】讲解表格内外边框表格内外边框在HTML5中，使用<table>标签的rules属性设置表格的内边框，其属性值及说明如表6-1所示。表6-1rules属性值及其说明属性值说明none不显示内边框groups仅显示按行或按列分组的边框rows显示行之间的边框cols显示列之间的边框all显示行与列之间的边框在HTML5中，使用<table>标签的frame属性设置表格的外边框，其属性值及说明如表6-2所示。表6-2frame属性值及其说明属性值说明属性值说明void不显示外边框lhs显示左外边框above显示上外边框rhs显示右外边框below显示下外边框hsides显示上、下外边框box、border显示所有外边框vsides显示左、右外边框单元格跨行、跨列显示<th>与<td>都是表示单元格的标签，设置它们的rowspan与colspan属性可以使单元格跨行或跨列显示，这两个属性的属性值为跨行或跨列的个数。【教师】演示【例6-6】操作流程，实现图6-8的效果制作第三季度工资单，页面效果如图6-8所示。图6-8表格内外边框的设置效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建第三季度工资单表格的结构，并通过设置表格的内外边框制作特殊的边框线效果。<tablerules="groups"frame="hsides"><!--设置表格按组显示内边框，并显示上、下外边框--> <caption>第三季度工资单</caption> <thead> <tr><th>月份</th><th>金额</th></tr> </thead> <tfoot> <tr><th>总计</th><td>15300.0元</td></tr> </tfoot> <tbody> <tr><td>7月</td><td>5100.0元</td></tr> <tr><td>8月</td><td>5200.0元</td></tr> <tr><td>9月</td><td>5000.0元</td></tr> </tbody></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格中单元格的样式。th,td{width:100px;text-align:center;}/*设置所有单元格的宽度与居中对齐*/【教师】讲解单元格跨行、跨列显示<th>与<td>都是表示单元格的标签，设置它们的rowspan与colspan属性可以使单元格跨行或跨列显示，这两个属性的属性值为跨行或跨列的个数。【教师】演示【例6-7】操作流程，实现图6-9的效果制作完整的高中课程表，页面效果如图6-9所示。图6-9完整高中课程表的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建完整高中课程表表格的结构。<tableframe="box"rules="all"> <caption>高中课程表</caption> <tr><thcolspan="2"> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><!--设置空白单元格横向占据两格--> <tr><throwspan="5">上午</th><th>早自习</th><td>晨会</td><td>语文</td><td>英语</td><td>语文</td><td>英语</td></tr><!--设置“上午”单元格竖向占据5格-->……（省略部分代码，具体内容如图6-9所示） <tr><thcolspan="7">午休</th></tr><!--设置“午休”单元格横向占据7格--> <tr><throwspan="4">下午</th><th>第五节</th><td>体育</td><td>语文</td><td>英语</td><td>地理</td><td>自习</td></tr><!--设置“下午”单元格竖向占据4格-->……（省略部分代码，具体内容如图6-9所示） <tr><thcolspan="7">晚自习</th></tr><!--设置“晚自习”单元格横向占据7格--></table>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置表格的样式。th{width:70px;background-color:#d6f580;}td{width:80px;background-color:#fff689;}/*分别设置表头与普通单元格的宽度与背景颜色*/tr{text-align:center;}/*设置表格行中的文本居中对齐*/【学生】聆听、思考、理解通过讲解知识点，加强学生对HTML5中表格使用方法的操作流程代码分析

（12min）【教师】多媒体展示参考代码讲述使用表格制作“网上书店”页面的“热销排行榜”（1）在<divid="main_xs">…</div>标签中的h1标题下方添加以下代码，制作“热销排行榜”区域中表格的一部分。<tableid="xsbd"> <thead> <tr> <th>热度</th> <th>图书</th> <th>简介</th> <th>分类</th> <th>现价</th> <th>操作</th> </tr> </thead> <tfoot> <tr> <tdcolspan="6"><ahref="#">完整榜单……</a></td> </tr> </tfoot> <tbody> <tr> <td>2678555<imgsrc="images/bg_hm.png"/></td> <td><aclass="xs_ts"href="book_detail.html">《活着》</a></td> <td>荣获中国版权金奖作品奖，销量逾千万册</td> <td>小说</

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论