2022年HTML相关知识点表格标签.pptx

,计算机多媒体技术专业,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,计算机应用系,网页样式制作,子项目,数字媒体专业群教学资源库项目组,网页样式制作,表格,标签,表格,定义,表格的基本语法,表格,的定义,表格,行的控制,单元格,的控制,上一页,下一页,目 录,结 束,本 节,表格,的定义,设置表格边框的尺寸,设置表格边框的颜色,设置表格的尺寸,设置表格的位置,设置表格的背景颜色或背景图像,设置格框线的宽度,设置格框与内容的空隙,设置表格边框的显示状态,6.2.9,设置分隔线的显示状态,上一页,下一页,目 录,结 束,本 节,设置单元格边框的颜色,设置单元格的背景颜色和背景图像,设置单元格的宽度,设置跨多行跨多列的单元格,设置单元格内文字的对齐方式,单元格,的控制,上一页,下一页,目 录,结 束,本 节,表格的行分组,thead/tbody/tfoot,表格的列分组,colgroup,表格的行列分组,表格,的分组,上一页,下一页,目 录,结 束,本 节,定义,表格的基本语法,在,HTML,中，表格的建立将运用,、,、,、,四个标签完成。下面是这四个标签的说明：,定义表格标签,：,标签用于定义一个表格元素，一个表格元素，是由数个横行（,）、单元格（,）与表头单元格（,）子元素所组成。,定义表头标签,：,标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。在一个表格的定义语法中也可以不使用,标签，定义表头单元格。,上一页,下一页,目 录,结 束,本 节,例：一个简单的表格实例，效果如下图所示。,文件的源代码：,一个简单的表格,姓名,性别,年龄,专业,张东健,上一页,下一页,目 录,结 束,本 节,男,18,计算机,上一页,下一页,目 录,结 束,本 节,是用于定义一个表格元素的标签。,标签的属性主要有,border,、,bordercolor,、,bordercolorlight,、,bordercolordark,、,width,、,height,、,align,、,bgcolor,、,background,、,cellapacing,、,cellpadding,、,frame,和,rules,，它们都是可选的。,表格,的定义,上一页,下一页,目 录,结 束,本 节,设置边框尺寸的语法如下：,border,属性的参数值是数字，表示表格边框宽度所占的像素点数。例如，,表示表格的边框宽度为,10,个像素点。,设置,表格边框的尺寸,border,上一页,下一页,目 录,结 束,本 节,通过设置表格边框的颜色，能达到较好的视觉效果。但是同样需要指出的是，一些低版本的浏览器并不支持表格的背景颜色和背景图像，在实际制作网页时，应该尽可能多地用各种浏览器对制作的网页进行测试。,设置表格边框颜色的基本语法如下：,设置表格边框颜色的亮度的基本语法如下：,其中，“,#”,取值为,16,进制的颜色代码，参见表颜色代码表。,设置,表格边框的颜色,上一页,下一页,目 录,结 束,本 节,6.2.3,设置表格的尺寸,width/height,设置表格尺寸的语法如下：,width,和,height,属性的作用是指定表格的大小。其中,width,属性用以规定表格的宽度，,height,属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数，其中数字表示表格宽度（高度）所占的像素点数，百分数表示表格的宽度（高度）占浏览器窗口宽度（高度）的百分比。例：,表示该表格的宽度为,200,个像素点，高度为浏览器窗口高度的,50%,。,上一页,下一页,目 录,结 束,本 节,设置表格的位置的基本语法如下：,align,属性的参数值为,left,、,center,和,right,之一，分别 表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。,设置,表格的位置,align,上一页,下一页,目 录,结 束,本 节,设置,表格的背景颜色或背景图像,设置表格的背景颜色或背景图像的基本语法如下：,其中，“,#”,取值为,16,进制的颜色代码，参见表颜色代码表。,上一页,下一页,目 录,结 束,本 节,设置,格框线的宽度,cellspacing,设置格框线宽度的语法如下：,在格与格之间有间隔线，称其为格框线。使用,cellspacing,属性可以指定格框线的宽度。,该属性的参数值取像素值，默认值为,2,。加宽了格框线，表格会变得大一些。,上一页,下一页,目 录,结 束,本 节,表格的边框有,4,个：左边框、右边框、上边框、下边框。这四个边框都可以设置为显示或者隐藏。,设置表格边框显示状态的基本语法如下：,显示整个表格边框,不显示表格边框,只显示表格的上下边框,只显示表格的左右边框,只显示表格的上边框,只显示表格的下边框,只显示表格的左边框,只显示表格的右边框,6.2.8,设置表格边框的显示状态,frame,上一页,下一页,目 录,结 束,本 节,设置,分隔线的显示状态,rules,表格中分隔线的显示同样可以进行各种设置，各种效果如图所示。,设置表格中分隔线的显示状态的基本语法如下：,显示所有分隔线,只显示组与组的分隔线,只显示行与行的分隔线,只显示列与列的分隔线,所有分隔线都不显示,上一页,下一页,目 录,结 束,本 节,上一页,下一页,目 录,结 束,本 节,表格,行的控制,HTML,中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相应对。,标签有,height,、,bordercolor,、,bgcolor,、,align,和,valign,属性，它们都是可选的。,上一页,下一页,目 录,结 束,本 节,当,height,属性设置在,标签中时，可控制表格内某行的高度，此属性的设置语法如下：,数值的设置值为一整数，其单位为像素（,Pixel,）。,设置,行的高度,height,上一页,下一页,目 录,结 束,本 节,当,bordercolor,属性设置在,标签中时，将用于控制表格某行内边框颜色，此属性的设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,设置,行内框的颜色,bordercolor,上一页,下一页,目 录,结 束,本 节,当将,bgcolor,属性使用在,标签里时，可以控制表格中该行单元格的背景颜色，设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码，参见表颜色代码表。,设置,行的背景颜色,bgcolor,当将bgcolor属性使用在标签里时，可以控制表格中该行单元格的背景颜色，设置语法如下：,设置表格边框的尺寸border,这两个属性的参数值可以是数字或百分数，其中数字表示表格宽度（高度）所占的像素点数，百分数表示表格的宽度（高度）占浏览器窗口宽度（高度）的百分比。,例如，表示表格的边框宽度为10个像素点。,标签有height、bordercolor、bgcolor、align和valign属性，它们都是可选的。,其中，“#”取值为16进制的颜色代码，参见表颜色代码表。,年龄,设置表格的背景颜色或背景图像,定义表头标签：标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。,例：表示该表格的宽度为200个像素点，高度为浏览器窗口高度的50%。,上一页,下一页,目 录,结 束,本 节,当将,align,属性使用在,标签里时，可以控制表格中该行单元格内文字的水平对齐方式，设置语法如下：,其中，参数值为,left,、,center,、,right,之一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。,align,属性的缺省值为,left,。,6.3.4,设置行的文字水平对齐方式,align,上一页,下一页,目 录,结 束,本 节,当将,valign,属性使用在,标签里时，可以控制表格中该行单元格内文字的垂直方向对齐方式，设置语法如下：,其中，参数值为,top,、,middle,和,bottom,之一，分别表示该行中各单元格内容是上对齐、垂直居中和下对齐的。,valign,属性的缺省值为,middle,。,设置,行的文字垂直对齐方式,valign,上一页,下一页,目 录,结 束,本 节,和,标签都是用于规定单元格内容的。表头标签,用于规定表头元素的内容，表头元素一般位于每列的首行，用以说明该列的具体数据是关于哪个对象的。,标签是成对出现标签，首标签,和尾标签,之间的内容就是位于该单元格的表头元素内容。数据标签,也是成对出现标签，首标签,和尾标签,之间的内容就是该单元格中的具体数据。除了表头元素是以粗体显示这一点外，表头元素和具体数据元素几乎没有什么区别。由于都是用于规定单元格内容的，,和,标签的所有属性及相应的属性功能是完全一样的。,和,标签的属性有,bordercolor,、,bgcolor,、,background,、,width,、,align,、,valign,、,rowspan,、,colspan,，它们都是可选的。,单元格,的控制,上一页,下一页,目 录,结 束,本 节,当,bordercolor,属性设置在,或,标签中时，将可控制表格内某单元格的边框颜色，此属性的设置语法如下：,其中，“,#”,取值为,16,进制的颜色代码。,设置,单元格边框的颜色,bordercolor,上一页,下一页,目 录,结 束,本 节,当,bgcolor/background,属性使用在,或,标签时，可以控制表格中某单元格的背景颜色和背景图像，设置语法如下：,或,其中“,#”,的取值为,16,进制颜色代码。,设置,单元格的背景颜色和背景图像,上一页,下一页,目 录,结 束,本 节,当,width,属性设置在,或,标签中时，可控制表格中,某单元格的宽度，设置语法如下：,此属性的参数值可以是,数字或百分数，其中数字表示此单元格宽度所占的像素点数，百分数表示此单元格的宽度占整个表格宽度的百分比。,设置,单元格的宽度,width,上一页,下一页,目 录,结 束,本 节,在表格的使用中，有时会遇到某些数据占多行多列的情况，为了保证表格的正确，必须对表格进行相应的调整。对于这种情况，可以使用,或,标签中的,colspan,和,rowspan,属性来解决。设置语法如下：,或,rowspan,属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为,1,。,colspan,属性的参数值是数字，表示该单元格所跨的列数。该属性的缺省值也是,1,。,设置,跨多行跨多列的单元格,上一页,下一页,目 录,结 束,本 节,做好一个表格后，有时希望根据数据的不同情况，调整它们在单元格中的位置，以得到满意的显示效果。这时可以在,和,标签中使用,align,和,valign,属性。,align,属性的设置语法如下：,align,属性用于规定单元格内容在水平方向上的位置。属性的参数值为,left,、,center,和,right,之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对齐的。,设置,单元格内文字的对齐方式,上一页,下一页,目 录,结 束,本 节,valign,属性的设置语法如下：,valign,属性用于规定单元格内容在垂直方向上位置。属性的参数值为,top,、,middle,和,bottom,之一，分别表示该单元格内容是上对齐、垂直居中和下对齐的。缺省时，单元格内容是垂直居中的。,Thank You!,