3表格应用和布局试卷.ppt

如何实现图文布局2-1 实现步骤 如何实现图文布局2-2 实现步骤 …… table border=1px tr td colspan=2img src=“… alt=公告栏 //td /tr tr td rowspan=4img src=“… alt=公告左侧图 //td td大学要求老师开网店/td /tr tr td安全锤网上大热销/td /tr …… /tr /table …… 整个是5行2列的表格,实际布局时border=“0”隐藏边框 公告栏：跨2列 图片：跨4行 操作演示6：图文布局 练习——贵美商品分类页 需求说明 根据提供的素材实现 完成时间：25分钟 使用表格实现图文布局 如何实现表单布局3-1 如何实现页面中登录表单的布局？ 问题：结构简单，但不美观 * * * * * * * * * 在确定各单元格的宽高时，由于表格的严格约束特点，需要注意： （1）同列单元格宽度由该列宽度最大的单元格决定。如果没有则默认与该列第一行单元格宽度一致。在布局时必须注意内容过长撑开单元格的情况，合理设置好各列列宽。 （2） 同行单元格的高度类似，但是请注意换行带来的高度变化。 * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 第三章 表格应用和布局 回顾与作业点评 超链接的基本语法？ 表单的基本语法？ 表单元素包括哪些？语法分别是什么？ 预习检查 表格的用途？ 表格一般包含哪几部分？ table、tr、td的含义？ 本章任务 制作表格图文布局--公告栏页面 制作表格布局表单页面--登录页面 本章目标 使用表格显示数据 使用表格实现页面布局 表格应用场合 论坛中应用表格 购物网站应用表格 为什么使用表格 门户网站应用表格 行 列 单元格 表格的基本结构 特点：通常情况下，同行的高度一致、同列的宽度一致 table tr td第1个单元格的内容/td td第2个单元格的内容/td ...... /tr tr td第1个单元格的内容/td td第2个单元格的内容/td ...... /tr /table table... / table定义表格 tr…/tr 定义行 基本语法 td…/td 定义列 …… body table border=2 tr td1行1列的单元格/td td1行2列的单元格/td td1行3列的单元格/td /tr tr td2行1列的单元格/td td2行2列的单元格/td td2行3列的单元格/td /tr /table /body …… 如何创建表格 table代表表格的开始，border=2 表示边框宽度为2 表格的第1行，有3条数据，tr…/tr代表行 表格的第2行，有3条数据，tr…/tr代表行 操作演示1：表格的基本结构 表格的跨行跨列 下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列? 跨3列 跨3行 … … table width=200 border=1 tr td colspan=3学生成绩/td /tr tr td语文/td td98/td /tr tr td数学/td td95/td /tr /table … … 如何跨列 1、colspan 属性表示跨多少列 2、该行其他单元格的内容就省略不写了 操作演示2：跨列的表格 … … table width=500 border=1 tr td rowspan=2张三/td td语文/td td98/td /tr tr td数学/td td95/td /tr ......代码同上.两行内容.. /table … … 如何跨行 1、rowspan 属性表示跨多少行 2、 该列单元格的内容就省略不写了 操作演示3：跨行的表格 …… table width=200 border=1 tr td colspan=3学生成绩/td /tr tr td rowspan=2张三/td td语文/td td98/td /tr tr td数学/td td95/td /tr ....代码同上两行.... /table …… 如何跨行、跨列 colspan 跨3列 colspan 跨2行