《网页前端技术》HTML任务五.ppt

案例三 用表格进行复杂网页的布局 利用表格来进行布局 表格嵌套 案例资讯 表格进行嵌套 一个表格内部可以嵌入另一个表格 表格嵌套 首先，网页的排版会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难 其次，浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页的内容。 网页布局 由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。这样一来各司其职，互不冲突。那么也就完成了网页的布局，可以合理安排网页中的文字、图片等元素 案例步骤 网页布局 记事本中代码如下： html head title网页布局/title /head body table align=center width=500 height=400 border=1 bordercolor=#00ff99 tbody trtd colspan=3 align=center网站名称/td /tr trtd width=30% height=25网站标题/td td colspan=2 align=right搜索框/td /tr trtd width=30%左边/td td width=40%中间/td td右边/td /tr trtd colspan=3 align=center网站底部信息/td /tr /tbody /table /body /html * * HTML 任务五 学会使用表格 案例分解 案例资讯 制作成绩表 制作课程表 用表格进行复杂网 页的布局 表格概述 表格的标题与表头 单元格的合并 表格嵌套 教学目的: 　 会使用表格的基本结构实现简单表格 　 会使用表格相关标签实现跨行、跨列的复杂表格 　 会使用表格相关设置进行美化修饰 教学重点： 表格的基本结构 　　 教学难点： 如何创建跨多行跨多列的表格 　　 案例一 制作成绩表 简单的表格的制作。 案例资讯 在HTML语言中，表格至少由table标签，tr标签和td标签这3对标签组成。table…/table标签中间将包括所有表格元素，表格元素主要有行、列、单元格等。 一、表格概述 表格的基本结构 表格是由指定数目的行和列组成的 行 列 单元格。 表格的布局 1、表格语法 table…/table 用于标志表格的开始和结束 包含表名和表格本身内容 tr标签：定义表格行，由单元格构成 td标签：定义表格行里的若干表格，表示列，嵌套使用 有一个常用属性border，值为0不显示边框。 2、表格属性 table标记属性： align：设置表格与页面对齐方式，取值有left、center和right background：设置表格的背景图像。 bgcolor:： 设置表格的背景颜色。 width：设置表格的宽度，单位默认为像素，也可以使用百分比形式。 height：设置表格的高度，单位默认为像素，也可以使用百分比形式。 cellpadding： 设置表格的一个单元格内数据和单元格边框间的边距，以像素为单位 cellspacing： 设置单元格之间的间距，以像素为单位。 tr标记 用于标志表格一行的开始和结束。常用参数属性： align： 设置行中文本在单元格内的对齐方式，取值有left、center和right。 background： 设置行中单元格的背景图像。 bgcolor：设置行中单元格的背景颜色。 td标记 用于标志表格内单元格的开始和结束，td标记应位于tr标记内部。常用参数属性： align：设置行内容在单元格内的对齐方式，取值有left、center和right。 background： 设置单元格的背景图像。 bgcolor： 设置单元格的背景颜色。 width： 设置单元格的宽度，单位为像素。 height： 设置单元格的高度，单位为像素。 3、表格结构 新建一个html文件，建立表格结构，要显示的内容放在td和/td标记之间，而tr和/tr标记之间的信息显示在同一行，标准表格构成结构如下： table tr tdcontert1/td tdcontent2/td /tr tr tdcontent3/td tdcontent4/td