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