模块二 任务5 歌曲榜单栏目实现.pptx

歌曲榜单栏目实现Web前端技术主讲老师：***延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述在日常生活中，我们会用到表格来显示数据，比如价目表、产品比较表、课程表等，在网页中同样可以使用表格，以帮助在页面上构建文本、图像或对象，通过表格，可以使网页排版更加清晰，形式更加简洁漂亮。本节任务是将歌曲榜单以表格形式在页面中展现。延时符

页面效果图延时符

学习目标延时符

学习目标掌握表格的基本概念；掌握table、tr和td标签的用法；掌握表格中常用属性用法；知识目标能够根据效果图合理使用表格进行展示；能学会常用表格标签的方法；能学会合并单元格的用法；技能目标延时符培养细致认真的工作态度；培养与他人合作沟通的能力；培养独立思考的能力。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符表格标签表格相关属性

HTML标签：表格标签延时符(1) 表格布局中有三个重要的标签：table/table：表格的开始和结束标签，行列的布局都在table标签内。tr/tr行标签的开始和结束。tb/tb列标签的开始和结束。行标签在列标签的外层，不能单独使用，其中必须至少有一列。

HTML标签：表格标签延时符(2) 单元格设置的相关标签。1) 单元格表头th/th这个标签用来设置表格的表头，作用和列标签相似，只是字体是加黑的。2) 表格宽度属性和高度属性width,height。这两个属性可以设置在table标签里，也可以设置在tr和tb中，作用域会不同。3) 设置表格背景图片background。这个属性和尺寸属性用法一样，写在相应的标签里，就是相应的背景图案，设置的是图片的路径。4) 设置表格行列间距cellspacing。5) 设置单元格内容偏移量cellpadding表格相关标签的使用方法视频讲解

HTML标签：表格标签延时符(3) 表格的边框属性和对齐模式。灵活的应用边框，可以使表格看起来更加整洁有序。边框宽度属性border。边框的颜色属性bordercolor。不显示外边框frame=void。设置frame=hsides则只显示上下外边框。设置frame=vsides则只显示左右外边框单独显示边框的frame值分别为：上：above,下：below,左：lhs,右：rhs。设置表格对齐模式：水平对齐模式：align,表格的align属性可以设置对齐模式，center,left,right分别对应居中，左对齐，右对齐。垂直对齐模式：valign,和水平对齐模式相似，这个属性的值为：middle，top，bottom对应了中间对齐，上对齐和下对齐。

HTML标签：表格标签延时符表格行和列的操作。行的合并：rowspan。2）列的合并colspan。3)表格的标题标签caption/caption。合并行列视频讲解

任务实施延时符结构分析样式分析设置页面样式页面结构

结构分析延时符“歌曲榜单”栏目由上下两部分组成。上半部分是标题。上下以分隔线划分。下半部分是以表格形式展示的榜单内容。

样式分析12歌曲榜单单双行用背景色加以区分。 3榜单用图利用阴影样式显示。延时符任务实施视频讲解标题样式同MV速递。4榜单小标题与图标用子选择器和background-position确定位置。

谢谢观看！