第六章网页表格

1、本章内容本章内容6.1 6.1 表格概述表格概述6.2 6.2 表格的标题与表头表格的标题与表头6.3 6.3 表格的行与单元格表格的行与单元格6.4 6.4 页面实例页面实例利用表格进行排版利用表格进行排版6.1 表格概述表格概述6.1.1 6.1.1 表格语法表格语法6.1.2 6.1.2 表格属性表格属性6.1.3 6.1.3 表格结构表格结构6.1.4 6.1.4 表格嵌套表格嵌套表格作用表格作用表格是用于排列内容的表格是用于排列内容的最佳方式之一最佳方式之一，之前绝大多数的，之前绝大多数的HTML页面都页面都是使用表格进行排版的。是使用表格进行排版的。HTML表格是表格是由行和列构成

2、的栅格由行和列构成的栅格。这些行和列构成一个个单元，在。这些行和列构成一个个单元，在其中可以放置文本或图形。其中可以放置文本或图形。表格有两个作用：第一，可以用可读的格式显示复杂的数控，传统上，表格有两个作用：第一，可以用可读的格式显示复杂的数控，传统上，表格化的信息比段落描述更有效；第二，可以用表格把复杂设计元素表格化的信息比段落描述更有效；第二，可以用表格把复杂设计元素放进放进Web页面中。页面中。表格标签表格标签标签标签描述描述表格标签表格标签行标签行标签单元格标签单元格标签6.1.1 表格语法表格语法 定义表格定义表格定义行定义行定义单元格定义单元格定义表头定义表头练习练习：设计设计2

3、 2行行4 4列的表格（列的表格（基本表格基本表格.html.html）语法解释语法解释表格标签表格标签：标签用于标识一个表格组件。标签用于标识一个表格组件。一个表格组件，是由数个横行一个表格组件，是由数个横行、单元格、单元格所组成。所组成。表格行标签表格行标签：标签用于定义表格的一行。在一组标签用于定义表格的一行。在一组标签内可建立一行表格，也可以包含数组由标签内可建立一行表格，也可以包含数组由标签所定义的单元格。标签所定义的单元格。单元格标签单元格标签：标签用于定义表格的单元格，一组标签用于定义表格的单元格，一组标签将建立一个单元格。标签将建立一个单元格。使用使用标签时，必须将其放在标签时

4、，必须将其放在标标签内签内。表头单元格表头单元格标签标签 ，定义表格内的表头单元格。，定义表格内的表头单元格。 th 元素内元素内部的文本通常会呈现为居中的粗体文本，而部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左元素内的文本通常是左对齐的普通文本。对齐的普通文本。6.1.2 表格属性表格属性 一旦建立表格，就可以加入各种格式选项来改变其总体外观。通常一旦建立表格，就可以加入各种格式选项来改变其总体外观。通常来说，可以对表格加入以下一些选项。来说，可以对表格加入以下一些选项。加入边框。加入边框。加入背景颜色和图形加入背景颜色和图形调整单元格间隔和填充的程度。调整单元格间隔和

5、填充的程度。调整单元格对齐方式。调整单元格对齐方式。调整单元格尺寸。调整单元格尺寸。指定表格对齐方式。指定表格对齐方式。属性属性描述描述width宽度宽度height高度高度bgcolor背景颜色背景颜色background背景图片背景图片cellspacing单元格间距单元格间距cellpadding单元格边距单元格边距align排列方式排列方式frame边框样式边框样式rules内部边框样式内部边框样式border边框粗细边框粗细bordercolor边框颜色（边框颜色（IE）bordercolorlight亮边框颜色（亮边框颜色（IE）bordercolordark暗边框颜色（暗边框颜色

6、（IE）、边框、边框基本语法：基本语法：语法解释：边框是表格项目周围的直线，用于分开行、列和单元格。语法解释：边框是表格项目周围的直线，用于分开行、列和单元格。缺省情况下，大部分浏览器显示无边框表格，但有边框的表格更可读缺省情况下，大部分浏览器显示无边框表格，但有边框的表格更可读也更美观。通过也更美观。通过border属性可以属性可以定义边框线的宽度定义边框线的宽度，单位为像素。，单位为像素。2、边框颜色、边框颜色基本语法：基本语法：语法解释：语法解释：为表格设定不同的边框颜色为表格设定不同的边框颜色。定义颜色的时候，可以使用。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值。英文颜色名称

