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

3.1 表格概述

表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在页面设计中能将网页分成多个任意的矩形区域。

3.1.1 表格的结构

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

3.1.2 表格的基本语法

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

<table></table>:表格标记

<caption></caption>：表格标题标记

<th></th>：表格表头标记

<tr></tr>：表格的行标记

<td></td>：表格的列标记

示例：

<table>
			<caption>学生名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

3.2 表格属性的设置

表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。

3.2.1 表格边框属性

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

border属性，用于设置边框的粗细，单位是像素。

bordercolor属性，用于设置表格边框的颜色，可以用rgb函数、十六进制数和颜色英文名称。

bordercolorlight属性，用于设置表格亮边框，对于表格左上边框生效。

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

示例：

<table border="2px">
			<caption>学生名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

设置边框颜色示例：

		<table border="2px" bordercolor="#0000ff">
			<caption>学生名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

3.2.2 表格的宽度和高度属性

通过设置width属性和height属性可以设置表格的宽度和高度。

语法：

<table width=" " height=" ">...</table>

以下是长度单位的示例：

		<table width="200px" height="150px">
			<caption>学生名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

以下是百分比单位示例：响应式布局，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。

<table width="20%" height="20%">
			<caption>学生名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。

语法：

<table bgcolor=" " background=" ">...</table>

以下是改变表格背景颜色示例：

<table bgcolor="#aaaaff">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

以下是设置表格背景图片示例：

		<table background="img/1.jpg">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

3.2.4 表格边框样式属性

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

语法：

<table frame=" "rlues=" "> 内容 </table>

说明：frame和rlues属性值及说明表如下：

示例：

<table frame="hsides" rules="all">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

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

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

语法：

<table cellspacing=" "cellpadding=" "

</table>

设置间距示例：

		<table border="2px" cellspacing="10px">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

设置边距示例：

		<table border="2px" cellspadding="10px">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

3.2.6 表格水平对齐属性

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

示例：

<table align="center">
		            <caption>学生名单</caption>
		            <tr>
		                <th>序号</th>
		                <th>姓名</th>
		                <th>性别</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td>张三</td>
		                <td>男</td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td>李四</td>
		                <td>女</td>
		            </tr>
		        </table>

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

通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有对齐方式有居左对齐、居中对齐、居右对齐三种。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。

示例：

<table border="2px" width="200px" height="150px">
			<caption>学生名单</caption>
			<tr align="left">
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr align="right">
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
		</table>

<table border="2px" width="200px" height="150px">
							<caption>学生名单</caption>
							<tr align="left" valign="top">
								<th>序号</th>
								<th>姓名</th>
								<th>性别</th>
							</tr>
							<tr align="center" valign="middle">
								<td>1</td>
								<td>张三</td>
								<td>男</td>
							</tr>
							<tr align="right" valign="bottom">
								<td>2</td>
								<td>李四</td>
								<td>女</td>
							</tr>
						</table>

3.2.8 设置单元格的属性

设置张三为顶部对齐示例：

	<table border="2px" width="200px" height="150px">
					<caption>学生名单</caption>
					<tr align="left" valign="top">
						<th>序号</th>
						<th>姓名</th>
						<th>性别</th>
					</tr>
					<tr align="center" valign="middle">
						<td>1</td>
						<td align="left" valign="top">张三</td>
						<td>男</td>
					</tr>
					<tr align="right" valign="bottom">
						<td>2</td>
						<td>李四</td>
						<td>女</td>
					</tr>
				</table>

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

表格的列（td）标记的属性可以设置表格单元格的显示风格。上下合并是跨行，左右合并是跨列。

3.2.9.1 单元格跨行

rowspan属性可以设置单元格跨行。

3.2.9.2 单元格跨列

