网页的布局是指对网页元素的位置进行合理的安排。一个具有好的布局的网页，往往给浏览者带来赏心悦目的感受，而表格是网页布局中一种最简单的技术;表单是网站管理者与访问者之间进行信息交流的桥梁，利用表单可以收集用户意见，做出科学决策。
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标记与tr标记之间的位置。
(3) (Table Row)标记是成对标记，<tr>表示行开始，</tr>表示行结束。
(4)th (Table Heading表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明。表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束。表头可以用h标记定义，也可以用td标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插入多个t标记，表示多行，一组<tr></tr>标记表示插入一行,一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
3.2 表格属性的设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。
语法:
<table border="" bordercolor="" bordercolorlight=" " bordercolordark="">...</table>(1)border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。(4) bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
通过设置width 属性和height，属性可以设置表格的宽度和高度。语法:
<table width=" height="">…</table>
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。(2)height。其单位可以是长度单位或百分比，用于定义表格的高度。设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor="" background="">…</table>
(1) bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4 表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式;设置表格标记中的rules属性可以改变表格内部边框的样式。
语法:
<table frame=" " rules=" ">......内容.....</table>
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
语法:
<table cellspacing="" cellpadding=""</table>
(1) cellspacing。值的单位为像素或百分比，默认值为2px。(2)cellpadding。值的单位为像素或百分比。
3.2.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。
语法:
<table align="leftl center | right">..</table>
说明:align属性的取值可以为left(默认居左)、center(居中)和right(居右)。
3.2.7 设置表格的（tr）标记行的属性
表格行tr标记的属性用于设置表格某一行的样式。
通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
<table align=" center" >
<tr align = " left | center | right" valign=" top | middle | bottom" >
<td>...</td></tr>
......
</table>
说明:left表示设置行内容居左对齐;center表示设置行内容居中对齐;right表示设置行内容居右对齐。top表示设置行内容顶部对齐;middle表示设置行内容居中对齐;bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。
3.2.8 设置单元格的属性
表格的列(td)标记的属性可以设置单元格的显示风格。
3.2.9 表格单元格跨行、跨列属性
在HTML中，可以使用 rowspan 和 colspan 属性来实现单元格跨行和跨列。rowspan 指定单元格跨越的行数，colspan 指定跨越的列数。
3.2.9.1 单元格跨行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">跨行单元格</td>
<td>单元格1</td>
</tr>
<tr>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
3.2.9.2 单元格跨列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">跨列单元格</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
</body>
</html>
3.3 表格嵌套
<table border="1">
<tr>
<td>外部单元格1</td>
<td>
<table border="1">
<tr>
<td>内部单元格1</td>
<td>内部单元格2</td>
</tr>
<tr>
<td>内部单元格3</td>
<td>内部单元格4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>外部单元格2</td>
<td>外部单元格3</td>
</tr>
</table>
3.4 表单
HTML 中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
3.4.1 表单标记
表单 form 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
3.4.2 定义域和域标题
利用 fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
语法:<form>
<fieldset>
<legend alig=" left 1 center I right" >域标题内容</legend></fieldset></form>
说明:fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记:有一个对齐align属性，属性值分别为left, center 和 right。
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。
语法:
<input name="" type=""/>
说明:input标记的属性主要有name 和type等，输入类型是由类型type属性定义的, type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。
3.4.3.1 单行文本输入框
设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。
语法:
<input name=" " type="text" maxlength="" size="" value="" readonly/>
说明:单行文本输入框的主要属性有name，maxlength, size，value和 readonly。
3.4.3.2 密码输入框
设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输人的密码不被泄露。
语法:
<input name=" " type=" password" maxlength=" " size=""/>
说明:密码输入框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框相同。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<form>
密码：
<input type="password" name="password"/>
<input type="submit" value="登录"/>
</table>
</body>
</html>
3.4.3.3 复选框
<html>
<head>
<meta charset="utf-8">
<title>复选框示例</title>
</head>
<body>
<form>
<h3>请选择您的兴趣:</h3>
<label>
<input type="checkbox" name="interest" value="music"> 音乐
</label><br>
<label>
<input type="checkbox" name="interest" value="sports"> 体育
</label><br>
<label>
<input type="checkbox" name="interest" value="travel"> 旅行
</label><br>
<button type="submit">提交</button>
</form>
</body>
</html>
3.4.3.4 单选按钮
设置input 标记的 type 属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name="" type=" radio" value="" checked/>
说明:单选按钮的属性有name,vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。
3.4.3.5 图像按钮
格式：<input type="image" src="img/start.jpg"/> image是图像按钮
3.4.3.6 提交按钮
格式：<input type="submo" value="提交"/> submit是提交按钮
3.4.3.7 重置按钮
格式：<input type="reset"/> reset是重置按钮
3.4.3.8 普通按钮
格式：<input type="button"/> 可在里面加入name,value和onclick取值
3.4.3.9 文件选择框
文件选择框（File Input）是HTML表单中的一个元素，允许用户从他们的设备中选择一个或多个文件进行上传
3.4.3.10 隐藏框
隐藏框（Hidden Input）是HTML表单中一种用于存储数据但不在用户界面上显示的输入元素。通常使用 <input> 标签，并将其类型设置为 hidden。
3.4.4 多行文本输入框
textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
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 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在option标记后面。
3.5 综合案例——表格与表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室---联系我们</title>
<style type="text/css">
.chu{
font-weight: bold;
}
.zi1{
font-weight: 微软雅黑;
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"> </td>
<td widih="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="196"bgcolor="#FFAF03">
<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"> </p >
<p class="zibai chu">更多>></p >
</td>
</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"> </p >
<p class ="zibai chu">更多 >></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" 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>
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