7、或十六进制颜色值。3、亮边框颜色、亮边框颜色基本语法：基本语法：语法解释：在语法解释：在表格中表格中可以单独定义可以单独定义左上边框左上边框的颜色，这两个位置的边的颜色，这两个位置的边框色称之为亮边框颜色。定义颜色的时候，可以使用英文颜色名称或框色称之为亮边框颜色。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。十六进制颜色值表现。4、暗边框颜色、暗边框颜色基本语法：基本语法：语法解释：在表格中也可以定义单元格中语法解释：在表格中也可以定义单元格中右下边框右下边框的颜色，这两个位的颜色，这两个位置的边框色称之为暗边框颜色。定义颜色的时候，可以使用英文颜色置的边框色称之为暗边框颜色。定

8、义颜色的时候，可以使用英文颜色名称或十六进制颜色值。名称或十六进制颜色值。5、宽度和高度、宽度和高度基本语法：基本语法：语法解释：通过语法解释：通过width属性定义表格的宽度属性定义表格的宽度，height属性定义表格的高属性定义表格的高度度，单位为像素或百分比单位为像素或百分比。如果是百分比，则可分为两种情况：如果。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比是相对于嵌套表格所在的单元格宽度。格，则百分比是相对于嵌套表格所在的单元格宽度。6、背景颜色、背景颜色基本语法

9、：基本语法： 语法解释：除了指定边框颜色外，还可以指定表格背景显示特定的颜语法解释：除了指定边框颜色外，还可以指定表格背景显示特定的颜色或图形。利用背景颜色和图形能改进表格外观，使表格显得更美观，色或图形。利用背景颜色和图形能改进表格外观，使表格显得更美观，如放置公司徽标和增加文本与图形颜色的对比度。通过如放置公司徽标和增加文本与图形颜色的对比度。通过bgcolor属性，属性，可以设定表格的背景颜色可以设定表格的背景颜色。定义颜色的时候，可以使用英文颜色名称。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。或十六进制颜色值表现。7、背景图片、背景图片基本语法：基本语法：语法解释：为表

10、格设置背景图像，可以使用任何的语法解释：为表格设置背景图像，可以使用任何的GIF或者或者JPEG格式格式图片文件。定义背景图像时，需要输入图片文件的完整路径或者相对图片文件。定义背景图像时，需要输入图片文件的完整路径或者相对路径。路径。表格背景图形是平铺的，即在屏幕上不断重复，直到填满整个表格背景图形是平铺的，即在屏幕上不断重复，直到填满整个表格表格。8、单元格间距、单元格间距基本语法：基本语法： 语法解释：表格的单元格之间，可以设定一定的间距，这样会语法解释：表格的单元格之间，可以设定一定的间距，这样会使表格使表格显得不过于紧凑显得不过于紧凑。单元格的间距以像素为单位。单元格的间距以像素为单

11、位。9、单元格边距、单元格边距基本语法：基本语法： 语法解释：设置单元格边距，指的是语法解释：设置单元格边距，指的是单元格内容和边框之间的距离单元格内容和边框之间的距离。单元格的边距以像素为单位。单元格的边距以像素为单位。10、表格排列、表格排列基本语法：基本语法： 语法解释：在水平方向上，可以设定表格的排列对齐方式，分别有居语法解释：在水平方向上，可以设定表格的排列对齐方式，分别有居左、居中和居右左、居中和居右3种。种。left为居左，为居左，center为居中，为居中，right为居右为居右。11、表格外边框的显示状态、表格外边框的显示状态基本语法：基本语法： 语法解释：使用语法解释：使用

12、frame属性可以控制表格属性可以控制表格外边框外边框的样式类型，取值表如下：的样式类型，取值表如下：值值描述描述值值描述描述box显示边框显示边框lhs显示左边框显示左边框void不显示边框不显示边框rhs显示右边框显示右边框above显示上边框显示上边框hsides显示上下边框显示上下边框below显示下边框显示下边框vsides显示左右边框显示左右边框12、表格内边框样式、表格内边框样式基本语法：基本语法：语法解释：通过语法解释：通过rules属性可以控制表格内部边框的样式。属性可以控制表格内部边框的样式。值值描述描述all显示所有的内部边框显示所有的内部边框cols仅显示列边框仅显示列

13、边框groups显示介于行列间的边框显示介于行列间的边框none不显示内部边框不显示内部边框rows仅显示行边框仅显示行边框表格属性表格属性.htm6.1.3表格结构表格结构为了在源代码中清楚地为了在源代码中清楚地区分表格结构区分表格结构，HTML语言中规定了语言中规定了，三个标签，分别对应于表格的三个标签，分别对应于表格的表首表首、表主体表主体和和表尾表尾。这种划分方式称为：这种划分方式称为：行分组行分组1、表格表首、表格表首基本语法：基本语法： 语法解释：语法解释：align代表水平对齐，其中代表水平对齐，其中left为居左，为居左，center为居中，为居中，right为为居右。居右。v

