第二章 HTML语言的语法基(3) —HTML中的表格元素.ppt

1、HTML中的表格元素,成绩表,表格标记,标记是表格的标识符，用以界定表格的范围。标记是成对出现标记，首标记和尾标记之间的内容就是表格的内容。标记的属性主要有border、width、height、align、cellspacing和cellpadding，它们都是可选的。,标记的属性border属性,border属性的参数值是数字，表示表格边框宽度所占的像素点数。border属性也可以不带参数值使用，仅表示该表格是有边框的。例如，表示该表格的边框宽度为10个像素点。,标记的属性width和height属性,width和height属性的作用是指定表格的大小。其中width属性用以规定表格的宽度

2、，height属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数， 数字表示表格宽度(高度)所占的像素点数 百分数表示表格的宽度(高度)占浏览器窗口宽度(高度)的百分比。 例：表示该表格的宽度为200个像素点，高度为浏览器窗口高度的50%。,标记的属性align属性,align属性的参数值为left、center和right之一，表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。,例子, An example of table Number Name DepartmentCourse Score 1 John Computer Programming87 2 B

3、etty ManagementMarketing 85 This is an example of ALIGN=left Please pay attention to the relative position Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty ManagementMarketing 85 This is an example of ALIGN=center Please pay attention to the relative position Number Name Depa

4、rtmentCourse Score 1 John Computer Programming87 2 Betty ManagementMarketing 85 This is an example of ALIGN=right Please pay attention to the relative position ,标记的属性,cellspacing属性 cellspacing属性用以指定表格各单元格之间的空隙。该属性的参数值为数字，表示单元格间隙所占的像素点数。 cellpadding属性 cellpadding属性用于指定单元格内容与单元格边界之间距离的大小。该属性的参数值也是数字，表

5、示单元格内容与上下边界以及左右边界之间距离所占的像素点数。,例, An example of table 未加入单元格属性规定前： Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 加入单元格属性规定后： Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 ,HTML中的表格元素,表格标题,成绩表,具体数据元素,

6、表头元素,嵌套在表格标记中使用的标记主要有、和。,表格标题标记,表格标题标记是成对出现标记，首标记和尾标记之间的内容就是表格的标题。 ALIGN属性 ALIGN属性的参数值为left、center和right之一，分别表示表格标题与表格的左沿对齐、位于表格中间和与表格的右沿对齐。缺省时，表格标题位于表格中间。 VALIGN属性 VALIGN属性的参数值为top和bottom之一，分别表示表格标题位于表格的上方和下方。缺省时，表格标题位于表格的上方。,例:, 表格标题测试文档 Students Score Number Name DepartmentCourse Score 1 John Com

7、puter Programming87 2 Betty Management Marketing 85 Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 ,行标记,HTML中的表格是按行组织的。一个表格由几行组成，就要有几个行标记与之相对应。行标记是成对标记，它必须与或标记配套使用，后者在使用时嵌套在行标记的首标记和尾标记之间，用于规定该行中各单元格的内容。,标记的两个属性,1ALIGN属性 ALIGN属性的参数值为lef

8、t、center和right之一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。ALIGN属性的缺省值为left（ ）或center（ ）。 2VALIGN属性 VALIGN属性的参数值为top、middle/center和bottom之一，分别表示该行中各单元格内容是紧靠上沿、垂直居中和紧靠下沿的。VALIGN属性的缺省值为middle。,单元格标记和,和标记都是用于规定单元格内容的。 表头标记用于规定表头元素是完全一样的。只是缺省的属性的取值不同。,单元格标记和的属性,1align属性 align属性用于规定单元格内容在水平方向上的位置。属性的参数值为left、center和ri

9、ght之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对齐的。 2valign属性 valign属性用于规定单元格内容在垂直方向上的位置。属性的参数值为top、middle和bottom之一，分别表示该单元格内容是紧靠上沿、垂直居中和紧靠下沿的。缺省时，单元格内容是垂直居中的。,例, 表格标题测试文档 Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 ,单元格标记和的属性,3rowspan属性

