基于HTML的商业网站开发 第二章.pptVIP

第二章 表 格 ---页面排版布局与表格 回顾 Internet 和 万维网 WEB的工作原理 网页的基本结构 标记及其属性 段落标记，图片标记，超级链接标记 相对路径，绝对路径 本章目标 什么是表格？ 为什么需要表格？ 如何创建表格？ 表格如何使用？ 什么是表格? 表格是html高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成。 什么是表格？ 表格的作用： 用于显示数据，便于理解、分析 组织网页版面信息 什么是表格？ 如何创建表格 table 标签及其属性 表格宽度 width 高度 height 单位设置 像素 (px) 百分比 ( %) 演示 设置宽度，高度 避免出现水平滚动条 一般不设置高度(自适应) border 属性 表格边框 演示：不显示边框的表格 演示：显示边框的表格 align 表格对齐 演示：居左，居中，居右对齐 表格背景 bgcolor background 颜色表示的3种方法 表格属性二 练一练 如何拼接？ tr标签及其属性 align 属性 属性值：”left” “center” “right” 注意区别table的align属性 height valign 属性 属性值：”top” “middle” “bottom” bgcolor 属性 背景颜色设置 考虑设置优先级的问题 td标签及其属性 align 属性 属性值：”left” “center” “right” 注意区别table的align属性 valign 属性 属性值：”top” “middle” “bottom” bgcolor 属性 background 属性 bgcolor 背景颜色设置 background 背景图片设置 考虑设置优先级的问题 td标签及其属性 width属性 height属性 注意：同行或者同列单元格将受影响 rowspan属性 colspan属性 rowspan属性 将一个表格单元格列合并 colspan属性 将一个表格单元格行合并 演示 项目实战 利用rowspan和colspan属性合并单元格 如何创建表格? 表格可选的标记 thead caption tbody th 用表格进行页面排版 表格进行页面排版 简单，便捷 结构清晰 表格嵌套使用 练一练 完成以下网页 总结 表格可以格式化数据、管理文件布局 表格的基本结构 标签tabletrtd及其基本属性 合并单元格 其它表格标签 课后作业 创建一个如下样式的表格 要求：1.表格宽度760px，边框宽度为1px，表格水平居中 2.单元格之间没有间距，内容与单元格边框之间距 离为2 3.在单元格1和2分别插入图片a1.gif和a2.jpg,并且 图片内容垂直居中 4.其他文字依照下表输入 5.要求按照完整的网页规范编码 中国十大品牌IT教育机构 3 2 阿尔斯通 5 7 巴蒂尔 15 8 海耶斯 2 31 麦克格雷迪 8 27 姚明 篮板 得分 球员 行 列 列标题 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 单元格 表格标题 TABLE border=2 TR TD姓名/TD TD性别/TD TD年龄/TD /TR TR TD卖女孩的小火柴/TD TD女/TD TD18/TD /TR /TABLE 查看源代码 内容 内容 内容 内容 cellpadding (单元格填充) cellpadding (单元格间距) 填充属性和间距属性： cellpadding cellpadding 首页 | 基础知识 | 高级编程 加入收藏 联系站长 设为首页 单元格2 单元格1