14、align代表垂直对齐代表垂直对齐，其中，其中top为居上，为居上，middle为居中，为居中，bottom为为居下。居下。2、表格表主体、表格表主体基本语法：基本语法： 语法解释：语法解释：align代表水平对齐，其中代表水平对齐，其中left为居左，为居左，center为居中，为居中，right为居右。为居右。valign代表垂直对齐，其中代表垂直对齐，其中top为居上，为居上，middle为居中，为居中，bottom为居下。为居下。3、表格表尾、表格表尾基本语法：基本语法： 语法解释：语法解释：align代表水平对齐，其中代表水平对齐，其中left为居左，为居左，center为居中，为居

15、中，right为居右。为居右。Valign代表垂直对齐，其中代表垂直对齐，其中top为居上，为居上，middle为居中，为居中，bottom为居下。为居下。4 、表格、表格列分组列分组标签标签实现表格实现表格列分组列分组，为单标签。，为单标签。语法格式：语法格式： 语法解释：语法解释： span定义该组控制的列数，默认值为定义该组控制的列数，默认值为1； align定义改组定义改组文字的对齐方式。文字的对齐方式。6.1.4表格嵌套表格嵌套表格嵌套表格嵌套.html6.2 表格的标题与表头表格的标题与表头6.2.1 6.2.1 表格标题表格标题6.2.2 6.2.2 表格表头表格表头6.2.1

16、表格标题表格标题标题是表格的说明性文字，标题是表格的说明性文字，通常出现在表格上方通常出现在表格上方，其用途有，其用途有:（1）总结表格内容。）总结表格内容。（2）提供表格内容的简明信息。）提供表格内容的简明信息。通过通过标签可以直接添加表格的标题，而且还可以控制标题文字的排标签可以直接添加表格的标题，而且还可以控制标题文字的排列属性。列属性。基本语法：基本语法：语法解释：语法解释：align属性设定标题文字的水平对齐方式，其中属性设定标题文字的水平对齐方式，其中left为居左，为居左，center为居中，为居中，right为居右。表格的标题可以为居右。表格的标题可以放在表格的上方或者下放在表

17、格的上方或者下方方，这可以通过，这可以通过valign属性进行调整。默认的表格标题放在表格上方。属性进行调整。默认的表格标题放在表格上方。Top为居上，为居上，bottom为居底。为居底。6.2.2 表格表头表格表头表格表头是通常指表格的第一行，其中的文字可以实现居中并且加粗表格表头是通常指表格的第一行，其中的文字可以实现居中并且加粗显示，标签为：显示，标签为：。基本语法：基本语法： 语法解释：使用语法解释：使用标签替代标签替代标签，唯一不同就是标签中的标签，唯一不同就是标签中的内容内容居中加粗显示居中加粗显示。6.3 表格的行与单元格表格的行与单元格6.3.1 6.3.1 表格的行表格的行6

18、.3.2 6.3.2 表格的单元格表格的单元格6.3.1 表格的行表格的行表格的行标签为表格的行标签为，标签的属性和标签的属性和标签的属性非常相似，标签的属性非常相似，主要用于设定表格中某一行的属性，如下表所示：主要用于设定表格中某一行的属性，如下表所示：属性属性描述描述align整整行内容的水平对齐，行内容的水平对齐， left/center/rightvalign整行内容的垂直对齐，整行内容的垂直对齐， top/middle/bottombgcolor整整行的背景颜色行的背景颜色bordercolor整整行的边框颜色行的边框颜色bordercolorlight行的亮边框颜色行的亮边框颜色（右、下）（右、下）bordercolordark行的暗边框颜色行的暗边框颜色（左、上）（左、上）6.3.2 表格的单元格表格的单元格标签的属性和标签的属性和标签的属性也非常相似，主要用于设定表格中某一标签的属性也非常相似，主要用于设定表格中某一单元格的属性单元格的属性,如下表所示：如下表所示：属性属性描述描述align单元格内容的水平对齐单元格内容的水平对齐valign单元格内容的垂直对齐单元格内容的垂直对齐bgcolor单元格的背景颜色单元格的背景颜色background单元格的背景图像单元格的背景图像属性属性描述描述bordercolor单元格的