网页设计课件ch6表格072

《网页设计课件ch6表格072》由会员分享，可在线阅读，更多相关《网页设计课件ch6表格072（45页珍藏版）》请在金锄头文库上搜索。

1、第6章 表 格,第6章 表格,6.1 定义表格的基本语法 6.2 表格的定义 6.3 表格行的控制 6.4 单元格的控制 6.5 表格的分组 6.6 设置表格的标题caption,6.1 定义表格的基本语法,在HTML中，表格的建立将运用、四个标签完成。,定义表格标签,标签用于定义一个表格元素，一个表格元素，是由数个横行（）、单元格（）与表头单元格（）子元素所组成。,定义表行标签,标签用于定义表格的一行，在一组标签内可建立一行表格，也可以包含数组由或标签所定义的单元格。,定义单元格标签,标签用于定义表格的单元格，标签必须放在标签内。 数据标签是成对出现标签，首标签和尾标签之间的内容就是该单元格

2、中的具体数据。 注：在一个最基本的表格元素中，必须包含一组标签、一组标签与一组标签。,定义表头标签,标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示 标签是成对出现标签，首标签和尾标签之间的内容就是位于该单元格的表头元素内容。 在一个表格的定义语法中也可以不使用标签，定义表头单元格。,示例： 一个简单的表格 姓名 性别 年龄 专业 张东健 男 18 计算机 ,是用于定义一个表格元素的标签。标签的属性主要有border、bordercolor、bordercolorlight、bordercolordark、width、height、align、bgcolor、backgrou

3、nd、cellapacing、cellpadding、frame和rules，它们都是可选的。,6.2 表格的定义,设置边框尺寸的语法如下： border属性的参数值是数字，表示表格边框宽度所占的像素点数。例如，表示表格的边框宽度为10个像素点。,6.2.1 设置表格边框的尺寸border,设置表格边框颜色的基本语法如下： 设置表格边框颜色的亮度的基本语法如下： 其中，“#”取值为16进制的颜色代码，其代码可参见第二章的颜色代码表。,6.2.2 设置表格边框的颜色,6.2.3 设置表格的尺寸width/height,设置表格尺寸的语法如下： width和height属性的作用是指定表格的大小。

4、其中width属性用以规定表格的宽度，height属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数,6.2.3 设置表格的尺寸width/height,例： 表示该表格的宽度为200个像素点，高度为浏览器窗口高度的50%。,设置表格的位置的基本语法如下： align属性的参数值为left、center和right之一，分别 表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。,6.2.4 设置表格的位置align,6.2.5 设置表格的背景颜色或背景图像,设置表格的背景颜色或背景图像的基本语法如下： 其中，“#”取值为16进制的颜色代码。,6.2.6 设置格框线

5、 的宽度cellspacing,设置格框线宽度的语法如下： 在格与格之间有间隔线，称其为格框线。使用 cellspacing属性可以指定格框线的宽度。 该属性的参数值取像素值，默认值为2。加宽了格框线，表格会变得大一些。,6.2.7 设置格框与 内容的空隙cellpadding,设置格框与内容的空隙的语法如下： cellpadding属性用于指定单元格内容与单元格边界之间空白距离的大小。该属性的参数值取像素值，表示单元格内容与上下边界之间空白距离的高度所占的像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。,设置表格的左边框、右边框、上边框、下边框为显示或者隐藏。 设置表格边框

6、显示状态的基本语法如下： 显示整个表格边框 不显示表格边框 只显示表格的上下边框 只显示表格的左右边框 只显示表格的上边框 只显示表格的下边框 只显示表格的左边框 只显示表格的右边框 ,6.2.8 设置表格 边框的显示状态frame,6.2.9 设置分隔线的显示状态rules,设置表格中分隔线的显示状态，各种效果如图所示。 设置表格中分隔线的显示状态的基本语法如下： 显示所有分隔线 只显示组与组的分隔线 只显示行与行的分隔线 只显示列与列的分隔线 所有分隔线都不显示 ,6.3 表格行的控制,HTML中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相应对。标签有height、bor

7、dercolor、bgcolor、align和valign属性，它们都是可选的。,height属性可控制表格内某行的高度，此属性的设置语法如下： 数值的设置值为一整数，其单位为像素（Pixel）。,6.3.1 设置行的高度height,bordercolor属性用于控制表格某行内边框颜色，此属性的设置语法如下： 其中，“#”取值为16进制的颜色代码。,6.3.2 设置行内框的颜色bordercolor,bgcolor属性可以控制表格中该行单元格的背景颜色，设置语法如下： 其中，“#”取值为16进制的颜色代码。,6.3.3 设置行的背景颜色bgcolor,align属性可以控制表格中该行单元格内

