第二章表格和列表(理论)分析.pptVIP

表格和列表 第二章 本章单词 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标签显示时，它内部的列表项目前面默认显示的符号是( )。 阿拉伯数字 英文字母 实心圆点 空心圆圈 本章目标 理解表格的结构 掌握表格相关的标签 掌握单元格合并 理解列表的分类 掌握两种列表及列表项目的标签 网页中使用表格 与表格相关的一组标签 table tr td排名/td td歌曲/td td歌手/td /tr tr td1/td td灰色的彩虹/td td范玮琪/td /tr …… /table 演示 例2-1 table的属性 属性 意义 border 设置表格边框的宽度，默认无边框。 width 设置表格的宽度，可用px像素单位，或%百分比。 cellspacing 设置表格中相邻单元格之间的距离。 cellpadding 设置表格中每个单元格的内容与单元格边界的距离。 table border=1 width=280px cellspacing=5px cellpadding=12px 演示 例2-2 表格标题和标题单元格 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 演示 例2-3 单元格合并 tr th rowspan=2部门/th th rowspan=2姓名/th th colspan=2工资/th th colspan=2补贴/th th rowspan=2应发工资/th /tr tr th基本工资/th th岗位工资/th th午餐补助/th th高温补助/th /tr tr th rowspan=2研发部/th thximo su/th td1000/td td2000/td td200/td td100/td td3300/td /tr 演示 例2-4 th、td的属性 属性 意义 colspan 单元格跨列合并后，占据的列数。 rowspan 单元格跨行合并后，占据的行数。 align 单元格内部的内容的水平对齐方式，值可为left、center、right、justify， 在td/td标签内此属性默认为left，在th/th标签内默认为center valign 单元格内部的内容的垂直对齐方式，值可为top、middle、bottom、baseline， 默认为middle。 单元格内容的对齐方式 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