02_表格与页面布局说课.pptVIP

什么是表格？ 行 列 列标题 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 单元格 表格标题 如何创建表格? 表格用table表示 一个表格可以有很多行，用tr表示 每行可以分为多个单元格，用td表示 演示： 一行一列 一行三列 两行三列 table 标签及其属性 border 属性 表格边框 演示：不显示边框的表格 演示：显示边框的表格 align 表格对齐 演示：居左，居中，居右对齐 排版：新浪 表格背景 bgcolor background 颜色表示的3种方法 注：align、bgcolor属性不赞成使用，应使用css控制 table 标签及其属性 表格宽度 width 高度 height 单位设置 像素 (px) 百分比 ( %) 演示 设置宽度，高度 避免出现水平滚动条 一般不设置高度(自适应) cellspacing，cellpadding 属性 cellspacing 设置单元格间距 cellpadding 设置单元格边沿和其内容之间的距离 table的常用属性 tr标签及其属性 align 属性 属性值：“left” 、“center”、“right” 注意区别table的align属性 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属性合并单元格 其它表格标签 caption 标签 作用：用来说明表格内容的标题 属性：align， valign th标签 作用：同td标签 不同点:th用粗体样式标记的文本表头，对齐方式也不一样 thead tbody tfoot标签 用表格进行页面排版 表格进行页面排版 简单，便捷 结构清晰 表格嵌套使用 演示 表格排版注意事项： 表格嵌套层次不要太多 整个页面的排版不要用一个table，影响浏览器对页面的显示效率 表格的行列排版要整齐 td中没有内容时，以空白（nbsp;）填充 Div+CSS布局（了解） 总结 表格可以格式化数据、管理文件布局 表格的基本结构 标签tabletrtd及其基本属性 合并单元格 其它表格标签 课后练习作业2-1 创建一个如下样式的表格 要求：1.表格宽度760px，边框宽度为1px，表格水平居中 2.单元格之间没有间距，内容与单元格边框之间距离为2 3.在单元格1和2分别插入图片a1.gif和a2.jpg,并且图片内容垂直居中 4.其他文字依照下表输入 5.要求按照完整的网页规范编码 单元格1 单元格2 设为首页 联系站长 加入收藏 首页 | 基础知识 | 高级编程 课后练习作业2-2 根据提供的图片实现以下界面效果（界面宽度760px） * * 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般位于第一行或第一列，粗体显示），可选 5）表格标题，可选 * 网 页 编 程 第二章 表格与页面布局 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记，图片标记，超级链接标记 相对路径，绝对路径，物理路径 本章目标 网页设计注意事项 什么是表格？ 为什么需要表格？ 如何创建表格？ 表格如何使用？ 网页设计注意事项 多浏览器支持 样式与风格统一 网站结构、文件命名 页面尺寸与屏幕分辨率 图片文件命名、大小尺寸限制 相对路径的应用 页面内容（title、meta、alt、tbody等属性的应用） 什么是表格？ 表格是html高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成 球员 得分 篮板 姚明 27 8 麦克格雷迪 31 2 海耶斯 8 15 巴蒂尔 7 5 阿尔斯通 2 3 表格应用示例 什么是表格？ 表格的作用： 用于显示数据，便于理解、分析 组织网页版面信息 * * 强调表格的几个重要组