1、第6章 表 格,清华大学出版社,主要内容,熟悉表格的常用属性，制作表格,利用表格来容纳表格式数据,利用表格进行页面的排版布局,6.1表格简介,表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。,6.2.1表格基本标记,在HTML语法中，表格主要通过3个标签来构成：、。 基本语法：,6.2.1表格基本标记,定义表格节次 星期一 星期二 星期三 星期四 星期五 ,6.2.1表格基本标记,第12节 体育 大学英语
2、 高等数学 数据结构实验 Web开发 第34节 大学英语 高等数学 数据结构 数据结构 Web开发实验 ,6.2.1表格基本标记,6.2.2表格标题,表格标题，就是对表格内容的简单说明，用标签实现。基本语法：,6.2.2表格标题, 课程表节次 星期一 星期二 星期三 星期四 星期五 /table,6.2.2表格标题,6.2.3表格表头,表头，指表格的第一行，文字样式为居中、加粗显示，通过标签实现。基本语法：,6.2.3表格表头, 课程表节次 星期一 星期二 星期三 星期四 星期五 ,6.2.3表格表头,6.2.4设置划分结构的表格,为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，H
3、TML语言规定了、3个标签分别对应于表格的表首、表主体和表尾。基本语法：,6.2.4设置划分结构的表格,定义表格结构课程表节次 星期一 星期二 星期三 星期四 星期五 适用时间：20082009第一学期083007班,6.2.4设置划分结构的表格, 第12节 体育 大学英语 高等数学 数据结构实验 Web开发 第34节 大学英语 高等数学 数据结构 数据结构 Web开发实验 ,6.2.4设置划分结构的表格,6.3表格修饰,表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。,6.3.1设置表格的边框属性,默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线
4、以及美化表格的目的，常见属性如表6-3所示。基本语法：,6.3.1设置表格的边框属性, ,6.3.2设置表格的宽度和高度,默认情况下，表格的宽度和高度会根据内容自动调整。基本语法：,6.3.2设置表格的宽度和高度, ,6.3.2设置表格的宽度和高度,6.3.3 设置表格背景,表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法：,6.3.3 设置表格背景, ,6.3.4 设置表格的背景图像,表格背景图像可以是GIF、JPEG或PNG三种图像格式。基本语法：,6.3.4 设置表格的背景图像, ,6.3.5 设置边框样式,在前面我们使用bor
5、der属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。基本语法：,6.3.5 设置边框样式, ,6.3.5 设置边框样式,6.3.6 设置表格单元格间距,通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。基本语法：,6.3.6 设置表格单元格间距, ,6.3.6 设置表格单元格间距,6.3.7设置表格单元格边距,单元格边距是指单元格中的内容与单元格边框的距离。基本语法：,6.3.7设置表格单元格边距, ,6.3.7设置表格单元格边距,6.3.8设置表格
6、的水平对齐属性,在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。基本语法：,6.3.8设置表格的水平对齐属性, ,6.4设置表格行的属性,6.4设置表格行的属性的属性用于设定表格中某一行的属性。,6.4.1行内容水平,基本语法：,设定表格水平对齐课程表节次 星期一 星期二 星期三 星期四,6.4.1行内容水平,星期五 第12节 体育 大学英语 高等数学 数据结构实验 Web开发 第34节 大学英语 高等数学 数据结构 数据结构 Web开发实验 适用时间：20082009第一学期083007班,6.4.1行内容水平,6.4.2行内容垂直对齐,基本
7、语法：,设定表格行内容垂直对齐课程表,6.4.2行内容垂直对齐,适用时间：20082009第一学期083007班,6.4.2行内容垂直对齐,6.5 设置表格中某一单元格的属性,的属性用于设定表格中某一单元格的属性,6.5.1设置单元格跨行,单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。基本语法：,6.5.1设置单元格跨行,设定跨行的表格课程表节次 星期一 星期二 星期三 星期四 星期五 第12节 体育,6.5.1设置单元格跨行,大学英语 高等数学 数据结构 Web开发 第34节 大学英语 高等数学 数据结构 Web开发实验 适用时间：20082009第一学期083007班,6.
8、5.1设置单元格跨行,6.5.2设置单元格跨列,colspan属性可以进行单元格的跨列合并（横向合并）。基本语法：,6.5.2设置单元格跨列,设定跨列的表格课程表节次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学,6.5.2设置单元格跨列,数据结构 第34节 大学英语 高等数学 数据结构数据结构实验 Web开发实验 适用时间：20082009第一学期083007班,6.5.2设置单元格跨列,6.6表格嵌套,表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的
9、宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。,6.6表格嵌套,表格嵌套课程表083007班,6.6表格嵌套,节次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学 数据结构 Web开发 ,6.6表格嵌套,第34节 大学英语 高等数学 数据结构数据结构实验 Web开发实验 083008班,6.6表格嵌套,6.7小实例,一些设计人员喜欢使用表格来进行页面布局，因为它的效果在不同的浏览器中更容易保持一致，虽然目前更流行的是利用“DIV+CSS”技术进行页面布局
10、。,6.7小实例,利用表格实现页面布局网站标志 广告条 ,6.7小实例,内容一内容二版权信息,6.7小实例,小结,本章主要介绍了表格制作时用到的常用属性以及取值情 况，在这里提两点注意事项： 1. 在创建复杂的表格之前，最好对它进行规划，比如可以 先用笔在纸上设计页面； 2. 使用表格排版网页时，要尽量细化表格，不要把整个网页 放在一个大的表格里，因为表格内有一些载入较慢的元素（比如计数器）时，往往会延迟整个表格的显示。这是由IE的显示特性决定的，只有当表格内所有元素全部载入后，整个表格才得以显示。针对这个特点，我们可以将整,小结,个页面分成几块，例如通用的上(放置Logo、Banner、 Menu等等)、中(放置页面内容)、下(放置版权信息等等)结构，将每一部分由单独的表格来实现，这样比较好。,,Thank You !,
