第06章 表格2.ppt

1、第6章 表格,6.1 定义表格的基本语法 6.2 表格的定义 6.3 表格行的控制 6.4 单元格的控制 6.5 表格的分组 6.6 设置表格的标题caption,上一页,下一页,目 录,结 束,本 节,6.2 表格的定义,6.2.1 设置表格边框的尺寸 6.2.2 设置表格边框的颜色 6.2.3 设置表格的尺寸 6.2.4 设置表格的位置 6.2.5 设置表格的背景颜色或背景图像 6.2.6 设置格框线的宽度 6.2.7 设置格框与内容的空隙 6.2.8 设置表格边框的显示状态 6.2.9 设置分隔线的显示状态,上一页,下一页,目 录,结 束,本 节,6.3.1 设置行的高度 6.3.2 设

2、置行内框的颜色 6.3.3 设置行的背景颜色 6.3.4 设置行的文字水平对齐方式 6.3.5 设置行的文字垂直对齐方式,6.3 表格行的控制,上一页,下一页,目 录,结 束,本 节,6.4.1 设置单元格边框的颜色 6.4.2 设置单元格的背景颜色和背景图像 6.4.3 设置单元格的宽度 6.4.4 设置跨多行跨多列的单元格 6.4.5 设置单元格内文字的对齐方式,6.4 单元格的控制,上一页,下一页,目 录,结 束,本 节,6.5.1 表格的行分组thead/tbody/tfoot 6.5.2 表格的列分组colgroup 6.5.3 表格的行列分组,6.5 表格的分组,上一页,下一页,目

3、 录,结 束,本 节,6.1 定义表格的基本语法,在HTML中，表格的建立将运用、四个标签完成。下面是这四个标签的说明： 定义表格标签：标签用于定义一个表格元素，一个表格元素，是由数个横行（）、单元格（）与表头单元格（）子元素所组成。 定义表头标签：标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。在一个表格的定义语法中也可以不使用标签，定义表头单元格。,上一页,下一页,目 录,结 束,本 节, 定义表行标签：标签用于定义表格的一行，在一组标签内可建立一行表格，也可以包含数组由或标签所定义的单元格。 定义单元格标签：标签用于定义表格的单元格，一组标签将建立一个单元格。标签必须

4、放在标签内。 在一个最基本的表格元素中，必须包含一组标签、一组标签与一组标签。,上一页,下一页,目 录,结 束,本 节,例：一个简单的表格实例，效果如下图所示。 文件ex6-91.html的源代码： 一个简单的表格 姓名 性别 年龄 专业 张东健,上一页,下一页,目 录,结 束,本 节,男 18 计算机 ,上一页,下一页,目 录,结 束,本 节,是用于定义一个表格元素的标签。标签的属性主要有border、bordercolor、bordercolorlight、bordercolordark、width、height、align、bgcolor、background、cellapacing、c

5、ellpadding、frame和rules，它们都是可选的。,6.2 表格的定义,上一页,下一页,目 录,结 束,本 节,设置边框尺寸的语法如下： border属性的参数值是数字，表示表格边框宽度所占的像素点数。例如，表示表格的边框宽度为10个像素点。,6.2.1 设置表格边框的尺寸border,上一页,下一页,目 录,结 束,本 节,通过设置表格边框的颜色，能达到较好的视觉效果。但是同样需要指出的是，一些低版本的浏览器并不支持表格的背景颜色和背景图像，在实际制作网页时，应该尽可能多地用各种浏览器对制作的网页进行测试。 设置表格边框颜色的基本语法如下： 设置表格边框颜色的亮度的基本语法如下：

6、 其中，“#”取值为16进制的颜色代码，参见表2.3颜色代码表。,6.2.2 设置表格边框的颜色,上一页,下一页,目 录,结 束,本 节,6.2.3 设置表格的尺寸width/height,设置表格尺寸的语法如下： width和height属性的作用是指定表格的大小。其中width属性用以规定表格的宽度，height属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数，其中数字表示表格宽度（高度）所占的像素点数，百分数表示表格的宽度（高度）占浏览器窗口宽度（高度）的百分比。例：表示该表格的宽度为200个像素点，高度为浏览器窗口高度的50%。,上一页,下一页,目 录,结 束,本 节,设置

