第3章 表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数)他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平格等元素

3.1.2 表格的基本语法

3.2 表格属性的设置

3.2.1 表格边框属性

语法：<table border="" bordercolor="" bordercolorlight =""bordercolordark ="">.</table>（1)border 属性。用于设置边框的粗细，单位是像素。
（2)bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和色英文名称。
（3)bordercolorlight 属性。用于设置表格亮边框，对表格左上边框生效。

（4）bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。

3.2.2 表格的宽度和高度属性

语法：<table width=" height="">.-</table>
（1）width。其单位可以是长度单位或百分比，用于定义表格的宽度。
（2)height。其单位可以是长度单位或百分比，用于定义表格的高度。
设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整

3.2.3 表格背景颜色与表格图像属性

语法：<table bgcolor=""buckground="">-.</table>
（1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
（2）background。设置背景图像，图像的路径可以是绝对路径或相对路径。
（3）同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性

语法：<table cellspacing="" cellpadding=""</table>
（1)cellspacing。值的单位为像素或百分比，默认值为2px。
（2)cellpadding。值的单位为像素或百分比。

3.2.6 表格水平对齐属性

通过设置表格标记的align 属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。

语法：

<table align="left| center | right">..</table>

3.2.7 设置表格的（tr）标记行的属性

<table align="center">

<tr align="left I center I right" valign="top I middle | bottom">

<td>…</td>

</tr>

<table>

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

1·单元格跨行

语法：

<td rowspan="行数">…</td>

说明：rowspan属性可以设置单元格跨行。通过rowspan="n"（n是正整数），可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td标记。

2.单元格跨列

使用单元格td标记的colspan属性可以设置单元格跨列合并。

语法：

<td colspan="列数">…</td>

说明：colspan属性可以设置单元格跨列。通过colspan="n”（n是正整数），可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除一1个td标记。【例3.7】设置表格单元格合并。

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

语法：<table>
<tr>
</tr>
<tr>
<td><table><tr>
</tr>
<！--单元格内嵌表格-->
</table>
</td>

</tr>

<tr>
</tr>
</table>

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

利用fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题.语法：<form>
<fieldset>
<legend alig="left I center | right">城标题内容</legend>
</fieldset>
</form>
说明：fieldset 标记没有属性，是成对标记。legend标记必须位于 fieldset标记内，也是成对标记：有一个对齐align 属性，属性值分别为left，center和right。

3.4.3 表单信息输入

1 单行文本输入框

2· 密码输入框

设置input 标记的type 属性值为password，可以实现向表单中插入一个密码输人框。密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“”所取代，这样设计可以保障用户输入的密码不被泄露。
语法：<input name="" type="password" maxlength="" size=""/>
说明：密码输入框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框相同。
3· 复选框

4 单选按钮

设置input 标记的type 属性值为radio，可以实现向表单中插人用单选按钮在网页上为某一选择设置多个单选项。
语法：<input name="" type=" radio" value="" checked/3
说明：单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value 属性取值应该不同。

5 图像按钮

6 提交按钮

设置 input 标记的type属性值为submit，可以实现向表单中插人一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法：<input name="" type="submit" value="提交"/>
说明：提交按钮的属性主要有 name和value

7 重置按钮

 设置input 标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法：<input name=""type="reset" value=""/>
说明：重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。

8 普通按钮

设置input 标记的 type 属性值为butom，可以实现向表单中插入一个普通按钮。普通技钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法：<input name="" type="button" value=""οnclick=""/>
说明：普通按钮的属性有name，value 和onclick

9 文件选择框

设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。
 

10 隐藏框

设置input 标记的type 属性值为hidden，可以实现向表单中插入一个隐藏框，用户提表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法：cinput name="" type="hidden" value=""/>
说明：隐藏框的属性有name和value

3.4.4 多行文本输入框

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和option标记来在表单中插入下拉菜单和列表项。
语法：<select name="" size="" multiple>
Coption ralue=""selected>文字信息1</ option>
<option value=“">文字信息2</option>
</select>
说明：select 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记、结构更为清晰。select 标记有 name,size 和multiple 等属性。option 标记有 value 利l selected 等属性。select 标记与option 标记必须配合使用。每一选项必须指定一个显示的文本和一个valne值，显示文本通常附在option 标记后面。