表格应用和布局综述

1、第三章第三章表格应用和布局表格应用和布局回顾与作业点评回顾与作业点评超链接的基本语法？超链接的基本语法？表单的基本语法？表单的基本语法？表单元素包括哪些？语法分别是什么？表单元素包括哪些？语法分别是什么？预习检查预习检查表格的用途？表格的用途？表格一般包含哪几部分？表格一般包含哪几部分？table、tr、td的含义？的含义？本章任务本章任务制作表格图文布局制作表格图文布局-公告栏页面公告栏页面制作表格布局表单页面制作表格布局表单页面-登录页面登录页面本章目标本章目标使用表格显示数据使用表格显示数据使用表格实现页面布局使用表格实现页面布局表格应用场合表格应用场合论坛中应用论坛中应用表格表格购物网

2、站购物网站应用表格应用表格为什么使用表格为什么使用表格门户网站应门户网站应用表格用表格行行列列单元格单元格表格的基本结构表格的基本结构特点：通常情况下，特点：通常情况下，同行的高度一致、同同行的高度一致、同列的宽度一致列的宽度一致 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容 . 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容. .定定义表格义表格 定义行定义行 基本语法基本语法 定义列定义列 1行行1列的单元格列的单元格 1行行2列的单元格列的单元格 1行行3列的单元格列的单元格 2行行1列的单元格列的单元格 2行行2列的单元格列的单元格 2

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

4、内容就省略不写了、该行其他单元格的内容就省略不写了操作演示操作演示2：跨列的表格：跨列的表格 张三张三 语文语文 98 数学数学 95 .代码同上代码同上.两行内容两行内容. 如何跨行如何跨行 1、rowspan 属性表示跨属性表示跨多少行多少行 2、 该列单元格的内容就该列单元格的内容就省略不写了省略不写了操作演示操作演示3：跨行的表格：跨行的表格 学生成绩学生成绩 张三张三 语文语文 98 数学数学 95 .代码同上两行代码同上两行.如何跨行、跨列如何跨行、跨列 colspan 跨跨3列列 colspan 跨跨2行行 操作演示操作演示4：跨行跨列的表格：跨行跨列的表格练习练习简单表格简单表

5、格 需求说明需求说明制作页面完成时间：完成时间：15分钟分钟用用2行行3列的表列的表格显示商品数格显示商品数据据练习练习跨行跨列表格跨行跨列表格 需求说明需求说明完成时间：完成时间：20分钟分钟实现一个跨行实现一个跨行跨列的商品类跨列的商品类目表格目表格h2标题标题表格高级标签表格高级标签2-1 2-1 如何实现年终数据报表？如何实现年终数据报表？表格标题表格标题数据主体数据主体页眉页眉页脚页脚thfoot表头表头表格数据的分组标签表格数据的分组标签、配合使用，对报表数据进行逻辑分组配合使用，对报表数据进行逻辑分组 表格高级标签表格高级标签2-22-2年终数据报表年终数据报表 月份月份 收入（

6、收入（RMB） 1月月 100 2月月 80 平均月收入平均月收入 196.67 总计总计 1180 标签对应标签对应报表的页眉报表的页眉 对应报表对应报表的数据主体的数据主体 对应报对应报表的页脚表的页脚 操作演示操作演示5：thead标签标签练习练习表格分组标签的使用表格分组标签的使用 需求说明需求说明实现一个按地点和时间汇总的年终报表实现一个按地点和时间汇总的年终报表 完成时间：完成时间：20分钟分钟数据分组的表格数据分组的表格 共性问题集中讲解共性问题集中讲解n常见调试问题及解决办法常见调试问题及解决办法n代码规范问题代码规范问题共性问题集中讲解共性问题集中讲解表格布局的应用场合表格布

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

8、25分钟分钟使用表格实现图文布局使用表格实现图文布局如何实现表单布局如何实现表单布局3-13-1如何实现页面中登录表单的布局？如何实现页面中登录表单的布局？问题：结构简单，问题：结构简单，但不美观但不美观如何实现表单布局如何实现表单布局3-23-2实际页面中的登录表单布局实际页面中的登录表单布局实际应用，需要几行几列的实际应用，需要几行几列的表格布局？表格布局？如何实现表单布局如何实现表单布局3-33-3   会员名会员名: input name=“sname” （可包含（可包含 .） 代码同代码同“会员名会员名” 整体布局：整体布局：4行行3列的列的表格表格图片后的内容跨图

9、片后的内容跨2列，列，内容用内容用“空格空格”填填充充图片按钮跨图片按钮跨2列列操作演示操作演示7：贵美登录表单：贵美登录表单小结小结2-1 2-1 使用表格进行布局对显示数据有什么要求？实现思路是使用表格进行布局对显示数据有什么要求？实现思路是什么？什么？使用场合：数据显示要求较为规整，符合表格使用场合：数据显示要求较为规整，符合表格布局的特点布局的特点 布局的实现思路：布局的实现思路：需要几行几列的表格？需要几行几列的表格？哪些单元格有跨行或跨列？哪些单元格有跨行或跨列？编写表格代码实现编写表格代码实现小结小结2-2 2-2 注意：注意：1、同列单元格宽度由该列宽度最大的单元格决定 2、同

10、行单元格宽度由该行高度最高的单元格决定同列单元格宽度由该同列单元格宽度由该列宽度最大的单元格列宽度最大的单元格决定，要防止内容过决定，要防止内容过长撑开单元格长撑开单元格同行单元格同理，注同行单元格同理，注意换行带来的高度影意换行带来的高度影响响嵌套布局嵌套布局2-1 2-1 如何用表格实现下图布局？如何用表格实现下图布局？对于复杂的页面，如对于复杂的页面，如使用表格则必须采用使用表格则必须采用多层嵌套多层嵌套嵌套布局嵌套布局2-2 2-2 嵌套表格布局的缺点：嵌套表格布局的缺点：代码量大层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据表格布局仅适用于：表格布局仅适用于：规则的数据显

11、示表单页面表格布局不适合不规则的复表格布局不适合不规则的复杂页面，这种场合需使用杂页面，这种场合需使用DIV+CSS布局（后续学习）布局（后续学习）操作演示操作演示8：嵌套布局：嵌套布局练习练习制作贵美注册页制作贵美注册页 需求说明需求说明制作贵美注册页面完成时间：完成时间：25分钟分钟1、先考虑使用几行几列的表、先考虑使用几行几列的表格格2、单元格的跨行或跨列情况、单元格的跨行或跨列情况共性问题集中讲解共性问题集中讲解n常见调试问题及解决办法常见调试问题及解决办法n代码规范问题代码规范问题共性问题集中讲解共性问题集中讲解总结总结2-12-1表格的基本语法是什么？表格的基本语法是什么？表格的跨行、跨列属性分别是什么？表格的跨行、跨列属性分别是什么？介绍表格布局的使用场合介绍表格布局的使用场合简述表格布局的实现思路简述表格布局的实现思路 总结总结2-22-2前前3章知识梳理：章知识梳理： HTML的基本结构？的基本结构？ W3C的基本规范？如何创建符合标准的的基