colspan属性可以设置单元格跨列。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置单元格跨行、跨列属性</title>
	</head>
	<body>
		<h3 align="center">设置跨行、跨列属性</h3>
		<table border="1" width="500px" align="center" bordercolor="#3366ff">
			<caption>专业研讨会日程安排</caption>
			<tr align="center">
				<td colspan="2">上午</td>
				<td colspan="2">下午</td>
			</tr>
			<tr>
				<td>8:00-10:00</td>
				<td>10:10-12:00</td>
				<td>14:00-16:00</td>
				<td>16:10-18:00</td>
			</tr>
			<tr align="center">
				<td rowspan="2">学校领导讲话</td>
				<td>大会主题报告</td>
				<td>行业企业专题报告</td>
				<td rowspan="2">总结报告</td>
			</tr>
			<tr align="center">
				<td>专家报告</td>
				<td>分组讨论</td>
			</tr>
			<tr align="center">
				<td colspan="4">全天参观人工智能实训中心</td>
			</tr>
		</table>
	</body>
</html>

3.3 表格嵌套

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套表格布局页面</title>
		<style>
			body{font-size:36px;}
		</style>
	</head>
	<body>
		<h4 align="center">嵌套表格布局页面</h4>
		<table width="660px" border="1" align="center" bordercolor="#3333ff">
			<tr>
				<td height="100">
					<table width="100%" border="1" bordercolor="red">
						<tr height="50" align="center">
							<td rowspan="2" width="100">logo</td>
							<td>广告条</td>
						</tr>
						<tr height="50" align="center">
							<td>导航</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="300">
					<table width="100%" border="1" bordercolor="#33ff99">
						<tr align="center">
							<td height="300" width="30%">左栏目</td>
							<td height="300" width="70%">正文内容</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr align="center">
				<td height="100">版权信息</td>
			</tr>
		</table>
	</body>
</html>

3.4 表单

HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。

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标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果,或者可创建一个子表单来处理这些元素。legend标记为fieldset 标记定义域标题。

语法:
<form>
          <fieldset>
                <legend alig="left | center | right">域标题内容</legend>
        </feldset>
</form>
说明:fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记:有一个对齐 align属性，属性值分别为left，center 和 right。

<form>
			<fieldset>
				<legend align="center">个人信息</legend>
				姓名：<input type="text" name="user"/>
				性别：
				<input type="radio" name="sex" value="male"/>男性
				<input type="radio" name="sex" value="female"/>女性
				爱好：
				<input type="checkbox" name="c1" value="sing" checked/>唱歌
				<input type="checkbox" name="c2" value="dance" />跳舞
				<input type="checkbox" name="c3" value="basketball" />篮球
				<input type="checkbox" name="c4" value="run" />长跑
				<br/>
				请上传佐证材料：<input type="file"/>
			</fieldset>
			<fieldset>
				<legend align="center">教学评价</legend>
				请选择课程：
					<select multiple>
						<option value="">网页</option>
						<option value="">Java</option>
						<option value="">安卓</option>
						<option value="">PS</option>
						<option value="">网络</option>
					</select>
					请输入您的宝贵意见：
					<textarea rows="4" cols="30"></textarea>
			</fieldset>
		</form>

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务响应。表单中输入信息的标记是imput 标记，可以输入一行信息。imput 标记是单个标记。

语法：
<input name=" " type =" "/>
说明:imput 标记的属性主要有 name 和 type 等，输入类型是由类型 type 属性定义的type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。

3.4.3.1 单行文本输入框

设置input 标记的 type 属性值为 text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。

语法:

<input name=" " type =" text" maxlength=" " size=" " value=" " readonly/>

说明:单行文本输人框的主要属性有name，maxlength，size，value和readonly。

<form>
			用户名：<input type="text" name="user"/>
		</form>

3.4.3.2 密码输入框

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

<form>
			用户名：<input type="text" name="user"/>
			密码：<input type="password" name="password"/>
		</form>

3.4.3.3 复选框

设置input标记的type属性值为checkbox,可以实现向表单中插人一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name= " " type= "checkbox" value =" " checked/>
说明:复选框的主要属性有name，value和checked，其中checked 属性用于设置初始预选项。

