第7章++表格元素.ppt

1、第7章 表格元素,在制作页面的过程中，会用到各种表格来对页面进行排版，。如何把表格美观、实用的放在要制作的页面中呢？本章将讲解表格元素及其相关元素的属性和应用。通过本章的学习，主要掌握以下几点： 重点掌握表格元素各种属性的特点和用法。 能够按照页面的要求制作表格。 掌握变革的边界属性的各个特点。 通过本章学习能熟练制作表格。,7.1 表格元素的结构,与其他元素不同，在表格中一般通过3个标记来构建，分别是表格标记、行标记和单元格标记。其中表格标记是和，表格的其他各种属性都要在表格的开始标记和表格的结束标记之间才有效。,7.1.1 表格 ,表格元素用来在页面中定义一个表格。但是元素并不能单独的定义

2、一个完整的表格，而是必须要在其中使用元素以及其他的元素，才能共同构成一个完整的表格。,7.1.2 行 ,从例程7-1中已经知道用行元素用来定义表格的行，并且元素中也要包含其他的元素，如元素、元素等，这样才能共同构成一个完整的表格。,7.1.3 单元格 ,我们用单元格元素用来定义表格的单元格。单元格的含义就是表格中最小的表格单元，也就是几行几列的表格中的一个单独的格子。同样元素不能单独使用，也要元素、元素等，共同构成一个完整的表格。,7.2 元素的属性,通过第一节的学习，我们已经对表格有了初步的认识，在这一节中，我们将详细讲解关于元素的各种相关属性。,7.2.1 边框属性 border,在上街的

3、学习中，我们讲解的表格元素的时候，大家已经注意到页面中并看不到边框，在制作过程中，我们用边框属性border来定义表格元素的边框宽度。如果单元格中没有定义其他的边框属性，则单元格，将使用1像素的边框属性值。,7.2.2 水平对齐属性 align,在制作页面的过程中，我们用水平对齐属性align来定义表格的对齐方式。根据实际情况来调整表格在页面中的位置，align语法结构如下所示。,7.2.3 高度属性 height,页面制作的时候，我们还需要调整表格的高度。在HTML中，我们用高度属性height来定义表格的高度。如果单元格中没有定义自身的高度属性，则单元格将根据自身含有的内容自动调整高度，适

4、应元素的高度。,7.2.4 宽度属性 width,表格的宽度也是页面制作的一个重要内容，在HTML中，我们用宽度属性width来定义表格的宽度。如果单元格中没有定义自身的宽度属性，则单元格会根据自身含有的内容自动调整宽度来适应元素的宽度。,7.2.5 边框颜色属性 bordercolor,为了使表格在页面美观，我们用边框颜色属性bordercolor来定义表格边框的颜色。,7.2.6 边框暗边线属性 bordercolordark,我们先来了解一下什么是边框暗边线属性，在元素中边框暗边线是指表格的右侧和底部的边线，我们用边框暗边线属性bordercolordark用来定义表格边框暗边线的颜色。

5、,7.2.7 边框亮边线属性 bordercolorlight,元素中边框亮边线，是指表格的左侧和顶部的边线，我们用边框亮边线属性bordercolorlight来定义表格边框亮边线的颜色。,7.2.8 背景颜色属性 bgcolor,为了突出显示表格，还可以为表格设置与页面不同的背景。通常用背景颜色属性bgcolor来定义表格的背景颜色。,7.2.9 背景图片属性 background,通常我们用背景图片属性background来定义表格使用的背景图片。如果单元格中没有定义自身的背景颜色属性或者图片属性，则单元格将显示元素中定义的背景图片。,7.2.10 单元格间距属性 cellspacing

6、,在HTML中，通常用单元格间距属性cellspacing来定义各个单元格之间的间距。使用cellspacing属性定义单元格之间间距的同时，也使单元格和元素之间分隔了一定距离。,7.2.11 单元格补白属性 cellspadding,在默认情况下，表格内的文字会紧贴着表格的边框，这样看上去非常拥挤。可以使用单元格补白属性cellspadding来调整各个单元格与其中的内容之间的间距。,7.2.12 表格单元格边框属性 rules,有时候我们需要根据页面的实际需要定义单元格之间的边框，在HTML中我们通常用表格单元格边框属性rules来在表格中定义单元格之间的边框，也可以定义列、行或者列组等元

