《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第4章 表格》由会员分享，可在线阅读，更多相关《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第4章 表格（26页珍藏版）》请在金锄头文库上搜索。
1、第4章 表格,在文档处理中，表格是一种很常用的表现手法。在HTML中的表格除了用来对齐数据之外，更多地用来进行页面排版。无论是普通的HTML页面还是动态网站都需要使用表格来进行页面的布局。,4.1 创建表格,表格的开始元素是，结束元素是。所有的表格内容都位于这两个元素之间。要创建一个完整的表格，除了包含表格元素外，还要有行元素和单元格元素。可以说，在页面中如果要创建一个完整的表格，至少要包含这3个元素。创建表格的具体语法是： 表格的内容 ,4.2 表格属性,默认情况下，表格只是作为布局的手段，因此不会在页面中显示出来。但有时候，将表格显示出来并设置一定的效果，能使页面内容更加协调。,4.2.1
2、 表格宽度,默认情况下，表格的宽度是以内容为标准的。如果要设置表格的宽度为某一特定值，而与其中的内容无关时，则可以使用WIDTH属性，其语法如下： 表格的内容 ,4.2.2 表格高度,除了可以为表格指定宽度之外，还可以为表格指定高度。通常表格的高度都是由表格的行数及单元格里的内容决定，在为表格指明高度之后，如果表格的行数与单元格里的内容使表格的高度高于指定的高度，则浏览器将以实际的高度显示表格，如果实际高度低于指定高度，则浏览器以指定高度显示表格。元素里的HEIGHT属性值可以用来指定表格的高度，其语法如下： 表格的内容 ,4.2.3 表格背景图片,通过元素中的BACKGROUND属性，可以为
3、表格指定一个背景图片。这种方法有点类似为网页指定背景图片。如果背景图片小于表格大小，则会平铺该背景图片以充满整个表；如果背景图片大于表格大小，而会对背景图片进行裁剪，以适应该表格。其语法如下所示： 表格的内容 ,4.2.4 单元格间距,单元格间距是指表格中两个相邻单元格之间的间距和单元格与表格边框的间距。在默认情况下，单元格与单元格之间的间距是两个像素。通过设置元素中的CELLSPACING属性值，可以增大或缩小单元格之间的间距。其语法如下所示： 表格的内容 ,4.2.5 表格内单元格与文字的距离,表格内单元格与文字的距离是指在单元格内，文字与单元格边框的距离。默认情况下，文字是紧贴着单元格的
4、边框出现的，这样会显得页面的内容有些拥挤，可以通过元素中的CELLPADDING属性来调整这一距离，其语法是： 表格的内容 ,4.3 表格边框,表格的用处很多，不过只要不是涉及到网页排版，通常都会将表格边框显示出来。而且要设置表格的属性，就要先将表格的边框显示出来，这样才能更好地查看表格的效果。HTML中为元素提供了多个属性用于设置表格边框的样式。,4.3.1 边框宽度,在HTML中，默认表格的边框宽度为零，即不显示表格的边框。如果要显示表格的边框，就必须要为表格指定边框宽度。在HTML中，可以使用元素中的BORDER属性来设置表格边框的宽度。其语法如下所示： 表格的内容 ,4.3.2 边框颜
5、色,默认情况下，边框的颜色是灰色的。如果整个页面设置了特定的颜色，那么为了使表格和整个页面协调一致，就应该为表格的边框设置一个搭配的颜色。可以使用元素中的BORDERCOLOR属性来设置表格边框的颜色。其语法如下所示： 表格的内容 ,4.3.3 亮边框颜色,在HTML中，除了可以设置表格的边框颜色外，还可以将边框划分为亮边框和暗边框。亮边框就是光线照到的边框，一般认为是表格外部的上边框和左边框，以及内部的下侧和右侧边框为亮边框。可以通过元素中的BORDERCOLORLIGHT来设置表格亮边框，其语法如下所示： 表格的内容 ,4.3.4 暗边框颜色,与表格的亮边框相对应的就是暗边框，一般认为是表
6、格外部的下边框和右边框。可以通过元素中的BORDERCOLORDARK来设置表格亮边框，其语法如下所示： 表格的内容 ,4.4 设置表格行的对齐方式,表格都是由行组成的，行也可以设置对齐方式。通过对行的对齐方式的设定，可以使表格更加整齐。表格行的对齐方式包括水平对齐方式和垂直对齐方式。,4.4.1 垂直对齐方式,VALIGN属性可以设置行的垂直对齐方式，就是使行里面的内容都垂直对齐，其中默认为垂直居中对齐。垂直对齐方式语法结构如下所示： 表格内容 ,4.4.2 水平对齐方式,ALIGN属性可以设置行的水平对齐，就是使行里面的内容都水平对齐，其中默认为水平居左对齐。水平对齐方式语法结构如下所示：
7、 表格内容 ,4.5 行和列的合并,在一个表格里，有时候我们想设置的表格中，并不一定每行每列的行数和列数都是一样的。这时候我们就需要进行行和列的合并。,4.5.1 列的合并,COLSPAN属性可以进行列的合并，就是把一行中的某个单元格与其后的一个或多个单元格合并。其语法结构如下： 表格的内容 ,4.5.2 行的合并,ROWSPAN属性可以进行行的合并，就是把单元格与其下的一个或几个单元格进行合并。其语法结构如下： 表格的内容 ,4.6. 表格结构,表格结构标记可以明确表格的结构，分出表格的头（表首）、身体（表主体）和尾（表尾）。通过设置这些结构标记，还可以分别对表首、表主体以及表尾的样式进行设
8、置。,4.6.1 表头,通常一个表格的第1行都是用于说明本列数据含义的表头行。表头标签用于组合表格的表头内容。表头标签的使用，可以让网页中过长的表格在打印时，每页的最前面都可以显示出表头标签的内容。表头语法如下所示： 单元格内的文字 ,4.6.2 主体,表格的主体就是表格的真正要表达的内容和数据，一般占有表格的大部分内容。通过表主体标记，可以更好的划分表格的结构。表格主体部分设置语法如下： 单元格内的文字 ,4.6.3 表尾,表格的表尾主要是用于表注一些表格的额外信息，例如内容的设计者、创建日期、总和等。在HTML中，表格的表尾标记是，可以让网页中过长的表格在打印时，每页的最后面都可以显示出表
9、尾标签的内容。其语法如下所示： 单元格内的文字 ,4.7 表格标题,表格经常包括标题部分。HTML 4.01里专门有一个元素用来设置表格的标题，不过由于表格的标题部分看上去与表格似乎是分离的两个部分，所以很多网页开发者都没有使用该元素的习惯，而是直接使用了文本元素来设置表格标题。在默认情况下，表格的标题都是显示在表格的上方，并且是居中显示。通常元素都是紧跟在之后的，但是它可以出现在元素与元素之间的任何位置。其语法如下所示： 表格的标题文字,4.8 表格嵌套,在实际应用中，表格并不是单一出现的，往往需要在表格内嵌套其他的表格来实现页面的整体布局。一般情况下需要使用一些可视化软件来实现布局，这样看起来比较直观，容易达到预期的目的。但是也可以直接通过输入代码实现。,4.9 小结,本章主要介绍了HTML中表格的使用。详细介绍了创建表格的方法、表格属性、表格边框、表格行的对齐方式、表格行和列的合并、表格结构、表格标题和表格嵌套。其中，重点介绍了表格的属性，包括表格宽度、表格高度、表格背景图片、表格单元格间距以及表格内单元格与文字的距离。表格的运用范围很广，正确的使用表格可以是使网页内容更加整洁。,
