《使用HTML和CSS开发Web网站教学资料》第二章 表格和列表（理论）.pptVIP

网页中使用表格 与表格相关的一组标签 table tr td排名/td td歌曲/td td歌手/td /tr tr td1/td td灰色的彩虹/td td范玮琪/td /tr …… /table table的属性 表格标题和标题单元格 table border=1 width=80% captionXX公司八月份工资表/caption tr th姓名/th th基本工资/th th岗位工资/th th补贴/th th应发工资/th /tr tr thximo su/th td1000/td td2000/td td200/td td3200/td /tr …… /table 单元格合并 tr th rowspan=2部门/th th rowspan=2姓名/th th colspan=2工资/th th colspan=2补贴/th th rowspan=2应发工资/th /tr th、td的属性 单元格内容的对齐方式 table border=1 width=250px tr td rowspan=2 valign=top单元格/td td align=center单元格/td td align=right单元格/td /tr tr td colspan=2 单元格/td /tr /table 列表 一组逻辑上相关而且级别相同的段落，描述一个事物的不同方面或一件事情的几个步骤。 使用列表来组织这些项目，可以使网页的结构更加清晰。 有序列表，包含一组需要强调先后顺序的项目，如旅行社某天的日程； 无序列表，包含一组不需强调先后顺序的项目，如课程体系包含的若干科目。 有序列表 无序列表 中国职业教育联盟课程体系 * * 中国职业教育联盟课程体系 * * * * 中国职业教育联盟课程体系 中国职业教育联盟课程体系 成就百万精英 使用HTML和CSS开发WEB网站 第二章 表格与列表 本章单词 table （表格，目录) border （边，边界，边框） caption （解说词，标题） cell （细胞，组成单元） width （宽度） align （对齐） vertical （垂直的） row （排，行） collumn （柱，列） item （一个物品，一个条款，条目，项目） 预习检查 为表格设置( )属性可以控制表格中相邻单元格的间距，设置( )属性可以控制表格中单元格的内容与其边界的间隙。 width cellspacing cellspacing width cellspacing cellpadding cellpadding cellspaing 使用( )标签为表格创建标题，使用( )标签代替td/td标签可以创建标题单元格。 th/th caption/caption caption/caption tr/tr title/title th/th caption/caption th/th 预习检查 为单元格标签设置( )属性可实现跨行合并，设置( )属性可实现跨列合并。 rowCells colCells cellRow cellCol rows cols rowspan colspan 要显示乘314路公交车从汽车西站到五一广场途中经过的公交站点，并在每个公交站点名称前用数字表示途经的先后顺序，应使用( )标签和它内部的( )标签。 li/li list/list list/list item/item ul/ul li/li ol/ol li/li 预习检查 ul/ul标签显示时，它内部的列表项目前面默认显示的符号是( )。 阿拉伯数字 英文字母 实心圆点 空心圆圈 本章目标 理解表格的结构 掌握表格相关的标签 掌握单元格合并 理解列表的分类 掌握两种列表及列表项目的标签 演示 例2-1 设置表格中每个单元格的内容与单元格边界的距离。 cellpadding 设置表格中相邻单元格之间的距离。 cellspacing 设置表格的宽度，可用px像素单位，或%百分比。 width 设置表格边框的宽度，默认无边框。 border 意义 属性 table border=1 width=280px cellspacing=5px cellpadding=12px 演示 例2-2 演示 例2-3 tr th基本工资/th th岗位工资/th th午餐补助/th th高温补助/th /tr tr th rowspan=2研发部/th thximo su/th td1000/td td2000/td td200/td