第6章 表格与表单_补充案例.docVIP

第1章 Java开发入门 PAGE 22 PAGE 16 第六章 补充案例 案例6-1 创建青花瓷表格 一、案例描述 考核知识点 创建表格的基本语法格式 练习目标 了解表格的创建原理 掌握创建表格的基本语法 掌握表格标记及其相关属性 复习背景属性 需求分析 制作网页时，为了使网页中的元素有条理地显示，经常需要使用表格对网页中的元素进行规划。同时，为了美化页面，常常会使用背景属性来对表格做修饰。为了让初学者掌握创建表格的基本方法，接下来，通过创建一个两行两列的青花瓷表格的案例做具体演示。 案例分析 最终实现效果，如图6-1所示。 青花瓷表格效果 分析效果图，具体实现步骤如下： 创建一个两行两列的表格。 为表格整体设置背景属性。 在第一行第一列插入素材图片。 二、案例实现 新建HTML文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title创建带背景的表格/title /head body table width=400px height=200px border=1 align=center background=images/bg.gif tr td img src=images/elva3.jpg / /td td我是第一行第二列/td /tr tr td我是第二行第一列/td td我是第二行第二列/td /tr /table /body /html 保存后，在火狐浏览器中预览，效果如图6-2所示。 青花瓷表格 注意： 创建表格的基本标记为table/table、tr/tr、td/td，默认情况下，表格的边框为0，宽度和高度靠其自身的内容来支撑。 案例6-2 NBA总决赛统计表 一、案例描述 考核知识点 td标记属性 练习目标 掌握合并单元格的方法 理解tr标记的常用属性 理解td标记的常用属性 需求分析 当多个单元格中的内容相同时，为了避免内容重复，就需把它们合并为一个单元格。为了让初学者掌握合并单元格的基本方法，接下来，通过创建一个NBA总决赛统计表格的案例做具体演示。 案例分析 最终实现效果，如图6-3所示。 NBA总决赛统计表效果 分析效果图，具体实现步骤如下： 创建一个8行3列，边框为5像素的表格。 合并竖直方向内容相同的单元格，如：马刺队、热火队、5次、3次。 合并水平方向内容相同的单元格，如：比赛解说部分。 为马刺队所属单元格添加背景图片、背景颜色。 为热火队所属单元格添加背景图片、背景颜色。 二、案例实现 新建HTML文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleNBA总决赛球员统计表/title /head body table width=400px height=150px border=5 align=center cellspacing=0 tr align=center td球队/td td球员/td td夺冠次数/td /tr tr align=center td rowspan=3 background=images/maci.jpg马刺队/td td bgcolor=#f6f5f5邓肯/td td rowspan=3 bgcolor=#f6f5f55次/td /tr tr align=center !--删除了 td马刺队/td-- td bgcolor=#f6f5f5帕克/td !--删除了 td5次/td-- /tr tr align=center !--删除了 td马刺队/td-- td bgcolor=#f6f5f5吉诺比利/td !--删除了 td5次/td-- /tr tr align=center td rowspan=3 backgrou