由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性应该不同，value属性值也应该不同。

<form>
			姓名：<input type="text" name="user"/>
			爱好：
			<input type="checkbox" name="c1" value="sing" checked/>唱歌
			<input type="checkbox" name="c2" value="dance" />跳舞
			<input type="checkbox" name="c3" value="basketball" />篮球
			<input type="checkbox" name="c4" value="run" />长跑
		</form>

3.4.3.4 单选按钮

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

<form>
			姓名：<input type="text" name="user"/>
			性别：
			<input type="radio" name="sex" value="male"/>男性
			<input type="radio" name="sex" value="female"/>女性
			爱好：
			<input type="checkbox" name="c1" value="sing" checked/>唱歌
			<input type="checkbox" name="c2" value="dance" />跳舞
			<input type="checkbox" name="c3" value="basketball" />篮球
			<input type="checkbox" name="c4" value="run" />长跑
		</form>

3.4.3.5 图像按钮

设置 imput标记的 type属性值为 image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过src属性加载图像。
语法:
<input name =" " type =" image" src=" " width=" " height=" "/>

说明:图像按钮主要属性有name，sre，width和height.

<form>
			<input type="image" src="img/2.jpg"/>
		</form>

3.4.3.6 提交按钮

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

说明:提交按钮的属性主要有name和value。

在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“提交查询钮”。所以一定要给value 属性赋值。

<form>
			用户名：<input type="text" name="user"/>
			密码：<input type="password" name="password"/>
			<br/>
			<input type="submit" value="登录"/>
		</form>

3.4.3.7 重置按钮

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

<form>
			用户名：<input type="text" name="user"/>
			密码：<input type="password" name="password"/>
			<br/>
			<input type="submit" value="登录"/>
			<input type="reset"/>
		</form>

3.4.3.8 普通按钮

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

说明:普通按钮的属性有 name，value 和onclick。

<form>
			用户名：<input type="text" name="user"/>
			密码：<input type="password" name="password"/>
			<br/>
			<input type="submit" value="登录"/>
			<input type="reset"/>
			<input type="button" value="注册" 
				onclick="javascript:alert('注册新用户')"/>
		</form>

3.4.3.9 文件选择框

设置input 标记的type 属性值为file，可以实现向表单中插入一个文件选择框。
语法:
<input name=" " type=" file" value =""/>
说明:
name，定义input标记的名称。页面上会自动添加一个文本输人框和一个“浏览…按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。

<form>
			姓名：<input type="text" name="user"/>
			性别：
			<input type="radio" name="sex" value="male"/>男性
			<input type="radio" name="sex" value="female"/>女性
			爱好：
			<input type="checkbox" name="c1" value="sing" checked/>唱歌
			<input type="checkbox" name="c2" value="dance" />跳舞
			<input type="checkbox" name="c3" value="basketball" />篮球
			<input type="checkbox" name="c4" value="run" />长跑
			<br/>
			请上传佐证材料：<input type="file"/>
		</form>

3.4.3.10 隐藏框

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

<form>
			<input type="hidden" name="abc" value="1223"/>
		</form>

3.4.4 多行文本输入框

textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。

语法：

<textarea name=" " ros=" " cols=" " wrap=" "/>初始信息内客</textarea>

说明:多行文本输人框textarea标记是成对标记，其主要属性有name，rows，cols和wrap等，其属性、取值及说明如下表所示。默认情况下，当用户在文本区域中输入文本后，浏览器会将它们按照输入时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。

<form>
			请输入您的宝贵意见：
			<textarea rows="4" cols="30"></textarea>
		</form>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和option 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size=" " multiple>

<option value="" selected>文字信息1</ option>

<option value="">文字信息 2</option>

......

</select>
说明:select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size 和multiple 等属性。option 标记有 value 和selected 等属性。select标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 valu值，显示文本通常附在 option 标记后面。

	<form>
			请选择课程：
			<select multiple>
				<option value="">网页</option>
				<option value="">Java</option>
				<option value="">安卓</option>
				<option value="">PS</option>
				<option value="">网络</option>
			</select>
			请输入您的宝贵意见：
			<textarea rows="4" cols="30"></textarea>
		</form>

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

