第6章 表格4.ppt

第6章表格 主要内容 熟悉表格的常用属性 制作表格 利用表格来容纳表格式数据 利用表格进行页面的排版 6 1表格简介 表格在网站应用中非常广泛 几乎所有的HTML页面中都或多或少地采用表格 表格可以方便灵活地实现对网页的排版 可以把相互关联的信息元素集中定位 使浏览页面的人一目了然 赏心悦目 所以说要制作好网页 就要学好表格 熟练掌握和运用表格的各种属性 6 2 1表格基本标记 在HTML语法中 表格主要通过3个标签来构成 基本语法 6 2 1表格基本标记 定义表格节次星期一星期二星期三星期四星期五 6 2 1表格基本标记 第12节体育大学英语高等数学数据结构实验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 3表格修饰 表格是网页布局中的重要元素 它有丰富的属性 可以对其进行相关设置 6 3 1设置表格的边框属性 默认情况下表格边框为0 可以通过给表格添加属性及属性值 实现为表格设置边框线以及美化表格的目的 基本语法 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设置表格的水平对齐属性 在水平方向上 可以设置表格的对齐方式为 居左 居中 居右 如果没特别进行设置 则默认为居左排列 基本语法 6 3 6设置表格的水平对齐属性 6 4设置表格行的属性 6 4设置表格行的属性的属性用于设定表格中某一行的属性 6 4 1行内容水平 基本语法 设定表格水平对齐课程表节次星期一星期二星期三星期四 6 4 1行内容水平 星期五第12节体育大学英语高等数学数据结构实验Web开发第34节大学英语高等数学数据结构数据结构Web开发实验适用时间 2008 2009第一学期083007班 6 4 1行内容水平 6 4 2行内容垂直对齐 基本语法 设定表格行内容垂直对齐课程表 6 4 2行内容垂直对齐 适用时间 2008 2009第一学期083007班 6 4 2行内容垂直对齐 6 5设置表格中某一单元格的属性 的属性用于设定表格中某一单元格的属性 6 5 1设置单元格跨行 单元格的rowspan属性可实现单元格的跨行合并 纵向合并 基本语法 6 5 1设置单元格跨行 设定跨行的表格课程表节次星期一星期二星期三星期四星期五第12节体育 6 5 1设置单元格跨行 大学英语高等数学数据结构Web开发第34节大学英语高等数学数据结构Web开发实验适用时间 2008 2009第一学期083007班 6 5 1设置单元格跨行 6 5 2设置单元格跨列 colspan属性可以进行单元格的跨列合并 横向合并 基本语法 6 5 2设置单元格跨列 设定跨列的表格课程表节次星期一星期二星期三星期四星期五第12节体育大学英语高等数学 6 5 2设置单元格跨列 数据结构第34节大学英语高等数学数据结构数据结构实验Web开发实验适用时间 2008 2009第一学期083007班 6 5 2设置单元格跨列 6 6表格嵌套 表格嵌套就是根据插入元素的需要 在一个表格的某个单元格里再插入一个若干行和列的表格 对嵌套表格 可以像对任何其他表格一样进行格式设置 但是其宽度受它所在单元格的宽度的限制 利用表格的嵌套 一方面可以编辑出复杂而精美的效果 另一方面可根据布局需要来实现精确的编排 不过 需要注意的是 嵌套层次越多 网页的载入速度就会越慢 6 6表格嵌套 表格嵌套课程表083007班 6 6表格嵌套 节次星期一星期二星期三星期四星期五第12节体育大学英语高等数学数据结构Web开发 6 6表格嵌套 第34节大学英语高等数学数据结构数据结构实验Web开发实验083008班 6 6表格嵌套 6 7小实例 利用表格实现页面布局网站标志广告条 6 7小实例 内容一内容二版权信息 6 7小实例 小结 本章主要介绍了表格制作时用到的常用属性以及取值情况 在这里提两点注意事项 1 在创建复杂的表格之前 最好对它进行规划 比如可以先用笔在纸上设计页面 2 使用表格排版网页时 要尽量细化表格 不要把整个网页放在一个大的表格里 因为表格内有一些载入较慢的元素 比如计数器 时 往往会延迟整个表格的显示 这是由IE的显示特性决定的 只有当表格内所有元素全部载入后