表格应用和布局综述

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三章,表格应用和布局,回顾与作业点评,超链接的基本语法？,表单的基本语法？,表单元素包括哪些？语法分别是什么？,预习检查,表格的用途？,表格一般包含哪几部分？,table,、,tr,、,td,的含义？,本章任务,制作表格图文布局,-,公告栏页面,制作表格布局表单页面,-,登录页面,本章目标,使用表格显示数据,使用表格实现页面布局,表格应用场合,论坛中应用表格,购物网站应用表格,为什么使用表格,门户网站应用表格,行,列,单元格,表格的基本结构,特点：通常情况下，同行的高度一致、同列的宽度一致,第,1,个单元格的内容,第,2,个单元格的内容,.,第,1,个单元格的内容,第,2,个单元格的内容,.,.,定义表格,定义行,基本语法,定义列,1,行,1,列的单元格,1,行,2,列的单元格,1,行,3,列的单元格,2,行,1,列的单元格,2,行,2,列的单元格,2,行,3,列的单元格,如何创建表格,代表表格的开始，,border=2,表示边框宽度为,2,表格的第,1,行，有,3,条数据，,代表行,表格的第,2,行，有,3,条数据，,代表行,操作演示,1,：表格的基本结构,表格的跨行跨列,下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列,?,跨,3,列,跨,3,行,学生成绩,语文,98,数学,95,如何跨列,1,、,colspan,属性表示跨多少列,2,、该行其他单元格的内容就省略不写了,操作演示,2,：跨列的表格,张三,语文,98,数学,95,.,代码同上,.,两行内容,.,如何跨行,1,、,rowspan,属性表示跨多少行,2,、该列单元格的内容就省略不写了,操作演示,3,：跨行的表格,学生成绩,张三,语文,98,数学,95,.,代码同上两行,.,如何跨行、跨列,cols,pan,跨,3,列,cols,pan,跨,2,行,操作演示,4,：跨行跨列的表格,练习,简单表格,需求说明,制作页面,完成时间：,15,分钟,用,2,行,3,列的表格显示商品数据,练习,跨行跨列表格,需求说明,完成时间：,20,分钟,实现一个跨行跨列的商品类目表格,h2,标题,表格高级标签,2-1,如何实现年终数据报表？,表格标题,数据主体,页眉,页脚,thfoot,表头,表格数据的分组标签,、,、,配合使用，对报表数据进行逻辑分组,表格高级标签,2-2,年终数据报表,月份,收入（,RMB,）,1,月,100 ,2,月,80 ,平均月收入,196.67,总计,1180 ,标签对应报表的页眉,对应报表的数据主体,对应报表的页脚,操作演示,5,：,thead,标签,练习,表格分组标签的使用,需求说明,实现一个按地点和时间汇总的年终报表,完成时间：,20,分钟,数据分组的表格,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,表格布局的应用场合,表格布局,图文布局，数据规则整齐,表单布局，同样要求数据规则整齐,如何实现图文布局,2-1,实现步骤,如何实现图文布局,2-2,实现步骤,大学要求老师开网店,安全锤网上大热销,整个是,5,行,2,列的表格,实际布局时,border=“0”,隐藏边框,公告栏：跨,2,列,图片：跨,4,行,操作演示,6,：图文布局,练习,贵美商品分类页,需求说明,根据提供的素材实现,完成时间：,25,分钟,使用表格实现图文布局,如何实现表单布局,3-1,如何实现页面中登录表单的布局？,问题：结构简单，但不美观,如何实现表单布局,3-2,实际页面中的登录表单布局,实际应用，需要几行几列的表格布局？,如何实现表单布局,3-3,会员名,:,input name=“sname”,（可包含,.,）,代码同“会员名”,整体布局：,4,行,3,列的表格,图片后的内容跨,2,列，内容用“空格”填充,图片按钮跨,2,列,操作演示,7,：贵美登录表单,小结,2-1,使用表格进行布局对显示数据有什么要求？实现思路是什么？,使用场合：数据显示要求较为规整，符合表格布局的特点,布局的实现思路：,需要几行几列的表格？,哪些单元格有跨行或跨列？,编写表格代码实现,小结,2-2,注意：,1,、同列单元格宽度由该列宽度最大的单元格决定,2,、同行单元格宽度由该行高度最高的单元格决定,同列单元格宽度由该列宽度最大的单元格决定，要防止内容过长撑开单元格,同行单元格同理，注意换行带来的高度影响,嵌套布局,2-1,如何用表格实现下图布局？,对于复杂的页面，如使用表格则必须采用多层嵌套,嵌套布局,2-2,嵌套表格布局的缺点：,代码量大,层次结构也相对复杂,不利于,Goole,等搜索引擎搜索查找数据,表格布局仅适用于：,规则的数据显示,表单页面,表格布局不适合不规则的复杂页面，这种场合需使用,DIV+CSS,布局（后续学习）,操作演示,8,：嵌套布局,练习,制作贵美注册页,需求说明,制作贵美注册页面,完成时间：,25,分钟,1,、先考虑使用几行几列的表格,2,、单元格的跨行或跨列情况,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,总结,2-1,表格的基本语法是什么？,表格的跨行、跨列属性分别是什么？,介绍表格布局的使用场合,简述表格布局的实现思路,总结,2-2,前,3,章知识梳理：,HTML,的基本结构？,W3C,的基本规范？如何创建符合标准的,HTML,文档？,常用的,HTML,块级标签有哪些？语法分别是什么？,常用的,HTML,行级标签有哪些？语法分别是什么？,表单的语法及执行原理？各类表单元素的语法？,4,种布局常用的块结构是什么？,