第4章使用表格与表单.ppt

1、网页制作综合技术教程第第1部分部分 HTML网页设计网页设计 使用表格使用表格4.14.1使用表单使用表单4.24.2 使用表格可以清晰地显示列成表的数使用表格可以清晰地显示列成表的数据，例如如图据，例如如图4.1所示的是股票行情的数据列所示的是股票行情的数据列表。表。 在本章中，先介绍使用表格清晰地显示在本章中，先介绍使用表格清晰地显示数据的方法，各种与表格相关的数据的方法，各种与表格相关的HTML标记。标记。 同时在本章的最后，还会演示如何借助同时在本章的最后，还会演示如何借助于表格来进行页面布局，以便与本书后续章于表格来进行页面布局，以便与本书后续章节中的其他方法进行对比。节中的其他方法

2、进行对比。 图图4.1 使用表格显示数据使用表格显示数据4.1 4.1 使使 用用 表表 格格4.1.1 4.1.1 表格的基本结构表格的基本结构 单元格单元格 tr A1 A2 A1 A2 A3 A4A3 A4 /tr tr B1 B2B3 B1 B2B3 B4B4 /tr tr C1C2C3 C1C2C3 C4C4 /tr 图图4.2 基本表格基本表格4.1.2 4.1.2 合并单元格合并单元格 1 1左右合并单元格左右合并单元格 2 2上下合并单元格上下合并单元格 图图4.3 左右合并单元格左右合并单元格 图图4.4 上下合并单元格上下合并单元格 图图4.5 两个方向合并单元格两个方向合

3、并单元格4.1.3 4.1.3 设置对齐方式设置对齐方式 图图4.6 设置单元格大小设置单元格大小 图图4.7 设置单元格内容的居中对齐设置单元格内容的居中对齐4.1.4 4.1.4 设置表格背景色和边框颜色设置表格背景色和边框颜色图图4.10 设置背景色设置背景色4.1.5 cellpadding4.1.5 cellpadding属性和属性和cellspacingcellspacing属性属性图图4.11 设置单元格间距和单元格内容边距设置单元格间距和单元格内容边距4.1.6 4.1.6 完整的表格标记完整的表格标记图图4.12 设置表格行组设置表格行组 图图4.14 设置表格的标题设置表格

4、的标题4.1.7 4.1.7 用表格进行页面布局的局限性用表格进行页面布局的局限性图图4.15 网页顶部效果网页顶部效果4.2 4.2 使使 用用 表表 单单 4.2.1 4.2.1 表单的用途和原理表单的用途和原理 图图4.27 使用表单元素的留言簿页面使用表单元素的留言簿页面图图4.28 表单的基本工作原理表单的基本工作原理4.2.2 4.2.2 表单类型表单类型 1 1文本输入框文本输入框 2 2单选按钮单选按钮 3 3复选按钮复选按钮 图图4.29 文本输入框文本输入框 图图4.30 单选按钮单选按钮4 4密码输入框密码输入框 图图4.31 复选按钮复选按钮 图图4.32 密码输入框密码输入框5 5按钮按钮 图图4.33 按钮按钮 图图4.34 图像按钮图像按钮6 6多行文本框多行文本框图图4.35 多行文本框多行文本框7 7列表框列表框 图图4.36 下拉列表框下拉列表框 图图4.37 列表框列表框