案例一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室----联系我们</title>
		<style type="text/css">
		.chu{
			font-weight:bold;
		}
		.zi1{
			font-family:"微软雅黑"
			font-size:20px;
			font-weight:bold;
			color:#ED630A;
		}
		.zi2{
			font-family:"微软雅黑"
			font-weight:bold;
			color:#F60;
			text-decoration:underline;
		}
		.zibai{
			font-family:"微软雅黑"
			color:#FFF;
		}
		body{
			background-image:url(img/bj.jpg);
		}
		</style>
	</head>
	<body>
		<table width="1190" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
						<tr>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
								<img src="img/logo.jpg" alt="" width="100" height="63"/></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="20" cellpadding="0">
						<tr>
							<td height="318">&nbsp;</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellspacing="0" cellspadding="20">
									<tr>
										<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
									</tr>
									<tr>
										<td height="196" bgcolor="#FFAF03">
											<p class="zibai">地址：广东省江门市XXXXxXXX<br/>
											电话：0750-XXXXXX<br/>
											传真：0750-XXXXXX<br/>
											QQ:12345678<br/>
											电子邮箱：<br/>
											123@163.com<br/>
											工作室网站：<br/>
											www.XXXX.com</p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
									</tr>
									<tr>
										<td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发公司。<br/>
										专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
										达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程......</p>
										<p class="zibai">&nbsp;</p>
										<p class="zibai chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280">
								<table width="100%" border="0" cellspacing="0" cellspadding="20">
									<tr>
										<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
									</tr>
									<tr>
										<td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队：</p>
										<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最合适的设计方案。</p>
										<p class="zi2">我们的承诺：</p>
										<p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司特点，设计出属于客户......</p>
										<p class="zibai">&nbsp;</p>
										<p class="zibai"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			</table>
	</body>
</html>

案例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册信息</title>
		<style type="text/css">
		fieldset{
			width:700px;
		}
		</style>
	</head>
	<body>
		<form action ="" method=" post" enctype =" multipart/form -data" name =" form1" id ="form1">
		  <fieldset>
		  <legend>用户注册信息</legend>
		<table width="600" border="0" align=" center" cellpadding="0" cellspacing="0">
		<tr>
		   <td width="200" align="right">用户名:</td>
		<td><input type="text" name="textfield" id="textfield" /></td>
		</tr>
		<tr>
		  <td width="200" align="right">密码:</td>
		<td><input type=" password" name ="textfield2" id="textfield2" /></td>
		</tr>
		<tr>
		   <td width="200" align="right">确认密码:</td>
		<td><input type=" password" name="textfield3" id="textfield3" /></td>
		</tr>
		<tr>
		  <td width="200"align="right">性别:</td>
		  <td> 
		  <input name ="radio" type ="radio" id="radio" value="radio" checked="checked" />
		  男< img src="img/Male.gif" width="22" height="21" align="absmiddle" />
		    <input type=" radio" name ="radio" id="radio2" value ="radio2" />
		  女< img src="img/Female.gif" width="23" height="21" align="absmiddle" /></td>
		</tr>
		<tr>
			<td width="200" align=" right">出生年月:</td>
			<td>
				<input name="textfield4" type="text" id="textfield4" size="12"/>年
			<select name="select" id="select">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
				<option>11</option>
				<option>12</option>
			</select>
				月</td>
		</tr>
		<tr>
		   <td width="200" align="right"> 业余爱好：</td>
		   <td><input type="checkbox" name="checkbox" id="checkbox"/>看书
		   <input type="checkbox" name="checkbox2" id="checkbox2"/>上网
		   <input type="checkbox" name="checkbox3" id="checkbox3"/>打球
		   </td>
		</tr>
		<tr>
			<td width="200" align="right"> 相片：</td>
			<td height="25"><input type="file