7、表格的位置的基本语法如下： align属性的参数值为left、center和right之一，分别 表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。,6.2.4 设置表格的位置align,上一页,下一页,目 录,结 束,本 节,6.2.5 设置表格的背景颜色或背景图像,设置表格的背景颜色或背景图像的基本语法如下： 其中，“#”取值为16进制的颜色代码，参见表2.3颜色代码表。,上一页,下一页,目 录,结 束,本 节,6.2.6 设置格框线的宽度cellspacing,设置格框线宽度的语法如下： 在格与格之间有间隔线，称其为格框线。使用 cellspacing属性可以指定格

8、框线的宽度。 该属性的参数值取像素值，默认值为2。加宽了格框线，表格会变得大一些。,上一页,下一页,目 录,结 束,本 节,6.2.7 设置格框与内容的空隙cellpadding,设置格框与内容的空隙的语法如下： cellpadding属性用于指定单元格内容与单元格边界之间空白距离的大小。该属性的参数值取像素值，表示单元格内容与上下边界之间空白距离的高度所占的像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。,上一页,下一页,目 录,结 束,本 节,表格的边框有4个：左边框、右边框、上边框、下边框。这四个边框都可以设置为显示或者隐藏。 设置表格边框显示状态的基本语法如下： 显示

9、整个表格边框 不显示表格边框 只显示表格的上下边框 只显示表格的左右边框 只显示表格的上边框 只显示表格的下边框 只显示表格的左边框 只显示表格的右边框 ,6.2.8 设置表格边框的显示状态frame,上一页,下一页,目 录,结 束,本 节,6.2.9 设置分隔线的显示状态rules,表格中分隔线的显示同样可以进行各种设置，各种效果如图所示。 设置表格中分隔线的显示状态的基本语法如下： 显示所有分隔线 只显示组与组的分隔线 只显示行与行的分隔线 只显示列与列的分隔线 所有分隔线都不显示 ,上一页,下一页,目 录,结 束,本 节,上一页,下一页,目 录,结 束,本 节,6.3 表格行的控制,HT

10、ML中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相应对。标签有height、bordercolor、bgcolor、align和valign属性，它们都是可选的。,上一页,下一页,目 录,结 束,本 节,当height属性设置在标签中时，可控制表格内某行的高度，此属性的设置语法如下： 数值的设置值为一整数，其单位为像素（Pixel）。,6.3.1 设置行的高度height,上一页,下一页,目 录,结 束,本 节,当bordercolor属性设置在标签中时，将用于控制表格某行内边框颜色，此属性的设置语法如下： 其中，“#”取值为16进制的颜色代码。,6.3.2 设置行内框的颜色

11、bordercolor,上一页,下一页,目 录,结 束,本 节,当将bgcolor属性使用在标签里时，可以控制表格中该行单元格的背景颜色，设置语法如下： 其中，“#”取值为16进制的颜色代码，参见表2.3颜色代码表。,6.3.3 设置行的背景颜色bgcolor,上一页,下一页,目 录,结 束,本 节,当将align属性使用在标签里时，可以控制表格中该行单元格内文字的水平对齐方式，设置语法如下： 其中，参数值为left、center、right之一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。align属性的缺省值为left。,6.3.4 设置行的文字水平对齐方式align,上一页,

12、下一页,目 录,结 束,本 节,当将valign属性使用在标签里时，可以控制表格中该行单元格内文字的垂直方向对齐方式，设置语法如下： 其中，参数值为top、middle和bottom之一，分别表示该行中各单元格内容是上对齐、垂直居中和下对齐的。valign属性的缺省值为middle。,6.3.5 设置行的文字垂直对齐方式valign,上一页,下一页,目 录,结 束,本 节,和标签都是用于规定单元格内容的。表头标签用于规定表头元素的内容，表头元素一般位于每列的首行，用以说明该列的具体数据是关于哪个对象的。标签是成对出现标签，首标签和尾标签之间的内容就是位于该单元格的表头元素内容。数据标签也是成对

