《网页设计第8章》由会员分享，可在线阅读，更多相关《网页设计第8章（21页珍藏版）》请在金锄头文库上搜索。
1、第8章 表格,主要内容： 表格的构成 设置表格背景 设置表格表头 设置表格大小 设置表格数据对齐方式 cellspancing与cellpadding属性 frame与rules属性 横跨行和列 添加表格高级标签 使用表格进行网页布局,8.1 表格简介,表格在网站开发中应用广泛，几乎多有的HTML页面或多或少地采用了表格。表格可以灵活地控制页面的排版，使整个页面层次清晰。学好网页制作，熟练掌握表格的各种属性是很有必要的。,表格标记,基本标签 : table定义一个表格 tr定义表格中的行 td定义表格中的数据基本语法： ,表格边框,可以使用table标签的border属性为表格添加边框并设置表
2、格边框宽度，表格的边框按照数据单元将表格分割成单元格，边框的宽度以像素为单位。 可以通过bordercolor属性为边框添加颜色，其颜色值可以是rgb(x,x,x)、16进制颜色值或代表颜色值的颜色名称。,表格表头,表头是指表格的第一行或第一列对该列或该行的表格内容进行说明。表头的文字样式为居中、加粗显示，通过标签实现。基本语法： ,8.2 表格背景,表格可以添加背景颜色和背景图片，使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差。否则，将不容易分辩表格中的文本数据。,设置表格背景,可以使用bgcolor属性设置表格的背景颜色，其值可以是rgb(x,
3、x,x)、#xxxxxx或颜色名（colorname）。例如：或 ,设置表格单元背景,可以通过bgcolor属性和background属性为表格中的单元格添加背景颜色或背景图片。,8.3 表格大小,设置表格大小： 如果需要表格在网页中占用适当的空间，可以通过width和height属性指定像素值来设置表格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小。方法如下：设置单元格大小： width属性和height属性不但可以设置表格的大小，还可以设置表格单元格的大小，为表格单元设置width属性或height，将影响整行或整列单元的大小。例如：汽车名称 价格范围 级别 ,8.4
4、 对齐方式,表格的对齐方式包括： 行数据水平对齐 单元格数据水平对齐 行数据垂直对齐 单元格数据垂直对齐 align属性和valign属性混合使用,设置表格对齐方式,使用align属性设置表格在网页中的对齐方式，在默认的情况下表格的对齐方式为左对齐。 设置方法为：这里 align的值为left、center、right。将表格的对齐方式设置成右对齐，则表格的右边框自动地向浏览器右边框对齐。,设置表格数据对齐方式,1行数据水平对齐 使用align可以设置表格中数据的水平对齐方式，如果在标签中使用align属性，将影响整行数据单元的水平对齐方式。align属性的值可以是left、center、ri
5、ght，它的默认值为left。2单元格数据水平对齐 如果在某个标签中使用align属性，那么align属性将影响一个表格单元数据水平对齐方式。3行数据垂直对齐 如果在标签中使用valign属性，那么valign属性将影响整行数据单元的垂直对齐方式，这里的valign值可以是top、middle、bottom、baseline。它的默认值是middle。,设置表格数据对齐方式,4单元格数据垂直对齐 如果在某个标签中使用valign属性，那么valign只影响当前表格单元数据垂直对齐方式。5align属性和valign属性混合使用 align属性和valign属性除了上述用法外，有时在格式化表格单
6、元数据时需要align属性和valign属性混合使用。,8.5 表格单元格的边距,改变表格单元格间距离和单元格内的数据填充距离可以通过table标签的cellspancing与cellpadding属性实现。 cellspancing属性用来添加表格单元格之间的间距（以像素为单位或表格宽度百分比）。 cellpadding属性用来添加表格单元格内数据填充间距（以像素为单位或表格宽度百分比）。,8.6 frame与rules属性,用border属性设置表格边框，会影响整个表格效果，它只是对表格周围的框架宽度起作用。对于不同行的间隔，可以通过frame（设置表格单元的边框）和数据单元格周围的边框（
7、rules）来设定。,frame属性,可以具体指定frame属性显示哪条表格外边框，例如，可以设定表格的上边框和下边框或不显示边框。标准的frame属性值包括：void（将表格设置成无边框）、above（设置表格的上边框）、below（设置表格的下边框）、lhs（设置表格的左边框）、rhs（设置表格的右边框）、hsides（设置表格横向边框）、vsides（设置表格纵向边框）、box（表格边框默认值）和border（普通的表格边框）。,rules属性,使用rules属性可以控制表格内部单元格的宽度，rules的值包括：all（默认值）、cols、（设置列间边框）、rows（设置行间边框）、no
8、ne（无内边框）、groups（列组和行组边框，其中列组由thead、tbody、tfoot、colgroup定义）。,8.7 横跨行和列,横跨列是指一个表格单元格横跨多列；横跨行是指一个表格单元格横跨多个行。表格横跨行和列属性，有时横跨行和列又称为合并单元格。表格横跨行和列属性： colspan=“”指明该单元格应有多少列的跨度，在th和td标签中使用。 rowspan=“”指明该单元格应有多少行的跨度，在th和td标签中使用。,8.8 添加表格标题,标题通常是放在表格的正上方，添加标题的作用有两个，一个是对表格内容总结；另一个则是使阅读者对表格内容一目了然。 使用caption标签可为每个
9、表格指定唯一的标题。一般情况下标题会出现在表格的上方，caption标签的align属性可以用来定义表格标题的对齐方式。在HTML标准中规定，caption标签要放在打开的table标签之后，且网页中的表格标题不能多于一个。例如：产品列表汽车名称价格范围 ,8.9 表格的高级标签,使用表格的高级标签可以为表格中相似的区域添加边界，在表格标题上添加行或文本格式信息，定义表格的脚标等。 表格的高级标签如下： thead定义表格的标题区域。 tbody定义表格的主题区域。 tfoot定义表格的脚标区域。 colgroup定义表格的列组。 col为表格中的一个或多个列定义属性值。只能在表格或colgroup里使用这个元素。,8.10 使用表格进行网页布局,使用个非HTML时一常普遍的应用就是用HTML表格功能给网页进行布局。下图就是利用HTML表格对网页进行布局的效果，此布局定义了两个表格，上下各一个表格，将这两个表格的border值设置为0。如果将border值设置为1，则很容易看出此页面的表格布局。,