10、 rowspan属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为1。 4colspan属性 colspan属性的参数值是数字，表示该单元格所跨的列数。colspan属性的缺省值也是1。,计算colspan 的方法,1,2,3,4,5,表格每行应该有的单元格,例:, 单元格位置属性范例程序 Students Score Students Information About Course Number Name Department Course Score 1 MarthrewComputer Programming87 2 Betty ManagementMarketing 85

11、3 Accounting ,仅在IE中有效的标记和属性,的bgcolor属性 的background属性 的frame属性 行分组 列分组 的rules属性,的bgcolor属性,bgcolor属性用于规定单元格的背景色彩，可以使用颜色的代码或直接使用该颜色对应的英文单词。,的background属性,的background属性用于指定该单元格背景文档所在的位置，该属性的参数值是背景文档的url.,的frame属性,Frame属性用于规定表格边框： frame=box 显示所有边框 frame=void 不显示所有边框 frame=above 只显示上边框 frame=below 只显示下边框

12、 frame=hsides 只显示上下边框 frame=vsides 只显示左右边框 frame=lhs 只显示左边框 frame=rhs 只显示右边框,表格的行分组,HTML允许文档编辑者将表格按行分组。每一组由表头、表格主体和尾注三部分组成，其中尾注部分是可选的。表格的按行分组是通过使用表头行标记、表格主体标记和尾注标记来实现的。 标记是成对标记，首标记和尾标记之间的内容是一系列由表头标记标识的表头元素。我们可以在标记中规定表头行中所有表头元素的公共属性。 标记拥有的属性以及属性对应的功能和标记完全一样。 和标记也是成对标记，其中标记用于规定表格主体部分的共有特性 标记用于规定尾注的特性。

13、,例, 表格按行分组的范例程序 Students Information NameCodeAddressTelephone Mary9801Yanchang Road56331001 Jimmy9802Yanchang Road56331002 Mike9803Yanchang Road56331003 Susan9805Yanchang Road56331005 ,表格的列分组,HTML使用标记来将表格按列分组 SPAN属性。SPAN属性的参数值为数字，表示该组包含的列数。该属性的缺省值为1。 ALIGN属性。ALIGN属性用以规定该组所跨列中所有单元格内容在水平方向上的位置。该属性的参数值

14、为left、center和right之一 ，分别表示各单元格内容是左对齐、水平居中和右对齐的。,例, 表格按列分组的范例程序 Students Information NameCodeAddressTelephone Mary9801Yanchang Road56331001 Jimmy9802Yanchang Road56331002 Mike9803Yanchang Road56331003 Susan9805Yanchang Road56331005 ,同时行分组和列分组,HTML中的表格是可以同时进行行分组和列分组的，即我们可以在用行分组指定表格中某行或某几行公共属性的同时，又使用列分

15、组指定某列或某几列的公共属性。,例, 同时进行行列分组的范例程序 Students Information NameCodeAddressTelephone Mary9801Yanchang Road56331001 Jimmy9802Yanchang Road56331002 Mike9803Yanchang Road56331003 Susan9805Yanchang Road56331005 ,标记的rules属性此时不能规定border属性，要缺省,rules属性用于规定表格内部分格线的显示样式。该属性的参数值为以下5项之一： (1) all。浏览器将显示所有的内部分格线。 (2) n

16、one。浏览器不显示任何内部分格线。,例, 内部分格线显示样式 浏览器显示所有的内部分格线： Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 3 BillyFinancing Accounting81 浏览器不显示任何内部分格线： Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Manageme

17、nt Marketing 85 3 BillyFinancing Accounting81 ,标记的rules属性,(3) rows。浏览器只显示行与行之间的分格线。 (4) cols。浏览器只显示列与列之间的分格线。,例, 内部分格线显示样式 浏览器只显示行与行之间的分格线： Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketing 85 3 BillyFinancing Accounting81 浏览器只显示列与列之间的分格线： Students Score Number Name DepartmentCourse Score 1 John Computer Programming87 2 Betty Management Marketin