网页设计课件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 26 valign属性可以控制表格中该行单元格内文字的垂直方向对齐方式 设置语法如下 其中 参数值为top middle和bottom之一 分别表示该行中各单元格内容是上对齐 垂直居中和下对齐的 valign属性的缺省值为middle 6 3 5设置行的文字垂直对齐方式valign 27 和标签都是用于规定单元格内容的 除了表头元素是以粗体显示这一点外 表头元素和具体数据元素几乎没有什么区别 和标签的所有属性及相应的属性功能是完全一样的 和标签的属性有bordercolor bgcolor background width align valign rowspan colspan 它们都是可选的 6 4单元格的控制 28 当bordercolor属性设置在或标签中时 将可控制表格内某单元格的边框颜色 此属性的设置语法如下 其中 取值为16进制的颜色代码 6 4 1设置单元格边框的颜色bordercolor 29 当bgcolor background属性使用在或标签时 可以控制表格中某单元格的背景颜色和背景图像 设置语法如下 或其中 的取值为16进制颜色代码 6 4 2设置单元格的背景颜色和背景图像 30 当width属性设置在或标签中时 可控制表格中某单元格的宽度 设置语法如下 此属性的参数值可以是数字或百分数 其中数字表示此单元格宽度所占的像素点数 百分数表示此单元格的宽度占整个表格宽度的百分比 6 4 3设置单元格的宽度width 31 在表格的使用中 有时会遇到某些数据占多行多列的情况 可以使用或标签中的colspan和rowspan属性来实现 设置语法如下 或rowspan属性的参数值是数字 表示该单元格所跨的行数 该属性的缺省值为1 colspan属性的参数值是数字 表示该单元格所跨的列数 该属性的缺省值也是1 6 4 4设置跨多行跨多列的单元格 32 可以在和标签中使用align和valign属性调整单元格中内容的左右 上下位置 align属性的设置语法如下 align属性用于规定单元格内容在水平方向上的位置 属性的参数值为left center和right之一 分别表示该单元格内容是左对齐 水平居中和右对齐的 缺省时 单元格内容是左对齐的 6 4 5设置单元格内文字的对齐方式 33 valign属性的设置语法如下 valign属性用于规定单元格内容在垂直方向上位置 属性的参数值为top middle和bottom之一 分别表示该单元格内容是上对齐 垂直居中和下对齐的 缺省时 单元格内容是垂直居中的 6 4 5设置单元格内文字的对齐方式 6 5表格的分组 35 HTML允许文档编辑者将表格按行分组 每一组由表头 表格主体和尾注三部分组成 其中尾注部分是可选的 表格的按行分组是通过使用表头行标签 表格主体标签和尾注标签来实现的 6 5 1表格的行分组thead tbody tfoot 36 标签是成对标签 首标签和尾标签之间的内容是一系列由表头标签标识的表头元素 我们可以在标签中规定表头行中所有表头元素的公共属性 标签拥有的属性以及属性对应的功能和标签完全一样 6 5 1表格的行分组thead tbody tfoot 37 和标签也是成对标签 其中标签用于规定表格主体部分的共有特性 标签用于规定尾注的特性 实践中 标签很少使用 6 5 1表格的行分组thead tbody tfoot 38 HTML使用标签来将表格按列分组 基本语法设置如下 标签有两个属性 span和align 它们都是可选的 span属性的参数值为数字 表示该组包含的列数 该属性的缺省值为1 align属性用以规定该组所跨列中所有单元格内容在水平方向上的位置 该属性的参数值为left center和right之一 分别表示各单元格内容是左对齐 水平居中和右对齐的 6 5 2表格的列分组colgroup 39 HTML中的表格是可以同时行分组和列分组的 即我们可以在用行分组指定表格中某行或某几行公共属性的同时 又使用列分组指定某列或某几列的公共属性 6 5 3表格的行列分组 40 表格标题使用专门的标签 表格标题标签是成对出现标签 首标签和尾标签之间的内容就是表格的标题 如果不想要标题 不加标签就可以了 基本语法设置如下 表格标题 6 6设置表格的标题 41 应放在标签里面 在表格的行标签tr之前 有两个属性 align和valign 它们都是可选的 6 6设置表格的标题 42 align属性的参数值的为left center和right之一 分别表示表格标题与表格的左沿对齐 位于表格中间和与表格的右沿对齐 缺省时 表格