《第6章 使用表格》由会员分享，可在线阅读，更多相关《第6章 使用表格（40页珍藏版）》请在金锄头文库上搜索。
1、教学内容：表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。,第6章 使用表格,教学重点 掌握创建表格 掌握设置表格基本属性 掌握设置表格的边框 掌握设置表格背景 掌握设置表格的行属性 掌握调整单元格属性,6.1 创建表格,表格是网页排版布局不可缺少的一个工具，能否熟练地运用表格将直接影响到网页设计的好坏。下面就讲述表格的创建 。,表格由行、列和单元格3部分组成，一般通过3个标记来创
2、建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记和表格的结束标记之间才有效。,6.1.1 表格的基本构成table、tr、td,可以使用来设置标题单元格，表格的标题一般位于整个表格的第1行。一个表格只能含有一个表格标题。,6.1.2 设置表格的标题caption,表格的表头是单元格的一种变体，实质上仍是一种单元格。它一般位于第一行和第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示元素中的内容。,6.1.3 表头th,为了使所创建的表格更加美观、醒目，需要对表格的属性进行设置，主要包括表格的宽度、高度和对齐方式等。,6
3、.2 表格基本属性,6.2.1 表格宽度width,可以使用表格的width属性来设置表格的宽度。如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。,6.2.2 表格高度height,可以使用表格的height属性来设置表格的高度。,6.2.3 表格对齐方式align,可以使用表格的align属性来设置表格的对齐方式。,表格的边框可以很粗、也可以很细，可以使用border属性来设置表格的边框效果，包括边框的宽度、边框的颜色等。,6.3 表格的边框,6.3.1 表格边框宽度border,默认情况下如果不指定border属性，则浏览器将不显示表格边框。,默认情况下边框的颜色是灰色的，可
4、以使用bordercolor设置边框颜色。但是设置边框颜色的前提是边框的宽度不能为0，否则无法显示出边框的颜色。,6.3.2 表格边框颜色bordercolor,6.3.3 内框宽度cellspacing,表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。,在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去非常拥挤。可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离。,6.3.4 表格内文字与边框间距cellpadding,还可以为表格设置不同的背景来美化表格，包括表格的背景颜色和背景图像的设置 。,6.4 表格背景,6.4.1 表格背
5、景颜色bgcolor,表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。,6.4.2 表格背景图像,除了可以为表格设置背景颜色之外，还可以为表格设置更加美观的背景图像。,不仅可以对表格整体设置相关属性，还可以对单独的一行单元格设置相关属性。下面就介绍行的高度、行的边框颜色、行的背景和行里内容的对齐方式设置等。,6.5 表格的行属性,6.5.1 高度控制height,使用height可以设置行的高度。,6.5.2 边框颜色bordercolor,可以使用bordercolor属性设置行的边框颜色。,6.5.3 行背景bgcolor
6、、background,行的bgcolor或background属性仅作用于当前行。这里设置的bgcolor颜色可以覆盖的bgcolor或background属性，不过会被单元格定义的背景颜色所覆盖。,6.5.4 行文字的水平对齐方式align,的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖。,6.5.5 行文字的垂直对齐方式valign,的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有3种，分别是top、middle和bottom。,单元格是表格中最基本的单位。单元格全部包含在行中，一个行里面可以有任意多个
7、单元格。可以自定义设置单元格的各项属性，这些样式将覆盖和已经定义的样式。,6.6 单元格属性,6.6.1 单元格大小width、height,默认情况下，单元格的宽度和高度会根据内容自动调整，也可以通过width、height设置单元格的宽度和高度。,6.6.2 水平跨度colspan,在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格。,单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。,6.6.3 垂直跨度rowspan,6.6.4 对齐方式align、valign,单元格的对齐方式设置与行的对齐方式设置方法相似。,6.6.5 单元格的背景颜色,为了增加表格的美观性，可以为
8、单元格设置不同的背景颜色。,单元格的边框颜色可以通过bordercolor来设置。,6.6.6 单元格的边框颜色bordercolor,6.6.7 单元格的亮边框bordercolorlight,单元格的亮边框就是单元格边框向光的部分。通过bordercolorlight可以设置单元格亮边框的颜色。,6.6.8 单元格的暗边框bordercolordark,单元格的暗边框就是单元格边框背光的部分。通过bordercolordark可以设置单元格暗边框的颜色。,6.6.9 单元格的背景图像background,单元格也可以有背景图像，通过background可以设置单元格的背景图像。,还有一些标
9、记是用来表示表格结构的，包括表首标记、表主体标记以及表尾标记。这些通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。,6.7 表格的结构,6.7.1 表格的表首标记,表首样式的开始标记是，结束标记是。它们用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。,6.7.2 表格的表主体标记,与表首样式的标记功能类似，表主体样式用于统一设计表主体部分的样式，标记为。,6.7.3 表格的表尾标记,标记用于定义表尾样式。,6.8经典习题,1. 填空题 （1）表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记_、行标记_和单元格标记_。表格的各种属性都要在表格的开始标记和表格的结束标记之间才有效。 （2）表格的边框可以很粗也可以很细，可以使用_属性来设置表格的边框效果，包括边框的宽度、边框的颜色等。,2. 上机操作题,制作一个如图6.36所示的表格 。,
