搜索
表格应用和布局第三章回顾与作业点评超链接的基本语法？如何创建锚链接？表单的基本语法？表单元素包括哪些？语法分别是什么？表单中只读和禁用对应的属性是什么？本章目标使用表格显示数据使用表格实现页面布局表格应用场合论坛中应用表格购物网站应用表格为什么使用表格门户网站应用表格行列单元格表格的基本结构特点：通常情况下，同行的高度一致、同列的宽度一致tabletrtd第1个单元格的内容/tdtd第2个单元格的内容/td....../trtrtd第1个单元格的内容/tdtd第2个单元格的内容/td....../tr/tabletable.../table定义表格tr…/tr定义行基本语法td…/td定义列……bodytableborder=2trtd1行1列的单元格/tdtd1行2列的单元格/tdtd1行3列的单元格/td/trtrtd2行1列的单元格/tdtd2行2列的单元格/tdtd2行3列的单元格/td/tr/table/body……如何创建表格table代表表格的开始，border=2表示边框宽度为2表格的第1行，有3条数据，tr…/tr代表行表格的第2行，有3条数据，tr…/tr代表行操作演示1：表格的基本结构表格的跨行跨列下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?跨3列跨3行……tablewidth=200border=1trtdcolspan=3学生成绩/td/trtrtd语文/tdtd98/td/trtrtd数学/tdtd95/td/tr/table……如何跨列1、colspan属性表示跨多少列2、该行其他单元格的内容就省略不写了操作演示2：跨列的表格……tablewidth=500border=1trtdrowspan=2张三/tdtd语文/tdtd98/td/trtrtd数学/tdtd95/td/tr......代码同上.两行内容../table……如何跨行1、rowspan属性表示跨多少行2、该列单元格的内容就省略不写了操作演示3：跨行的表格……tablewidth=200border=1trtdcolspan=3学生成绩/td/trtrtdrowspan=2张三/tdtd语文/tdtd98/td/trtrtd数学/tdtd95/td/tr....代码同上两行..../table……如何跨行、跨列colspan跨3列colspan跨2行操作演示4：跨行跨列的表格练习——简单表格需求说明制作页面完成时间：15分钟用2行3列的表格显示商品数据练习——跨行跨列表格需求说明完成时间：20分钟实现一个跨行跨列的商品类目表格h2标题表格高级标签2-1如何实现年终数据报表？表格标题caption数据主体tbody页眉thead页脚thfoot表头th表格数据的分组标签thead、tbody、tfooter配合使用，对报表数据进行逻辑分组表格高级标签2-2……tablewidth=100%caption年终数据报表/captiontheadstyle=background:#0FFtrth月份/thth收入（RMB）/th/tr/theadtbodystyle=background:#9CCtrtd1月/tdtd100/td/trtrtd2月/tdtd80/td/tr!--省略3-6月的类似HTML代码--/tbodytfootstyle=background:#FF0trtd平均月收入/tdtd196.67/td/trtrtd总计/tdtd1180/td/tr/tfoot/table……thead标签对应报表的页眉tbody对应报表的数据主体tfooter对应报表的页脚操作演示5：thead标签练习——表格分组标签的使用需求说明实现一个按地点和时间汇总的年终报表完成时间：20分钟数据分组的表格共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解表格布局的应用场合表格布局图文布局，数据规则整齐表单布局，同样要求数据规则整齐如何实现图文布局2-1实现步骤如何实现图文布局2-2实现步骤……tableborder=1pxtrtdcolspan=2imgsrc=“…alt=公告栏//td/trtrtdrowspan=4imgsrc=“…alt=公告左侧图//tdtd大学要求老师开网店/td/trtrtd安全锤网上大热销/td/tr……/tr/table……整个是5行2列的表格,实际布局时border=“0”隐藏边框公告栏：跨2列图片：跨4行操作演示6：图文布局练习——贵美商品分类页需求说明根据提供的素材实现完成时间：25分钟使用表格实现图文布局如何实现表单布局3-1如何实现页面中登录表单的布局？问题：结构简单，但不美观如何实现表单布局3-2实际页面中的登录表单布局实际应用，需要几行几列的表格布局？如何实现表单布局3-3formmethod=postaction=login_success.htmtabletrtdimgsrc=images/title_login_2.pngalt=alt//tdtdcolspan=2 /td/trtrtd/tdtd会员名:/tdtdinputname=“sname”…（可包含….）/td…代码同“会员名”…tdcolspan=2inputtype=image…src=“…//td/tr/table/form整体布局：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种布局常用的块结构是什么？谢谢！