网页样式制作（拓展） 第3章 边框样式 运用表格嵌套制作网页.docxVIP

运用表格嵌套制作网页 1.目的 通过在网页文件插入表格进行页面布局，运用表格嵌套的方式制作导航，使学生了解并掌握表格布局的一般用法。 2.内容 制作如图6-15所示的网页，使用表格布局，页面居中，分为banner、导航、内容、页脚四大区域。导航8个栏目采用表中表平均分配宽度。 3.步骤 (1) 创建网页文件，在标题中输入“表格嵌套练习”并保存为文件名rw6.html； (2) 在网页中插入10行3列的表格； (3) 表格第1行合并所有列，并插入图像做banner，设置表格高度为图像的高度141px； td height=141 colspan=3 background=../2.jpg valign=bottom (4) 表格第2行合并所有列，在td单元格内插入1行8列的表格进行嵌套作导航。输入导航文字，代码如下： table width=780 border=1 align=center cellpadding=0 cellspacing=0 height=396 tr td height=141 colspan=3img src=../images/2.jpg width=780 height=141 //td /tr tr td height=35 colspan=3 table width=781 border=1 bgcolor=#99FF33 tr th width=86 height=27李白/th th width=84杜甫/th th width=93白居易/th th width=101王维/th th width=91孟浩然/th th width=92李商隐/th th width=90王勃/th th width=92韩愈/th /tr /table /td /tr tr td width=196 height=390 rowspan=7 bgcolor=#F1E752nbsp;/td td width=419 rowspan=7 bgcolor=#66FFFFnbsp;/td td bgcolor=#99FFCCnbsp;/td /tr tr td bgcolor=#99FFCCnbsp;/td /tr tr td bgcolor=#99FFCCnbsp;/td /tr tr td bgcolor=#99FFCCnbsp;/td /tr tr td bgcolor=#99FFCCnbsp;/td /tr tr td bgcolor=#99FFCCnbsp;/td /tr tr td width=162 height=49 bgcolor=#99FFCCnbsp;/td /tr tr td height=41 colspan=3 bgcolor=#99CCFFnbsp;/td /tr /table (5) 从第3行到第9行合并第1列、第2列； (6)适当调整第9行的高度； (7)合并最后一行所有列，作为页脚； (8)最后保存文件。 实践项目 1、按图6-17组织网站，其中文件夹images用于存放图片，rw6用于存放任务6网页，ztlx6用于存放拓展练习6网页； 图6-17实践项目6网站结构 2、制作首页index.html。 标题用“姓名，学号实践项目6”； 在网页中使用表格布局并居中； 去掉表格线，使用不同的背景颜色； 第一行合并单元格作banner，使用背景图像，设置表格宽度为背景图像宽度，单元格高度为背景图像高度； 在第一行单元格设置垂直对齐方式为底部对齐，在单元格内插入嵌套表格作导航。 3、在右侧单元格内输入“任务6”、“拓展练习6”，分别在新窗口打开链接rw6/rw6.html、tzlx6/tzlx6.html。效果见图6-18。 图6-18实践项目6效果 习题 1．caption标签用于定义表格的 2．表格中colspan属性用来表示，该属性的默认值为1 3．Th 标签用来定义表格的表头单元格，在此单元格的文字以方式显示 4．在一个最基本的表格元素中必须包含一组table标签，一组tr标签和一组____标签 5.按下图制作表格页面网站，如图6-19 图6-19表格页面