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

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

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

(1)table标记是成对标记，<table>表示表格开始，</table>表示表格结束。

(2)caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用caption 标记可以给表格添加标题，该标题应位于table 标记与t标记之间的位置。
(3)t(Table Row)标记是成对标记，<t>表示行开始，</t>表示行结束。
(4)th(Table Heading表头)标记是成对标记，<th>表示表头开始，</t>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说网贡设计与表头文字内容一般居中、加粗显示。

(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以<td>结束表头可以用 山 标记定义，也可以用 d 标记定义，但<td></td>两标记之间的内容不自动
在一个表格中，可以插人多个口标记，表示多行，一组<t></t>标记表示插入一行中、不加粗。一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等

3.2 表格属性设置

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

3.2.1 表格边框属性

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

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

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

3.2.2 表格的宽度和高度属性

通过设置width属性和height，属性可以设置表格的宽度和高度，语法:
<table width= " height =" " >…</table>
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度

(2)height。其单位可以是长度单位或百分比，用于定义表格的高度。

设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整

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

 

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

设置表格的bgeolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor= " " background = " " >….</table>
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。

(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

<table bgcolor="#aaaaff" >
					<caption>23软件1班名单</caption>
					<tr>
						<td>序号</td>
						<td>姓名</td>
						<td>性别</td>
					</tr>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>男</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>女</td>

<table background ="img/7.png">
						<caption>23软件1班名单</caption>
						<tr>
							<td>序号</td>
							<td>姓名</td>
							<td>性别</td>
						</tr>
						<tr>
							<td>1</td>
							<td>张三</td>
							<td>男</td>
						</tr>
						<tr>
							<td>2</td>
							<td>李四</td>
							<td>女</td>

 

3.2.4 表格边框样式属性

设置表格标记中的fame属性可以改变表格边框的样式;设置表格标记中的mles属性可以改变表格内部边框的样式。
语法:
<table frame="" rules="">…内容.</table>

 1.

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

 

 2.

<table border ="2px" >
				<caption>23软件1班名单</caption>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>

 

3.

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

 

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框鈷灵之间的距离。
语法:<table cellspacing=" " cellpadding=" "</table>
(1)cellspacing。值的单位为像素或百分比，默认值为2px。
(2)cellpadding。值的单位为像素或百分比。

1. 

<table  border="2px" cellspacing="4px">
				<caption>23软件1班名单</caption>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>

 

 2.

<table  border="2px" cellpadding="5px">
				<caption>23软件1班名单</caption>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>

 

3.2.6 表格水平对齐属性

通过设置表格标记的aign属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。语法:<table align=" leftl center | right" >…</table>

3.2.7 设置表格的(tr)标记行的属性

通过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过t标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
<table align = " center" >
<tr align=" left | center | right" valign=" top | middle l bottom" >
<td>...</td>
</tr>  </table>

说明:left表示设置行内容居左对齐;center表示设置行内容居中对齐;right表示设行内容居右对齐。top表示设置行内容顶部对齐;midde表示设置行内容居中对齐;botter表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。

<table  align='center'>
				<caption>23软件1班名单</caption>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>

 

 2.

<table >
				<caption>23软件1班名单</caption>
				<tr align="left">
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
				<tr align ="center">
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr align="right">
					<td>2</td>
					<td>李四</td>
					<td>女</td>

 

 3.

<table  border ="2px" width="300px" height ="200px">
				<caption>23软件1班名单</caption>
				<tr align="left" valign="top">
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</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>

3.2.8 设置单元格的属性

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

<table  border ="2px" width="300px" height ="200px">
				<caption>23软件1班名单</caption>
				<tr align="left" valign="top">
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
				</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>

 

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

1.单元格跨行

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

语法:<id rowspan="行数">…</td>说明:rowspan属性可以设置单元格跨行。通过rowspan=”n”(n是正整数)，可以置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，td 标记。

2.单元格跨列
使用单元格td标记的cospan属性可以设置单元格跨列合并。
语法:
<td colspan="列数" >…</td>
说明:colspan属性可以设置单元格跨列。通过colspan=”n"(n是正整数)，可以设某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。

3.3 表格嵌套

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

3.4 表单

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

3.4.1 表单标记

• 定义：<form> 标签用于创建HTML表单，用于收集用户输入的数据。
• 属性：
  • action：提交表单时要发送数据的URL。
  • method：发送表单数据的方法，通常是 GET 或 POST。
  • enctype：用于文件上传时的编码类型，通常为 multipart/form-data。
  • name：表单的名称，用于识别表单。

3.4.2 定义域和域标题

• 定义域：表单中的每一个输入控件都是一个域。
• 域标题：可以使用 <label> 标签来定义输入控件的标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
			<fieldset>
				<legend>个人信息</legend>	
			
		姓名：<input typoe="text" name="name"/>
							性别：
							<input type="radio" name="r1" value="male"/>男
							<input type="radio" name="r1" value="female"/>女
							爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
							<input type ="checkbox" name="n1" value="dance"/>跳舞
							<input type ="checkbox" name="n2" value="basketball"/>打篮球
							<input type ="checkbox" name="n3" value="football"/>足球
							<input type ="checkbox" name="n4" value="run"/>长跑
							<br/>
							</fieldset>
		<fieldset>					
		<legend>其他信息</legend>							
		请输入你的宝贵意见
		<textarea name="info" rows="4" clos="50" /></textarea>
		<br/>
		请选择你的职业规划
		<select name="abc" multiple>
			<option value="s1">前端</option>
			<option value="s2">后端</option>
			<option value="s3">运维</option>
			<option value="s4">测试</option>
		</select>
		</fieldset>
		</from>
	</body>
</html>

 

3.4.3 表单信息输入

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

3.4.3.1 单行文本输入框

• 定义：用于输入单行文本。
• 示例：

• <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
			用户名：<input type="text"/ name="user"/>
		</from>
		
		
	</body>
</html>

 

3.4.3.2 密码输入框

• 定义：用于输入密码，输入的字符会被隐藏。
• 示例：

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
			用户名：<input type="text"/ name="user"/>
			用户类型：<input type="text" name="usertype" value="普通用户"readonly/>
            密码：<input type="password" name="password"/>
		</from>
	</body>
</html>

 

3.4.3.3 复选框

• 定义：用于勾选多个选项。
• 示例：

  <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
  <label><input type="checkbox" name="hobby" value="sports"> 运动</label>

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
			姓名：<input typoe="text" name="name"/>
			爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
			<input type ="checkbox" name="n1" value="dance"/>跳舞
			<input type ="checkbox" name="n2" value="basketball"/>打篮球
			<input type ="checkbox" name="n3" value="football"/>足球
			<input type ="checkbox" name="n4" value="run"/>长跑
		</from>
	</body>
</html>

3.4.3.4 单选按钮

• 定义：用于从多个选项中选择一个。
• 示例：

  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
			姓名：<input typoe="text" name="name"/>
			性别：
			<input type="radio" name="r1" value="male"/>男
			<input type="radio" name="r1" value="female"/>女
			爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
			<input type ="checkbox" name="n1" value="dance"/>跳舞
			<input type ="checkbox" name="n2" value="basketball"/>打篮球
			<input type ="checkbox" name="n3" value="football"/>足球
			<input type ="checkbox" name="n4" value="run"/>长跑
		</from>
	</body>
</html>

 

3.4.3.5 图像按钮

• 定义：用于创建一个图形按钮，用户可以点击。
• 示例：

  <input type="image" src="submit.gif" alt="Submit">

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
				用户名：<input type="text"/ name="user"/>
				用户类型：<input type="text" name="usertype" value="普通用户"readonly/>
				密码：<input type="password" name="password"/>	
		<input type="image" src="img/start_game.png">
	</body>
</html>

3.4.3.6 提交按钮

• 定义：用于提交表单。
• 示例：

  <input type="submit" value="提交">

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
		用户名：<input type="text"/ name="user"/>
		用户类型：<input type="text" name="usertype" value="普通用户"readonly/>
		密码：<input type="password" name="password"/>	
		<input type="submit" name="submit" value="登录"/>	
		</from>
	</body>
</html>

 

3.4.3.7 重置按钮

• 定义：用于重置表单。
• 示例：

  <input type="reset" value="重置">

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
		用户名：<input type="text"/ name="user"/>
		用户类型：<input type="text" name="usertype" value="普通用户"readonly/>
		密码：<input type="password" name="password"/>	
		<input type="submit" name="submit" value="登录"/><br/>
		<input type="reset" name="reset" />
		</from>
	</body>
</html>

3.4.3.8 普通按钮

• 定义：用于创建一个普通按钮，通常与JavaScript结合使用。
• 示例：

  <input type="button" value="点击我" onclick="alert('Hello!')">

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
		用户名：<input type="text"/ name="user"/>
		用户类型：<input type="text" name="usertype" value="普通用户"readonly/>
		密码：<input type="password" name="password"/>	
		<input type="submit" name="submit" value="登录"/><br/>
		<input type="reset" name="reset" />
		<input type="button" name="button" value="注册"onclik="alert('注册新用户')" />
		
		</from>
	</body>
</html>

3.4.3.9 文件选择框

• 定义：用于让用户选择文件上传。
• 示例：

  <input type="file" name="fileupload">

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
		姓名：<input typoe="text" name="name"/>
					性别：
					<input type="radio" name="r1" value="male"/>男
					<input type="radio" name="r1" value="female"/>女
					爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
					<input type ="checkbox" name="n1" value="dance"/>跳舞
					<input type ="checkbox" name="n2" value="basketball"/>打篮球
					<input type ="checkbox" name="n3" value="football"/>足球
					<input type ="checkbox" name="n4" value="run"/>长跑
					<br/>
					<input tyoe="file" name="file"/>
		
		</from>
	</body>
</html>

 

3.4.3.10 隐藏框

• 定义：用于存储用户看不到的信息。
• 示例：

  <input type="hidden" name="userid" value="12345">

3.4.4 多行文本输入框

• 定义：用于输入多行文本。
• 示例：

  <label for="comment">评论：</label>
  <textarea id="comment" name="comment" rows="4" cols="50">
  </textarea>

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
		姓名：<input typoe="text" name="name"/>
							性别：
							<input type="radio" name="r1" value="male"/>男
							<input type="radio" name="r1" value="female"/>女
							爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
							<input type ="checkbox" name="n1" value="dance"/>跳舞
							<input type ="checkbox" name="n2" value="basketball"/>打篮球
							<input type ="checkbox" name="n3" value="football"/>足球
							<input type ="checkbox" name="n4" value="run"/>长跑
							<br/>			
		请输入你的宝贵意见
		<textarea name="info" rows="4" clos="50" /></textarea>
		
		</from>
	</body>
</html>

3.4.5 下拉列表框

• 定义：用于创建下拉列表。
• 示例：

  <label for="language">选择语言：</label>
  <select id="language" name="language">
    <option value="zh">中文</option>
    <option value="en">英文</option>
  </select>

  例子

  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="utf-8" />
  		<title></title>
  	</head>
  	<body>
  		<from name="from1" method="post" action="frome_action.jsp" enctype="text/plain">
  		姓名：<input typoe="text" name="name"/>
  							性别：
  							<input type="radio" name="r1" value="male"/>男
  							<input type="radio" name="r1" value="female"/>女
  							爱好：<input type ="checkbox" name="n1" value="sing"/ checked>唱歌
  							<input type ="checkbox" name="n1" value="dance"/>跳舞
  							<input type ="checkbox" name="n2" value="basketball"/>打篮球
  							<input type ="checkbox" name="n3" value="football"/>足球
  							<input type ="checkbox" name="n4" value="run"/>长跑
  							<br/>			
  		请输入你的宝贵意见
  		<textarea name="info" rows="4" clos="50" /></textarea>
  		<br/>
  		请选择你的职业规划
  		<select name="abc" multiple>
  			<option value="s1">前端</option>
  			<option value="s2">后端</option>
  			<option value="s3">运维</option>
  			<option value="s4">测试</option>
  		</select>
  		</from>
  	</body>
  </html>
  

  

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

案例1.达维工作室“联系我们”子页

<!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=" O" 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% " bonler= "0" cellspacing= "0" eellpadding="20" >
			<tr>
			<td height="30" align="center" bgcolor=" #FFFFFF" elass="zil">联系我们</td>
			</tr>
			<tr>
				<td height=" 196" bgcolor=" #FFAFO3" >
				<p class="zibai">地址:广东省江门市XXXXXXXXX<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="zil">关于我们</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" >更多 &gt;&gt;</a></p>
					</tr>
					</table>
					</td>
					<td width =" 280" >
					<table width = " 100% " border="0" cellspacing=" 0" cellpadding=" 20" >
					<tr>
					<td height=" 30" align=" center" bgcolor=" #FFFFFF" class="zil">团队合作</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 chu" >更多 &gt;&gt;</a></p>
				</td>
				</tr>
				</table>
				</td>
				</tr>
				</table>
				</td>
				</tr>
				</table>
	</body>
</html>

结果

案例2.用户注册信息 

<!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 =" formI" id ="form1">
		<fieldset>
		<legend>用户注册信息</legend>
		<tr>
		<table width="600" border="O" align="center" cellpadding="O" cellspacing="O">
		<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/images/Male.gif" width="22" height="21" align="absmiddle"/>
		<input type="radio" name ="radio" id="radio2" value= "radio2"/>
		女<img src="../img/images/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" name="fileField" id="fileField"/></td>
		</tr>
		<tr>
		<td width="200" align="right">意见或建议：</td>
		<td>
		<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
		</td>
		</tr>
		<tr>
		<td colspan="2" align="center">
		<input type=" submit" name="button" id="button" value="提交"/>
		<input type="reset" name="button2" id="button2" value ="重置"/>
		</td>
		</tr>
		</table>
		</fieldset>
		</form>
	</body>
</html>