《网页设计与制作》第3章解说.pptVIP

如何用表格实现下图布局？ 嵌套布局2-1 对于复杂的页面，如使用表格则必须采用多层嵌套 嵌套表格布局的缺点： 代码量大 层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据 表格布局仅适用于： 规则的数据显示 表单页面 嵌套布局2-2 表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习） 操作演示：嵌套布局 需求说明 制作贵美注册页面 练习——制作贵美注册页 1、先考虑使用几行几列的表格 2、单元格的跨行或跨列情况 表格的基本语法是什么？ 表格的跨行、跨列属性分别是什么？ 介绍表格布局的使用场合 简述表格布局的实现思路 总结2-1 前3章知识梳理： HTML的基本结构？ W3C的基本规范？如何创建符合标准的HTML文档？ 常用的HTML块级标签有哪些 ？语法分别是什么？ 常用的HTML行级标签有哪些 ？语法分别是什么？ 表单的语法及执行原理？各类表单元素的语法？ 4种布局常用的块结构是什么？ 总结2-2 * * * * * * * * 在确定各单元格的宽高时，由于表格的严格约束特点，需要注意： （1）同列单元格宽度由该列宽度最大的单元格决定。如果没有则默认与该列第一行单元格宽度一致。在布局时必须注意内容过长撑开单元格的情况，合理设置好各列列宽。 （2） 同行单元格的高度类似，但是请注意换行带来的高度变化。 * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 第三章 表格应用和布局 制作表格图文布局--公告栏页面 制作表格布局表单页面--登录页面 本章任务 使用表格显示数据 使用表格实现页面布局 本章目标 表格应用场合 论坛中应用表格 购物网站应用表格 为什么使用表格 门户网站应用表格 行 列 单元格 表格的基本结构 特点：通常情况下，同行的高度一致、同列的宽度一致 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代表行 下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列? 表格的跨行跨列 跨3列 跨3行 … … table width=200 border=1 tr td colspan=2学生成绩/td /tr tr td语文/td td98/td /tr tr td数学/td td95/td /tr /table … … 如何跨列 1、colspan 属性表示跨多少列 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、 该列单元格的内容就省略不写了 …… 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行 需求说明 制作页面 练习——简单表格 用2行3列的表格显示商品数据 需求说明 练习——跨行跨列表格 实现一个跨行跨列的商品类目表格