7、素的边框。,7.2.13 表格边框属性 frame,表格边框属性frame，用来定义表格边框的显示方式，通过frame属性可以定义表格的四个边框是否显示，或者定义某一侧的边框显示与否。,7.3 元素的属性,前面我们学习了元素的属性，接下来，我们将学习元素的相关属性。,7.3.1 水平对齐属性 align,在HTML中通常用水平对齐属性align来定义行所包含的单元格内容的水平对齐方式。语法结构如下所示。,7.3.2 垂直对齐属性 valign,在制作表格的时候，也可以把单独的一行设置成特殊对齐方式。在HTML中通常用垂直对齐属性valign来定义行所包含的单元格内容的垂直对齐方式。,7.3.3

8、 背景颜色属性 bgcolor,在HTML中通常用背景颜色属性bgcolor来定义行的背景颜色。,7.3.4 边框颜色属性 bordercolor,在HTML中通常用边框颜色属性bordercolor来定义行内单元格的边框颜色。,7.3.5 边框暗边线属性 bordercolordark,在HTML中通常用边框暗边线属性bordercolordark来定义行内单元格的边框暗边线颜色。元素中的边框暗边线指的是，行内单元格的左侧边线和顶部边线。,7.3.6 边框亮边线属性 bordercolorlight,同样的也可以用边框暗边线属性bordercolorlight来定义行内单元格的边框亮边线颜色

9、。元素中的边框暗边线指的是，行内单元格的右侧边线和底部边线。,7.4 元素的属性,本节将学习单元格的标记，单元格的标记与行标记十分相似，学习的时候可以对照前一节来加深对单元格的理解。,7.4.1 宽度属性 width,HTML中也用宽度属性width来定义单元格的宽度。,7.4.2 高度属性 height,HTML中用高度属性height来定义单元格的高度。,7.4.3 背景颜色属性 bgcolor,为了增加表格的绚丽，可以为不同的单元格分别设置不同的背景颜色。在HTML中也可以背景颜色属性bgcolor来定义单元格的背景颜色。,7.4.4 背景图片属性 background,HTML中通常用

10、背景图片属性background来定义单元格使用的背景图片，在元素中定义的背景图片，将覆盖元素中定义的背景颜色或者背景图片，也将覆盖元素中定义的背景颜色。,7.4.5 水平对齐属性 align,在HTML中，通常用水平对齐属性align来定义单元格内容的水平对齐方式。,7.4.6 垂直对齐属性 valign,在HTML中，通常用垂直对齐属性valign，用来定义单元格内容的垂直对齐方式。,7.4.7 边框属性 bordercolor,HTML中也可以用边框属性bordercolor用来定义单元格的边框颜色。,7.4.8 合并列属性 colspan,合并列属性colspan，用来将某一行的几个单

11、元格合并成一个。,7.4.9 合并行属性 rowspan,单元格除了可以在水平方向下跨列，还可在垂直方向上跨行。HTML中通常用合并行属性rowspan，来将某一列的几个单元格合并成一个。注意rowspan设置的是单元格在垂直方向上跨行的个数。也可以说是单元格向下打通的单元格个数。,7.4.10 同行显示属性 nowrap,当表格没有设定宽度的时候，整个表的宽度会根据表格内容进行调整，但表格的宽度不会超出浏览器的宽度。当单元格内的内容过长的时候会自动换行，如果不希望表格的某个单元格的内容换行，可以通过同行显示属性nowrap来使单元格中的文本同行显示。只有当文本中出现换行元素，或者其他默认换行的元素时文本内容才能换行显示。,7.5 表格中使用的其他元素,表格中除了使用元素和元素以外，还可以使用其他的元素，其中包括、等。下面将逐一详细讲解。,7.5.1 表格标题元素 ,在制作表格时，可以用表格标题元素来定义表格的标题。元素中定义的表格标题内容，将显示在表格的顶部（表格边框的外部）。,7.5.2 表格头部元素 ,表格头部元素，用来定义表格的表头。元素和元素类似，只是使用元素的文本内容会加粗显示，同时默认为中间对齐。,7.5.