8、文字的水平对齐方式，设置语法如下： 其中，参数值为left、center、right之一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。align属性的缺省值为left。,6.3.4 设置行的 文字水平对齐方式align,26,valign属性可以控制表格中该行单元格内文字的垂直方向对齐方式，设置语法如下： 其中，参数值为top、middle和bottom之一，分别表示该行中各单元格内容是上对齐、垂直居中和下对齐的。valign属性的缺省值为middle。,6.3.5 设置行的文字 垂直对齐方式valign,27,和标签都是用于规定单元格内容的。除了表头元素是以粗体显示这一点外，表头

9、元素和具体数据元素几乎没有什么区别。 和标签的所有属性及相应的属性功能是完全一样的。 和标签的属性有bordercolor、bgcolor、background、width、align、valign、rowspan、colspan，它们都是可选的。,6.4 单元格的控制,28,当bordercolor属性设置在或标签中时，将可控制表格内某单元格的边框颜色，此属性的设置语法如下： 其中，“#”取值为16进制的颜色代码。,6.4.1 设置单元格 边框的颜色bordercolor,29,当bgcolor/background属性使用在或标签时，可以控制表格中某单元格的背景颜色和背景图像，设置语法如下

10、： 或 其中“#”的取值为16进制颜色代码。,6.4.2 设置单元格的 背景颜色和背景图像,30,当width属性设置在或标签中时，可控制表格中某单元格的宽度，设置语法如下： 此属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素点数，百分数表示此单元格的宽度占整个表格宽度的百分比。,6.4.3 设置 单元格的宽度width,31,在表格的使用中，有时会遇到某些数据占多行多列的情况。可以使用或标签中的colspan和rowspan属性来实现。设置语法如下： 或 rowspan属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为1。 colspan属性的参数值是数字，表示该

11、单元格所跨的列数。该属性的缺省值也是1。,6.4.4 设置跨多行跨多列的单元格,32,可以在和标签中使用align和valign属性调整单元格中内容的左右、上下位置。 align属性的设置语法如下： align属性用于规定单元格内容在水平方向上的位置。属性的参数值为left、center和right之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对齐的。,6.4.5 设置单元格内文字的对齐方式,33,valign属性的设置语法如下： valign属性用于规定单元格内容在垂直方向上位置。属性的参数值为top、middle和bottom之一，分别表示该单元格内容是上对

12、齐、垂直居中和下对齐的。缺省时，单元格内容是垂直居中的。,6.4.5 设置单元格内文字的对齐方式,6.5 表格的分组,35,HTML允许文档编辑者将表格按行分组。每一组由表头、表格主体和尾注三部分组成。其中尾注部分是可选的。 表格的按行分组是通过使用表头行标签、表格主体标签和尾注标签来实现的。,6.5.1 表格的行分组 thead/tbody/tfoot,36,标签是成对标签，首标签和尾标签之间的内容是一系列由表头标签标识的表头元素。我们可以在标签中规定表头行中所有表头元素的公共属性。标签拥有的属性以及属性对应的功能和标签完全一样。,6.5.1 表格的行分组 thead/tbody/tfoot

13、,37,和标签也是成对标签，其中标签用于规定表格主体部分的共有特性,标签用于规定尾注的特性。实践中，标签很少使用。,6.5.1 表格的行分组 thead/tbody/tfoot,38,HTML使用标签来将表格按列分组。基本语法设置如下： 标签有两个属性：span和align，它们都是可选的。span属性的参数值为数字，表示该组包含的列数。该属性的缺省值为1。align属性用以规定该组所跨列中所有单元格内容在水平方向上的位置。该属性的参数值为left、center和right之一，分别表示各单元格内容是左对齐、水平居中和右对齐的。,6.5.2 表格的列分组colgroup,39,HTML中的表格

14、是可以同时行分组和列分组的，即我们可以在用行分组指定表格中某行或某几行公共属性的同时，又使用列分组指定某列或某几列的公共属性。,6.5.3 表格的行列分组,40,表格标题使用专门的标签。表格标题标签是成对出现标签，首标签和尾标签之间的内容就是表格的标题，如果不想要标题，不加标签就可以了。基本语法设置如下： 表格标题,6.6 设置表格的标题,41,应放在标签里面，在表格的行标签tr之前。 有两个属性：align和valign，它们都是可选的。,6.6 设置表格的标题,42,align属性的参数值的为left、center和right之一，分别表示表格标题与表格的左沿对齐、位于表格中间和与表格的右沿对齐。缺省时，表格标题位于表格中间。 valign属性的参数值为top和bottom之一，分别表示表格标题位于表格的上方和下方。缺省时，表格标题位于表格的上方。,6.6 设置表格的标题,表格运用的注意点,浏览器在读取网页html原代码时，是读完整一个table再将它显示出来 越复杂，嵌套层次越多的表格下载速度越慢,我们在设计页面表格的时应做到:,整个页面不要都套在一个表格里，尽量拆分成多个表格; 单一表格的结构尽量整齐； 表格嵌套层次尽量要少.,本章结束,