网页设计课件ch_6 表格072.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,6,章 表格,第,6,章 表格,6.1,定义表格的基本语法,6.2,表格的定义,6.3,表格行的控制,6.4,单元格的控制,6.5,表格的分组,6.6,设置表格的标题,caption,6.1,定义表格的基本语法,在,HTML,中，表格的建立将运用,、,、,、,四个标签完成。,定义表格标签,标签用于定义一个表格元素，一个表格元素，是由数个横行（,）、,单元格（,）,与表头单元格（,）,子元素所组成。,定义表行标签,标签用于定义表格的一行，在一组,标签内可建立一行表格，也可以包含数组由,或,标签所定义的单元格。,定义单元格标签,标签用于定义表格的单元格，,标签必须放在,标签内。,数据标签,是成对出现标签，首标签,和尾标签,之间的内容就是该单元格中的具体数据。,注：在一个最基本的表格元素中，必须包含一组,标签、一组,标签与一组,标签。,定义表头标签,标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示,标签是成对出现标签，首标签,和尾标签,之间的内容就是位于该单元格的表头元素内容。,在一个表格的定义语法中也可以不使用,标签，定义表头单元格。,示例：,一个简单的表格,姓名,性别,年龄,专业,张东健,男,18,计算机,是用于定义一个表格元素的标签。,标签的属性主要有,border,、,bordercolor,、,bordercolorlight,、,bordercolordark,、,width,、,height,、,align,、,bgcolor,、,background,、,cellapacing,、,cellpadding,、,frame,和,rules,，,它们都是可选的。,6.2,表格的定义,设置边框尺寸的语法如下：,border,属性的参数值是数字，,表示表格边框宽度,所占的像素点数。例如，,表示表格的边框宽度为,10,个像素点。,6.2.1,设置表格边框的尺寸,border,设置表格边框颜色的基本语法如下：,设置表格边框颜色的亮度的基本语法如下：,其中，“,#”,取值为,16,进制的颜色代码，其代码可参见第二章的颜色代码表。,6.2.2,设置表格边框的颜色,6.2.3,设置表格的尺寸,width/height,设置表格尺寸的语法如下：,width,和,height,属性的作用是指定表格的大小。其中,width,属性用以规定表格的宽度，,height,属性用以规定表格的高度,。这两个属性的参数值,可以是数字或百分数,6.2.3,设置表格的尺寸,width/height,例：,表示该表格的宽度为,200,个像素点，高度为,浏览器窗口,高度的,50%,。,设置表格的位置的基本语法如下：,align,属性的参数值为,left,、,center,和,right,之一，分别 表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。,6.2.4,设置表格的位置,align,6.2.5,设置表格的背景颜色或背景图像,设置表格的背景颜色或背景图像的基本语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,6.2.6,设置格框线,的宽度,cellspacing,设置格框线宽度的语法如下：,在,格与格之间有间隔线，称其为格框线,。使用,cellspacing,属性可以指定格框线的宽度。,该属性的参数值取像素值，,默认值为,2,。加宽了格框线，表格会变得大一些。,6.2.7,设置格框与,内容的空隙,cellpadding,设置格框与内容的空隙的语法如下：,cellpadding,属性用于指定单元格内容与单元格边界之间空白距离的大小,。该属性的参数值取像素值，表示单元格内容与上下边界之间空白距离的高度所占的像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。,设置表格的左边框、右边框、上边框、下边框为显示或者隐藏。,设置表格边框显示状态的基本语法如下：,显示整个表格边框,不显示表格边框,只显示表格的上下边框,只显示表格的左右边框,只显示表格的上边框,只显示表格的下边框,只显示表格的左边框,只显示表格的右边框,6.2.8,设置表格,边框的显示状态,frame,6.2.9,设置分隔线的显示状态,rules,设置表格中分隔线的显示状态,，各种效果如图所示。,设置表格中分隔线的显示状态的基本语法如下：,显示所有分隔线,只显示组与组的分隔线,只显示行与行的分隔线,只显示列与列的分隔线,所有分隔线都不显示,6.3,表格行的控制,HTML,中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相应对。,标签有,height,、,bordercolor,、,bgcolor,、,align,和,valign,属性，它们都是可选的。,height,属性可控制表格内某行的高度,，此属性的设置语法如下：,数值的设置值为一整数，其单位为像素（,Pixel,）。,6.3.1,设置行的高度,height,bordercolor,属性用于控制表格某行内边框颜色,，此属性的设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,6.3.2,设置行内框的颜色,bordercolor,bgcolor,属性可以控制表格中该行单元格的背景颜色,，设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,6.3.3,设置行的背景颜色,bgcolor,align,属性可以控制表格中该行单元格内文字的水平对齐方式,，设置语法如下：,其中，参数值为,left,、,center,、,right,之一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。,align,属性的缺省值为,left,。,6.3.4,设置行的,文字水平对齐方式,align,valign,属性可以控制表格中该行单元格内文字的垂直方向对齐方式,，设置语法如下：,其中，参数值为,top,、,middle,和,bottom,之一，分别表示该行中各单元格内容是上对齐、垂直居中和下对齐的。,valign,属性的缺省值为,middle,。,6.3.5,设置行的文字,垂直对齐方式,valign,26,和,标签都是用于规定单元格内容的。除了表头元素是以粗体显示这一点外，表头元素和具体数据元素几乎没有什么区别。,和,标签的所有属性及相应的属性功能是完全一样的。,和,标签的属性有,bordercolor,、,bgcolor,、,background,、,width,、,align,、,valign,、,rowspan,、,colspan,，,它们都是可选的。,6.4,单元格的控制,27,当,bordercolor,属性设置在,或,标签中时，将可控制表格内某单元格的边框颜色,，此属性的设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,6.4.1,设置单元格,边框的颜色,bordercolor,28,当,bgcolor,/background,属性使用在,或,标签时，可以控制表格中某单元格的背景颜色和背景图像,，设置语法如下：,或,其中“,#”,的取值为,16,进制颜色代码。,6.4.2,设置单元格的,背景颜色和背景图像,29,当,width,属性设置在,或,标签中时，可控制表格中某单元格的宽度，设置语法如下：,此属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素点数，百分数表示此单元格的宽度占整个表格宽度的百分比。,6.4.3,设置,单元格的宽度,width,30,在表格的使用中，有时会遇到某些数据占多行多列的情况。可以使用,或,标签中的,colspan,和,rowspan,属性来实现,。设置语法如下：,或,rowspan,属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为,1,。,colspan,属性的参数值是数字，表示该单元格所跨的列数。该属性的缺省值也是,1,。,6.4.4,设置跨多行跨多列的单元格,31,可以在,和,标签中使用,align,和,valign,属性调整单元格中内容的左右、上下位置。,align,属性的设置语法如下：,align,属性用于规定单元格内容在水平方向上的位置。属性的参数值为,left,、,center,和,right,之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对齐的。,6.4.5,设置单元格内文字的对齐方式,32,valign,属性的设置语法如下：,valign,属性用于规定单元格内容在垂直方向上位置。属性的参数值为,top,、,middle,和,bottom,之一，分别表示该单元格内容是上对齐、垂直居中和下对齐的。缺省时，单元格内容是垂直居中的。,6.4.5,设置单元格内文字的对齐方式,33,6.5,表格的分组,HTML,允许文档编辑者将表格按行分组。每一组由表头、表格主体和尾注三部分组成。其中尾注部分是可选的。,表格的按行分组是通过使用表头行标签,、,表格主体标签,和尾注标签,来实现的。,6.5.1,表格的行分组,thead,/,tbody,/,tfoot,35,标签是成对标签,，首标签,和尾标签,之间的内容是一系列由表头标签标识的表头元素。我们,可以在,标签中规定表头行中所有表头元素的公共属性,。,标签拥有的属性以及属性对应的功能和,标签完全一样,。,6.5.1,表格的行分组,thead,/,tbody,/,tfoot,36,和,标签也是成对标签，其中,标签用于规定表格主体部分的共有特性,标签用于规定尾注的特性。,实践中，,标签很少使用。,6.5.1,表格的行分组,thead,/,tbody,/,tfoot,37,HTML,使用,标签来将表格按列分组,。基本语法设置如下：,标签有两个属性：,span,和,align,，,它们都是可选的。,span,属性的参数值为数字，表示该组包含的列数,。该属性的缺省值为,1,。,align,属性用以规定该组所跨列中所有单元格内容在水平方向上的位置。该属性的参数值为,left,、,center,和,right,之一，分别表示各单元格内容是左对齐、水平居中和右对齐的。,6.5.2,表格的列分组,colgroup,38,HTML,中的表格是可以同时,行分组,和,列分组,的，即我们可以在用行分组指定表格中某行或某几行公共属性的同时，又使用列分组指定某列或某几列的公共属性。,6.5.3,表格的行列分组,39,表格标题使用专门的标签,。,表格标题标签,是成对出现标签，,首标签,和尾标签,之间的内容就是表格的标题,，如果不想要标题，不加,标签就可以了。基本语法设置如下：,表格标题,6.6,设置表格的标题,40,应放在,标签里面，在表格的行标签,tr,之前。,有两个属性：,align,和,valign,，,它们都是可选的。,6.6,设置表格的标题,41,align,属性的参数值的为,left,、,center,和,right,之一，分别表示表格标题与表格的左沿对齐、位于表格中间和与表格的右沿对齐。缺省时，表格标题位于表格中间。,valign,属性的参数值为,top,和,bottom,之一，分别表示表格标题位于表格的上方和下方。缺省时，表格标题位于表格的上方。,6.6,设置表格的标题,42,表格运用的注意点,浏览器在读取网页,html,原代码时，是读完整一个,table,再将它显示出来,越复杂，嵌套层次越多的表格下载速度越慢,我们在设计页面表格的时应做到,:,整个页面不要都套在一个表格里，尽量拆分成多个表格,;,单一表格的结构尽量整齐；,表格嵌套层次尽量要少,.,本章结束,