《网页设计与制作》第3章_第1页
《网页设计与制作》第3章_第2页
《网页设计与制作》第3章_第3页
《网页设计与制作》第3章_第4页
《网页设计与制作》第3章_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第三章表格应用和布局超链接的基本语法？如何创建锚链接？表单的基本语法？表单元素包括哪些？语法分别是什么？表单中只读和禁用对应的属性是什么？回顾与作业点评制作表格图文布局--公告栏页面制作表格布局表单页面--登录页面本章任务使用表格显示数据使用表格实现页面布局本章目标表格应用场合论坛中应用表格购物网站应用表格为什么使用表格门户网站应用表格行列单元格表格的基本结构特点：通常情况下，同行的高度一致、同列的宽度一致<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><tableborder="2">

<tr><td>1行1列的单元格</td><td>1行2列的单元格</td><td>1行3列的单元格</td></tr>

<tr><td>2行1列的单元格</td><td>2行2列的单元格</td><td>2行3列的单元格</td></tr></table></body>……如何创建表格<table>代表表格的开始，border="2"表示边框宽度为2表格的第1行，有3条数据，<tr>…</tr>代表行表格的第2行，有3条数据，<tr>…</tr>代表行操作演示1：表格的基本结构下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?表格的跨行跨列跨3列跨3行……<tablewidth="200"border="1"><tr><tdcolspan="3">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr></table>……如何跨列1、colspan属性表示跨多少列2、该行其他单元格的内容就省略不写了操作演示2：跨列的表格……<tablewidth="500"border="1"><tr><tdrowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr>

......代码同上.两行内容..</table>……如何跨行1、rowspan

属性表示跨多少行2、该列单元格的内容就省略不写了操作演示3：跨行的表格……<tablewidth="200"border="1"><tr><tdcolspan="3">学生成绩</td></tr><tr><tdrowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</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>年终数据报表</caption><thead

style="background:#0FF"><tr><th>月份</th><th>收入（RMB）</th></tr>

</thead><tbody

style="background:#9CC"><tr><td>1月</td><td>100</td></tr><tr><td>2月</td><td>80</td></tr><!--省略3-6月的类似HTML代码-->

</tbody><tfoot

style="background:#FF0"><tr><td>平均月收入</td><td>196.67</td></tr><tr><td>总计</td><td>1180</td></tr>

</tfoot></table>……<thead>标签对应报表的页眉

<tbody>对应报表的数据主体

<tfooter>对应报表的页脚

操作演示5：thead标签练习——表格分组标签的使用需求说明实现一个按地点和时间汇总的年终报表

完成时间：20分钟数据分组的表格

表格布局的应用场合表格布局图文布局，数据规则整齐表单布局，同样要求数据规则整齐如何实现图文布局2-1实现步骤如何实现图文布局2-2实现步骤……<tableborder="1px"><tr><tdcolspan="2"><imgsrc=“…"alt="公告栏"/></td></tr><tr><tdrowspan="4"><imgsrc=“…"alt="公告左侧图"/></td><td>大学要求老师开网店</td></tr><tr><td>安全锤网上大热销</td></tr>……</tr></table>……整个是5行2列的表格,实际布局时border=“0”隐藏边框公告栏：跨2列图片：跨4行操作演示6：图文布局需求说明根据提供的素材实现练习——贵美商品分类页完成时间：25分钟使用表格实现图文布局如何实现页面中登录表单的布局？如何实现表单布局3-1问题：结构简单，但不美观实际页面中的登录表单布局如何实现表单布局3-2实际应用，需要几行几列的表格布局？如何实现表单布局3-3<formmethod="post"action="login_success.htm"><table><tr><td><imgsrc="images/title_login_2.png"alt="alt"/></td><tdcolspan="2"> </td></tr><tr><td></td><td>会员名:</td><td><inputname=“sname”…（可包含….）</td>…代码同“会员名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整体布局：4行3列的表格图片后的内容跨2列，内容用“空格”填充图片按钮跨2列操作演示7：贵美登录表单使用表格进行布局对显示数据有什么要求？实现思路是什么？小结2-1使用场合：数据显示要求较为规整，符合表格布局的特点布局的实现思路：需要几行几列的表格？哪些单元格有跨行或跨列？编写表格代码实现注意：1、同列单元格宽度由该列宽度最大的单元格决定2、同行单元格宽度由该行高度最高的单元格决定小结2-2同列单元格宽度由该列宽度最大的单元格决定，要防止内容过长撑开单元格同行单元格同理，注意换行带来的高度影响如何用表格实现下图布局？嵌套布局2-1对于复杂的页面，如使用表格则必须采用多层嵌套嵌套表格布局的缺点：代码量大层次结构也相对复杂不利于Goole等搜索引擎搜索查找数据表格布局仅适用于：规则的数据显示表单页面嵌套布局2-2表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习）操作演示8：嵌套布局需求说明制作贵美注册页面练习——制作贵美注册页完成时间：25分钟1、先考虑使用几行几列的表格2、单元

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论