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

3.1 表格概述

3.1.1 表格的结构
|

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。

3.1.2 表格的基本语法

在HTML中，常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和<td>。

3.2 表格属性的设置

3.2.1 表格边框属性

设置表格标记中的边框属性可以改变表格的外观。

语法：
<table border=" " bordercolor="  "bordercolorlight =" " hordercolordark="">...</table>

3.2.2 表格的宽度和高度属性

 通过设置width属性和height，属性可以设置表格的宽度和高度。语法:
<table width = " height="",,,</table>

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor= " " background="">...</table>

3.2.4 表格边框样式属性

设置表格标记中的fame属性可以改变表格边框的样式;设置表格标记中的rules属性可以改变表格内部边框的样式。
语法:

<table frame =""rules="">…内容</table>

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部框之间的距离。
语法:
<table cellspacing=" " cellpadding="</table>

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。
<table align = "left1 center | right" >...</table>

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

通过tr标记的 align属性可以设置行内容的水平对齐方式。
语法:
<table align= " center" >
<tr align = " left | center | right" valign = " top | middle | bottom" >
<td>...</td></tr>
......</table>

3.2.8 设置单元格的属性

表格的列(td)标记的属性可以设置表格单元格的显示风格。

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

3.2.9.1 单元格跨行

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

语法:
<td rowspan="行数"></td>
3.2.9.2 单元格跨列

使用单元格td 标记的colspan属性可以设置单元格跨列合并。
语法:
<td colspan="列数">…</td>

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。
语法:<table>
<tr>
.....
</tr><tr>
<td> <!--单元格内嵌表格-->
<table><tr>
......
</tr>
</table>

</td></tr><tr>
……
</tr></table>

3.4 表单

3.4.1 表单标记

表单 form标记为成对标记，以<form>开始和</form>结束。

语法:
<form method=" post" action="">
<input type=" text" name=""/>
<textarea name="" rows="" cols="">……</textarea><select name="">
<option value=""selected></option><option value=""></option>
</select>
</form>

3.4.2 定义域和域标题

利用 fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。
语法:<form>
<fieldset>
<legend alig=" left | center | right">
域标题内容</legend></fieldset></form>

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器
响应。
语法:    <input name="" type=""/>
3.4.3.1 单行文本输入框

设置input 标记的type属性值为text，可以实现向表单中插入一个单行文本框。
语法:
<input name=" " type=" text" maxlength = "" size ="" value ="" readonly/>
3.4.3.2 密码输入框

设置input 标记的 type属性值为password，可以实现向表单中插人一个密码输入框。
语法:
<input name = " " type =" password" maxlength = "" size=""/>
3.4.3.3 复选框

设置input 标记的type属性值为checkbox，可以实现向表单中插人一个复选框。
语法:
<input name=" " type=" checkbox" value="" checked/>
3.4.3.4 单选按钮

设置input 标记的type属性值为radio，可以实现向表单中插人一个单选按钮。
语法:
<input name=" " type=" radio" value="" checked/>            
3.4.3.5 图像按钮

设置input 标记的type属性值为image，可以实现向表单中插人一个图像按钮。
语法:
<input name=" " type="image" src=" "width=" "height=" "/>
3.4.3.6 提交按钮

设置input 标记的type属性值为submit，可以实现向表单中插人一个提交按钮。
语法:
<input name=" " type=" sbmit" value="提交/>
3.4.3.7 重置按钮

设置input 标记的type属性值为reset，可以实现向表单中插人一个重置按钮。
语法:
<input name=" " type="reset" value=" "/>
3.4.3.8 普通按钮

设置input 标记的type属性值为button，可以实现向表单中插人一个普通按钮。
语法:
<input name=" " type=" button" value=" "οnclick=" "/>
3.4.3.9 文件选择框

设置input 标记的type属性值为file，可以实现向表单中插人一个文件选择框。
语法:
<input name=" " type=" file" value=" "/>
3.4.3.10 隐藏框

设置input 标记的type属性值为hidde，可以实现向表单中插人一个隐藏框。
语法:
<input name=" " type=" hidde" value=" "/>

3.4.4 多行文本输入框

textarea 标记可以向表单中插入多行文本输入框。

语法:

textarea name ="" rows="" cols="" wrap=""/>初始信息内容</textarea>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。
语法:    
<select name="" size="" multiple>
<option value=""selected>文字信息1</option><option value="">文字信息2</option>
......
</select>

3.5 综合案例——表格与表单

案例1--达维工作室“联系我们”

代码：

运行效果：

案例二