HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第4章 表格

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号4授课日期月日月日月日月日授课班级课内教学内容：第4章表格课外学习任务：（1）课前：以小组为单位，分析表格的使用方法以及属性的使用并以PPT的形式记录下来。（2）课后：=1\*GB3①练习使用对应标签创建表格。=2\*GB3②创建一个课程表。eq\o\ac(○,3)创建嵌套表格。教学目标：知识目标掌握表格的创建掌握表格属性的使用掌握表格边框和对齐掌握表格的合并掌握表格的结构和嵌套能力目标能够掌握表格的使用；能够使用表格的属性对表格样式进行设置。素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握类和对象的使用，理解并应用专业知识。重点难点及解决方法：（1）重点：掌握表格的创建和属性的使用解决方法：通过课堂示例+各种知识点相结合的方法，教师讲解表格和表格属性的使用方法，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握创建表格、使用属性修改表格等相关知识；培养学生的思维能力和分析问题解决问题的能力。（2）难点：掌握表格边框、背景、单元格合并等知识解决方法：通过案例解析+启发式教学讲解的方式，细致讲解设置边框表格和表格结构等相关内容。帮助学生掌握表格相关样式的处理方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.创建表格表格的开始标签是<table>，结束标签是</table>。所有的表格内容都位于这两个标签之间。一个完整的表格除了包含<table>标签外，还要有行标签<tr>和单元格标签<td>。可以说，在页面中要创建一个完整的表格，至少要包含这3个标签。创建表格的语法格式如下。<table><tr><td>表格的内容</td></tr></table>2.表格属性（教学重点）【表格宽度】表格的默认宽度是以内容为标准的。如果要设置表格的宽度为某一特定值，而与其中的内容无关，则可以使用width属性，其语法格式如下。<tablewidth="表格宽度"><tr><td>表格的内容</td></tr></table>其中，表格宽度可以是表格的绝对宽度（单位为px），也可以设置为相对宽度，即相对窗口的百分比。【表格高度】除了可以为表格指定宽度之外，还可以为表格指定高度。通常表格的高度都是由表格的行数及单元格中的内容决定的。为表格设置高度后，如果表格的行数与单元格中的内容使表格的高度高于指定的高度，则浏览器将以实际的高度显示表格；如果实际高度低于指定高度，则浏览器以指定高度显示表格。<table>标签的height属性可以用来指定表格的高度，其语法格式如下。<tableheight="表格高度"><tr><td>表格的内容</td></tr></table>【表格背景图片】通过<table>标签的background属性可以为表格指定背景图片，这种指定方法有点类似为网页指定背景图片。如果背景图片比表格小，则会平铺该背景图片以充满整个表；如果背景图片比表格大，则会对背景图片进行裁剪，以适应该表格。设置表格背景图片的语法格式如下。<tablebackground="图像源文件地址"><tr><td>表格的内容</td></tr></table>background的属性值也是一个标准的URL地址，其图片可以为GIF或JPEG格式。【单元格间距】单元格间距是指表格中两个相邻单元格之间的距离和单元格与表格边框的距离。在默认情况下，单元格间距是2px。设置<table>标签的cellspacing属性值，可以增大或缩小单元格的间距，其语法格式如下。<tablecellspacing="间距大小"><tr><td>表格的内容</td></tr></table>【表格内单元格与文字的距离】表格内单元格与文字的距离是指在单元格内，文字与单元格边框的距离。在默认情况下，文字是紧贴着单元格的边框出现的，这样会显得页面的内容有些拥挤。这时可以通过<table>标签的cellpadding属性来调整这一距离，其语法格式如下。<tablecellpadding="单元格与文字距离的值"><tr><td>表格的内容</td></tr></table>其中，单元格与文字的距离以px为单位，默认设置为0px。3.表格边框（教学重点）【边框宽度】在HTML中，默认表格的边框宽度为0，即不显示表格的边框。如果要显示表格的边框，就必须指定表格边框宽度。在HTML中，可以使用<table>标签的border属性来设置表格边框的宽度，其语法格式如下。<tableborder="表格的边框宽度"><tr><td>表格的内容</td></tr></table>【边框颜色】在默认情况下，边框是灰色的。如果整个页面设置了特定的颜色，为了使表格和整个页面协调一致，就应该为表格的边框设置配色。在HTML中，可以使用<table>标签的bordercolor属性来设置表格边框的颜色，其语法格式如下。<tableborder="表格的边框宽度"bordercolor="边框颜色"><tr><td>表格的内容</td></tr></table>与其他页面标签一样，这里的边框颜色可以是颜色的英文名称，也可以是十六进制的颜色码。需要注意的是，要想为边框设置颜色，必须先为边框设置宽度，否则看不到效果。4.设置表格行的对齐方式【垂直对齐方式】valign属性可以设置行的垂直对齐方式，以使行中的内容都垂直对齐。其默认值为垂直居中对齐。垂直对齐方式的语法格式如下。<table><trvalign=""><td>表格内容</td></tr></table>valign属性有3个值：middle、top、bottom，分别表示居中对齐、居上对齐、居下对齐。这3个属性值除了可以写在<tr>标签中，还可以写在<td>标签中。写在<td>标签中，用来控制每个列中的内容垂直对齐，其用法与写在<tr>标签中的用法一样。【水平对齐方式】align属性可以设置行的水平对齐方式，以使行中的内容都水平对齐。其默认值为水平居左对齐。水平对齐方式的语法格式如下。<table><tralign=""><td>表格内容</td></tr></table>align属性有3个值：center、right、left，分别表示居中对齐、居右对齐和居左对齐。5.列和行的合并【列的合并】colspan属性可以合并列，就是把一行中的某个单元格与其右侧的一个或多个单元格合并。其语法格式如下。<table><tr><tdcolspan="所跨的列数">表格的内容</td></tr></table>这里设置的是单元格所跨的列数，而不是像素数。需要注意的是，设置水平跨度时，某一行单元格的跨度总和不能超过表格内的总列数，否则表格将会出现无法编辑的空白区域。【行的合并】rowspan属性可以合并行，就是合并单元格与其下方的一个或几个单元格。其语法格式如下。<table><tr><tdrowspan="所跨的行数">表格的内容</td></tr></table>这里设置的是单元格所跨的行数。同样地，设置垂直跨度时，某一列单元格的跨度总和不能超过表格的总行数，否则表格内也会出现无法编辑的空白区域。6.表格结构【表头】通常表格的第1行都是用于说明本列数据含义的表头行，如图4.14所示的第1行。表头标签<thead>用于组合表格的表头内容。使用表头标签<thead>可以让网页中过长的表格在打印时，每页的最前面都显示表头标签<thead>的内容。表头的语法格式如下。<thead><tr><td>单元格内的文字</td></tr></thead>【主体】表格的主体就是表格真正要表达的内容和数据，一般占表格的大部分内容。通过表主体标签<tbody>可以更好地划分表格的结构。设置表格主体部分的语法格式如下。<tbody><tr><td>单元格内的文字</td></tr></tbody>【表尾】表格的表尾主要用于标注表格的额外信息，如内容的设计者、创建日期、总和等。使用表格的表尾标签<tfoot>可以让网页中过长的表格在打印时，每页的最后面都显示表尾标签<tfoot>的内容。表尾的语法格式如下。<tfoot><tr><td>单元格内的文字</td></tr></tfoot>7.表格标题表格经常包括标题。在默认情况下，表格的标题是在表格的上方居中显示。在HTML中，表格标题用<caption>标签来设置。通常<caption>标签是紧跟在<table>标签之后的，但是它可以出现在<table>标签与<tr>标签之间的任何位置。其语法格式如下。<caption>表格的标题文字</caption>8.表格嵌套在实际应用中，表格并不是单一出现的，往往需要在表格内嵌套其他的表格来实现页面的整体布局。虽然这种方式已经被div布局取代，但某些情况下还在使用这种方式。一般布局情况下，需要使用一些可视化软件来布局，这样看起来比较直观，容易达到预期的效果，但是也可以直接输入代码来实现。下面举例说明表格的嵌套。9.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。10．上机指导【疑难解答】练习使用对应标签创建表格。创建一个课程表创建嵌套表格11.板书设计第4章表格创建表格表格属性表格边框设置表格行的对齐方式列和行的合并表格结构表格标题表格嵌套教学评价思考与练习课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《在网页中如何使用表格元素》要求：以小组为单位，分析如何实现在静态网页布局中实现多种表格样式的设置；同时制作汇报PPT（PPT不得不于5页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【练习使用对应标签创建表格】小组成员团结协作，通过表格标签创建一个3行3列的表格，并为表格添加背景图片。教师使用“微信群”对学生进行指导。【创建一个课程表】学生通过之前所