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