(B 列表与表格.pptVIP

cellpadding与cellspacing在项目开发中经常将其设为0，以去除内容间的缝隙 此处讲解valign的属性值 图片素材准备好的情况下，教员手敲演示。一定要给学生演示。 讲解要点： * 此处事例需详细讲解，包括留白的用途（留白主要是使我们设计的网页不受分辨率的影响），外层为3行1列表格，中间为1行2列表格，讲解百分比，valign的应用，cellpadding，cellspacing设为0的意义 只有td（单元格）才是真正的容器，所以的内容必须放在单元格内。 * 列表与表格 * 回顾 WWW基本概念 HTML简介 HTML语法结构 基本标签、属性 超级链接 * 课程目标 无序列表 有序列表 嵌套列表 表格的定义 表格布局 * 无序列表 无序列表标签ul用于页面中没有顺序的列举项。 格式： ul type= type设置标号的类型，值可以取： 1 disc ：实心圆点 2 circle ：空心圆点 3 square ：实心方块 * 有序列表 有序列表ol用于说明页面中的某些成分需要按特定的顺序排列。 有序列表的每项都有连续的编号。 格式：ol type= start= type设置标号的类型，值可以取： 1：显示数字 A：显示大写字母 a：显示小写字母 I：显示大写罗马数字 i：显示小写罗马数字 start取值：数字。 * 嵌套列表 嵌套列表：一个列表作为另一个列表的一部分，即多层列表。 * 为什么使用表格 表格应用场合 门户网站应用表格 * 表格的基本结构 行 列 单元格 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 * 表格的基本语法 table border=1 tr td 单元格内容 /td …… /tr …… /table table.../ table定义表格 td…/td 定义列 tr…/tr 定义行 border用来设置表格边框尺寸大小 * 表格 表格：使用表格可以方便快捷的将大量数据和信息组织在一起。 HTML中的表格通过table、tr、th、td四个标签完成。 表格标签table用于定义表格，表格由多行 tr组成。 表头标签th用于定义表格的标题行。标题行中的字体是粗体。标题行是可选的。 * 表格 标签tr用于定义表格中的一行，一行中包含多个由td定义的列。 标签td用于定义表格的单元格，td必须放在行标签内才有意义。 * 表头与标题 table border=1 caption域名数量报表/caption tr th/th th.com域名的数量/th th.cn域名的数量/th th.net域名的数量/th /tr tr th2003年/th td1000/td td2000/td td3000/td /tr /table * 什么是跨行跨列的表格 下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列? 跨2列 跨2行 * table border=1 tr td手机充值、IP卡 /td td colspan=2办公设备、文具/td /tr tr td rowspan=2各种卡的总汇/td td铅笔/td td彩笔/td /tr tr td打印/td td刻录/td /tr /table 如何创建跨行跨列的表格 * 填充属性和间距属性 border(边框的厚度) 内容 内容 内容 内容 cellpadding (单元格填充) cellspacing (单元格间距) * 如何使用填充、间距属性 border(边框的厚度) cellpadding (单元格填充) cellspacing (单元格间距) table border=20 cellpadding=30 cellspacing=40 bordercolor=red …… /table * 表格的属性 table标签可以带上属性设置表格的形式。 border：设置边框的尺寸，单位像素。 bordercolor：设置边框的颜色 width/height：设置表格的尺寸，单位像素 align：设置表格的水平对齐方式 bgcolor：设置表格背景颜色 background：设置表格的背景图片 cellspacing：设置单元格间距，单位像素 cellpadding：设置单元格边框与内容的空隙 * 行的属性 组成表格的行tr也可以设置自己的属性： height：设置行的高度，单位像素 bgcolor：设置行的背景颜色 bordercolor：设置行的边框的颜色 a