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