《《网页设计与制作》第3章课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作》第3章课件.ppt（30页珍藏版）》请在一课资料网上搜索。

1、第三章第三章 制作表格图文布局-公告栏页面 制作表格布局表单页面-登录页面本章任务 使用表格显示数据 使用表格实现页面布局本章目标表格应用场合表格应用场合论坛中应用论坛中应用表格表格购物网站购物网站应用表格应用表格为什么使用表格门户网站应门户网站应用表格用表格行行列列单元格单元格表格的基本结构特点：通常情况下，特点：通常情况下，同行的高度一致、同同行的高度一致、同列的宽度一致列的宽度一致 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容.第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容.定定义表格义表格 定义行定义行 基本语法 定义列定义列 1行行1

2、列的单元格列的单元格 1行行2列的单元格列的单元格 1行行3列的单元格列的单元格 2行行1列的单元格列的单元格 2行行2列的单元格列的单元格 2行行3列的单元格列的单元格 如何创建表格代表表格的开代表表格的开始，始，border=2 表示表示边框宽度为边框宽度为2表格的第表格的第1行，有行，有3条数条数据，据，代表行代表行表格的第表格的第2行，有行，有3条数条数据，据，代表行代表行 下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?表格的跨行跨列跨跨3列列跨跨3行行 学生成绩学生成绩 语文语文 98 数学数学 95 如何跨列 1、colspan 属性表示跨多少列属性表示跨多少列 2、该行其

3、他单元格的内容就省略不写了、该行其他单元格的内容就省略不写了 张三张三 语文语文 98 数学数学 95 .代码同上代码同上.两行内容两行内容.如何跨行 1、rowspan 属性表示跨属性表示跨多少行多少行 2、该列单元格的内容就该列单元格的内容就省略不写了省略不写了 学生成绩学生成绩 张三张三 语文语文 98 数学数学 95 .代码同上两行代码同上两行.如何跨行、跨列 colspan 跨跨3列列 colspan 跨跨2行行 需求说明 制作页面练习简单表格 用用2行行3列的表列的表格显示商品数格显示商品数据据 需求说明练习跨行跨列表格 实现一个跨行实现一个跨行跨列的商品类跨列的商品类目表格目表格

4、h2标题标题 如何实现年终数据报表？表格高级标签2-1 表格标题表格标题数据主体数据主体页眉页眉页脚页脚表头表头表格数据的分组标签表格数据的分组标签、配合使用，对报表数据进行逻辑分组配合使用，对报表数据进行逻辑分组 表格高级标签2-2年终数据报表年终数据报表 月份月份 收入（收入（RMB）1月月 100 2月月 80 平均月收入平均月收入 196.67 总计总计 1180 标签对应标签对应报表的页眉报表的页眉 对应报表对应报表的数据主体的数据主体 对应报对应报表的页脚表的页脚 练习表格分组标签的使用 需求说明需求说明实现一个按地点和时间汇总的年终报表实现一个按地点和时间汇总的年终报表 数据分组

5、的表格数据分组的表格 表格布局的应用场合表格布局的应用场合表格布局 图文布局，数据图文布局，数据规则整齐规则整齐表单布局，表单布局，同样要求数同样要求数据规则整齐据规则整齐如何实现图文布局2-1实现步骤实现步骤如何实现图文布局2-2实现步骤实现步骤 大学要求老师开网店大学要求老师开网店 安全锤网上大热销安全锤网上大热销 整个是整个是5行行2列的表格列的表格,实实际布局时际布局时border=“0”隐隐藏边框藏边框公告栏：跨公告栏：跨2列列图片：跨图片：跨4行行 需求说明 根据提供的素材实现练习贵美商品分类页 使用表格实现图文布局使用表格实现图文布局 如何实现页面中登录表单的布局？如何实现表单布

6、局3-1问题：结构简单，问题：结构简单，但不美观但不美观 实际页面中的登录表单布局如何实现表单布局3-2实际应用，需要几行几列的实际应用，需要几行几列的表格布局？表格布局？如何实现表单布局3-3 会员名会员名:input name=“sname”（可包含（可包含 .）代码同代码同“会员名会员名”整体布局：整体布局：4行行3列的列的表格表格图片后的内容跨图片后的内容跨2列，列，内容用内容用“空格空格”填填充充图片按钮跨图片按钮跨2列列操作演示操作演示7：贵美登录表单：贵美登录表单 使用表格进行布局对显示数据有什么要求？实现思路是什么？小结2-1 使用场合：数据显示要求较为规整，符合表格

7、使用场合：数据显示要求较为规整，符合表格布局的特点布局的特点 布局的实现思路：布局的实现思路：需要几行几列的表格？需要几行几列的表格？哪些单元格有跨行或跨列？哪些单元格有跨行或跨列？编写表格代码实现编写表格代码实现 注意：1、同列单元格宽度由该列宽度最大的单元格决定 2、同行单元格高度由该行高度最高的单元格决定小结2-2 同列单元格宽度由该同列单元格宽度由该列宽度最大的单元格列宽度最大的单元格决定，要防止内容过决定，要防止内容过长撑开单元格长撑开单元格同行单元格同理，注同行单元格同理，注意换行带来的高度影意换行带来的高度影响响 如何用表格实现下图布局？嵌套布局2-1 对于复杂的页面，如对于复杂

8、的页面，如使用表格则必须采用使用表格则必须采用多层嵌套多层嵌套 嵌套表格布局的缺点：代码量大 层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据 表格布局仅适用于：规则的数据显示 表单页面嵌套布局2-2 表格布局不适合不规则的复表格布局不适合不规则的复杂页面，这种场合需使用杂页面，这种场合需使用DIV+CSS布局（后续学习）布局（后续学习）操作演示：嵌套布局操作演示：嵌套布局 需求说明 制作贵美注册页面练习制作贵美注册页 1、先考虑使用几行几列的表、先考虑使用几行几列的表格格2、单元格的跨行或跨列情况、单元格的跨行或跨列情况 表格的基本语法是什么？表格的跨行、跨列属性分别是什么？介绍表格布局的使用场合 简述表格布局的实现思路 总结2-1前3章知识梳理：HTML的基本结构？W3C的基本规范？如何创建符合标准的HTML文档？常用的HTML块级标签有哪些？语法分别是什么？常用的HTML行级标签有哪些？语法分别是什么？表单的语法及执行原理？各类表单元素的语法？4种布局常用的块结构是什么？总结2-2