13、出现标签，首标签和尾标签之间的内容就是该单元格中的具体数据。除了表头元素是以粗体显示这一点外，表头元素和具体数据元素几乎没有什么区别。由于都是用于规定单元格内容的，和标签的所有属性及相应的属性功能是完全一样的。 和标签的属性有bordercolor、bgcolor、background、width、align、valign、rowspan、colspan，它们都是可选的。,6.4 单元格的控制,上一页,下一页,目 录,结 束,本 节,当bordercolor属性设置在或标签中时，将可控制表格内某单元格的边框颜色，此属性的设置语法如下： 其中，“#”取值为16进制的颜色代码。,6.4.1 设置单

14、元格边框的颜色bordercolor,上一页,下一页,目 录,结 束,本 节,当bgcolor/background属性使用在或标签时，可以控制表格中某单元格的背景颜色和背景图像，设置语法如下： 或 其中“#”的取值为16进制颜色代码。,6.4.2 设置单元格的背景颜色和背景图像,上一页,下一页,目 录,结 束,本 节,当width属性设置在或标签中时，可控制表格中某单元格的宽度，设置语法如下： 此属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素点数，百分数表示此单元格的宽度占整个表格宽度的百分比。,6.4.3 设置单元格的宽度width,上一页,下一页,目 录,结 束,本

15、节,在表格的使用中，有时会遇到某些数据占多行多列的情况，为了保证表格的正确，必须对表格进行相应的调整。对于这种情况，可以使用或标签中的colspan和rowspan属性来解决。设置语法如下： 或 rowspan属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为1。 colspan属性的参数值是数字，表示该单元格所跨的列数。该属性的缺省值也是1。,6.4.4 设置跨多行跨多列的单元格,上一页,下一页,目 录,结 束,本 节,做好一个表格后，有时希望根据数据的不同情况，调整它们在单元格中的位置，以得到满意的显示效果。这时可以在和标签中使用align和valign属性。 align属性的设

16、置语法如下： align属性用于规定单元格内容在水平方向上的位置。属性的参数值为left、center和right之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对齐的。,6.4.5 设置单元格内文字的对齐方式,上一页,下一页,目 录,结 束,本 节,valign属性的设置语法如下： valign属性用于规定单元格内容在垂直方向上位置。属性的参数值为top、middle和bottom之一，分别表示该单元格内容是上对齐、垂直居中和下对齐的。缺省时，单元格内容是垂直居中的。,上一页,下一页,目 录,结 束,本 节,HTML允许文档编辑者将表格按行分组。每一组由表头、表

17、格主体和尾注三部分组成。其中尾注部分是可选的。表格的按行分组是通过使用表头行标签、表格主体标签和尾注标签来实现的。标签是成对标签，首标签和尾标签之间的内容是一系列由表头标签标识的表头元素。我们可以在标签中规定表头行中所有表头元素的公共属性。标签拥有的属性以及属性对应的功能和标签完全一样。和标签也是成对标签，其中标签用于规定表格主体部分的共有特性,标签用于规定尾注的特性。实践中，标签很少使用。,6.5.1 表格的行分组thead/tbody/tfoot,上一页,下一页,目 录,结 束,本 节,HTML使用标签来将表格按列分组。基本语法设置如下： 标签有两个属性：span和align，它们都是可选

18、的。span属性的参数值为数字，表示该组包含的列数。该属性的缺省值为1。align属性用以规定该组所跨列中所有单元格内容在水平方向上的位置。该属性的参数值为left、center和right之一，分别表示各单元格内容是左对齐、水平居中和右对齐的。,6.5.2 表格的列分组colgroup,上一页,下一页,目 录,结 束,本 节,HTML中的表格是可以同时进行分组和列分组的，即我们可以在用行分组指定表格中某行或某几行公共属性的同时，又使用列分组指定某列或某几列的公共属性。,6.5.3 表格的行列分组,上一页,下一页,目 录,结 束,本 节,表格的标题用来提示表格的主题，使浏览者明白表格是反映什么内容。表格标题使用专门的标签。表格标题标签