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