项目四 应用和美化表格

项目四任课老师：XXX应用和美化表格PRESENTATION//SLIDE1制作“热销排行榜”2美化“热销排行榜”表格PRESENTATION//SLIDE任务一制作“热销排行榜”一、任务引入在早期的网页设计中，表格因其极具结构化的表现形式，主要用于整合页面中的元素进行排版。但随着网页设计的标准化，HTML5中增加了许多格式化标签，不再使用表格标签作为页面元素的容器，所以在如今的网页设计中，表格主要用来显示数据。本任务通过为“网上书店”页面制作“热销排行榜”区域，练习表格的使用方法13.1创建表格表格是由行和列组成的二维表。每个表格均有若干行，每行有若干列，行和列围成的区域是单元格。单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。二、相关知识二、相关知识13.2表头与标题标题表头1213.3表格分组13.3.1按行分组13.3.2按列分组二、相关知识13.4表格标签的属性13.4.1<table>标签的属性1.border属性2.cellspacing属性3.cellpadding属性4.width属性和height属性5.align属性6.bgcolor属性7.background属性二、相关知识（1）<tr>标签无宽度属性width，其宽度取决于表格标签<table>二、相关知识13.4.2<tr>标签的属性（2（先指明最高级的层次，然后依次向下说明表格标签的属性123跨行跨行、跨列跨列二、相关知识1、教学设备与工具（1）电脑/每人一台；（2）U盘、相关的软件（AdobeDreamweaverCS6或HBuilder）。三、资源准备2、职位分工（如表13-4所示）三、资源准备表13-4职位分工表职位小组成员（姓名）工作分工备注组长A

小组角色由组长进行统一安排，下一个项目角色职位互换，提升综合职业能力。组员B

组员C

组员D

组员E

四、实践操作使用表格制作“网上书店”页面的“热销排行榜”步骤1：任务引入、效果图展示本任务实施通过制作“网上书店”页面中的“热销排行榜”区域，练习表格的实际应用，最终页面效果图步骤2：任务分析分析“网上书店”页面中的“热销排行榜”区域的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML5标记及属性。本页面首先使用thead、tfoot、tbody标记将表格内容分组，通过tr和td标记表格的行与单元格内容。在表格的最后一行“完整榜单……”所在td中，加入colspan属性，实现表格的列合并。为了设置表格各列的宽度，在<thead>标记前加入col标记并使用width属性。四、实践操作四、相关知识步骤3：任务实现1234设置表格各列的宽度制作“热销排行版”区域中表格的一部分打开配套素材html文档添加其余行五、总结评价1、小组互评（如表13-5所示）表14-3实训过程性评价表（小组互评）组别：

组员：

任务名称：

制作“热销排行榜”

教学环节

被评组别评分细则第

组课前预习基础知识完整、正确（10分）得分：

实施作业1、操作过程正确（15分）2、基本掌握操作要领（20分）3、操作结果正确（25分）4、小组分工协作完成（10分）各环节得分：1：

2：

3：

4：

质量检验1、学习态度（5分）1：

2：

3：

2、工作效率（5分）3、代码编写规范（10分）总分（100分）PRESENTATION//SLIDE任务二美化“热销排行榜”表格一、任务引入在网页中使用表格可以清晰直观地显示数据。本任务首先介绍CSS3中表格的相关样式，然后通过美化“网上书店”页面“热销排行榜”区域的表格，练习使用CSS3美化表格的方法。14.1.1border和border-collapse属性（1）当表格的border-collapse属性设置为collapse时，则HTML中设置的cellspacing属性值无效；（2）行标签<tr>无border样式属性。二、相关知识表14-1常用的表格CSS属性二、相关知识属性描述border简写属性。在一条声明中设置所有边框属性。border-collapse规定是否应折叠表格边框。border-spacing规定相邻单元格之间的边框的距离。caption-side规定表格标题的位置。empty-cells规定是否在表格中的空白单元格上显示边框和背景。table-layout设置用于表格的布局算法。14.1.2border-spacing属性border-spacing属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式），该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。二、相关知识属性123

caption-side属性table-layout属性empty-cells属性二、相关知识1.border和border-collapse属性1圆角表格是表格常用的表现形式2CSS中常使用border-radius属性设置表格的圆角二、相关知识14.2制作圆角表格GIF格式最自适应表格是指当浏览器窗口宽度变化时能够自动调节显示方式的表格，制作这类表格需要用到响应式布局的媒体查询功能“@media”，它可以查询设备的屏幕宽度、高度等，在其基础上设置表格样式就实现了自适应表格。二、相关知识14.3制作自适应表格1、教学设备与工具（1）电脑/每人一台；（2）U盘、相关的软件（Dreamweaver/HBuilderX）。三、资源准备2、职位分工（如表14-1所示）三、资源准备表15-13职位分工表职位小组成员（姓名）工作分工备注组长A

小组角色由组长进行统一安排，下一个项目角色职位互换，提升综合职业能力。组员B

组员C

组员D

组员E

四、实践操作美化“网上书店”页面“热销排行榜”区域的表格步骤1：任务引入、效果图展示本任务实施通过美化“网上书店”页面“热销排行榜”区域的表格，练习使用CSS3设置表格样式的方法，页面效果步骤2：任务分析（1）首先通过对table设置整体样式，设置表格的宽度、外边距、文本颜色等属性。（2）设置普通单元格td的高度、内外边距与边框等属性；（3）设置表头th的高度、字号、文本颜色等属性；（4）设置表格中a标记的样式，去除下划线效果，设置文本颜色、第五列单元格的文本颜色等效果；（5）使用设置隔行换色的结构选择器“:nth-child()”为表格设置隔行换色效果。四、实践操作四、相关知识步骤3：任务实现1234设置按钮样式的超链接设置表格整体样式打开配套素材html文档设置超链接与单元格样式五、总结评价1、小组互评（如表14-3所示）表14-3实训过程性评价表（小组互评）组别：

组员：

任务名称：

美化“热销排行榜”表格教学环节

被评组别评分细则第

组课前预习基础知识完整、正确（10分）得分：

实施作业1、操作过程正确（15分）2、基本掌握操作要领（20分）3、操作结果正确（25分）4、小组分工协作完成（10分）各环节得分：1：

2：

3：

4：

质量检验1、学习态度（5分）1：

2：

3：