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> 表格的列标记
(1)table标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2)caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用caption标记可以给表格添加标题，该标题应位于table标记与tr标记之间的位置。
(3)tr(TableRow)标记是成对标记，<tr>表示行开始，</t>表示行结束。
(4)th(TableHeading表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束、设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。
(5)d(TableData)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用th标记定义，也可以用td标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插入多个tr标记，表示多行，一组<tr></tr>标记表示插入一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
3.2 表格属性的设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置，对表格的设置使之是对表格属性的一些设置。如下：
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。表格边据属性如下：
边框属性 说明
bordercolordarkt 表示表格暗边框颜色
borde 表示表格边框粗细
bordercolorlight 表示表格亮边形颜色
bordercolor 表示表格边框颜色
语法：<tableborder=""bordercolor=""bordercolorlight=""bordercolordark="">…</table>
(1)border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和服色英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
通过设置width属性和height，属性可以设置表格的宽度和高度。语法： <tablewidth="height="">…</table>
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2)height。其单位可以是长度单位或百分比，用于定义表格的高度。
设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法：
<tablebgcolor=""background="">…</table>
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
（3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4 表格边框样式属性、
设置表格标记中的fame属性可以改变表格边框的样式；设置表格中的rules属性可以改变表格内部边框的样式。
语法：
<table frame="" rules="">......内容.......</table>
说明：frame和rules属性值及说明表如下：
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
语法：
<tablecellspacing=""cellpadding=""</table>
(1)cellspacing。值的单位为像素或百分比，默认值为2px。
(2)cellpadding。值的单位为像素或百分比。
3.2.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。
语法：
<table align="left l center I right">…</table>
说明：align属性的取值可以为left（默认居左）,center（居中）,right（居右）。
3.2.7 设置表格的（tr）标记行的属性
表格行tr标记的属性用于设置表格某一行的样式，其属性设置如下所示：
属性值 说明
align 行内容水平对齐
bordercolor 行的边框颜色
valign 行内容垂直对齐
bordercolorlight 行的亮边框颜色
bgcolor 行的背景颜色
bordercolordark 行的暗边框颜色
通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法：
<tablealign="center">
<tralign="leftIcenterIright"valign="topImiddleIbottom">
<td>…</td>
</tr>
</table>
说明：left表示设置行内容居左对齐；center表示设置行内容居中对齐；right表示设置行内容居右对齐。top表示设置行内容顶部对齐；middle表示设置行内容居中对齐；bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。
3.2.8 设置单元格的属性
表格的列(td)标记的属性可以设置表格单元格的显示风格。td标记常用的属性如下所示。
属性值 说明
align 单元格内容水平对齐
bordercolorlight 单元格的亮边框颜色
valign 单元格内容垂直对齐
bordercolordark 单元格的暗边框颜色
bgcolor 单元格的背景颜色
rowspan 单元格跨行
background 单元格背景图像
colspan 单元格跨列
bordercolor 单元格的边框颜色
width 单元格宽度
height 单元格高度
3.2.9 表格单元格跨行、跨列属性
1.单元格跨行
使用单元格 td标记的 rowspan 属性可以设置单元格跨行合并。
语法：
<tdrowspan="行数">…</td>
说明：rowspan属性可以设置单元格跨行。通过rowspan="n”(n是正整数)，可以没置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td标记。
2.单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：
<tdcolspan="列数">…</td>
说明：colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。
3.3 表格嵌套
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果，通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表将嵌套一般采用在单元格内嵌套表格。
语法：
<tabile>
<tt>
.........
</tr>
<td> <!——单元格内嵌表格-->
<table>
<tr>
.........
</tr>
</table>
</td>
</tr>
<tr>
...........
</tr>
</table>
3.4 表单
HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器；服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
3.4.1 表单标记
表单form标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
语法：
<formmethod="post” action="">
<inputtype="text"name=""/>
<textareaname=""rows=""cols="">……</textarea>
<selectname="">
<optionvalue=""selected></option>
<optionvalue=""></option>
</select>
</form>
说明：<form>和</form>之间可包含各种表单信息输入标记。表单标记的属性主要有name,action，method和enctype等，其属性、取值及说明如下表所示
3.4.2 定义域和域标题
利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组、fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到Gieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界。3D效果或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
语法：
<fom>
<fieldset><legendalig="leftIcenterIright">域标题内容</legend>
</feldset>
</form>
说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记：有一个对齐align属性，属性值分别为left,center和right。
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。
语法：
<inputname=""type=""/>
说明：input标记的属性主要有name和type等，输入类型是由类型type属性定义的type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input标记的属性取值及说明如下表所示。
1.单行文本输入框
设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。
语法：
<inputname=""type="text"maxlength=""size=""value=""readonly/>
说明：单行文本输入框的主要属性有name，maxlength，size，value和readonly，其属性及取值说明如下表所示：
2.密码输入框
设置input 标记的type 属性值为password，可以实现向表单中插入一个密码输入框。密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“。”所取代，这样设计可以保障用户输入的密码不被泄露。
3.复选框
设置input 标记的 type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性
"20"sin 应该不同，value属性值也应该不同。
4.单选按钮
设置input标记的type 属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
5.图像按钮
设置input标记的type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插入一张图像，通过sre属性加载图像。
6.提交按钮
设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“提交查询按钮”。所以一定要给value属性赋值。
7.重置按钮
设置input标记的 type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
8.普通按钮
设置input 标记的type 属性值为button，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
9.文件选择框
设置input标记的type 属性值为file，可以实现向表单中插入一个文件选择框。
name，定义 input标记的名称。页面上会自动添加一个文本输人框和一个“浏览……按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。
10.隐藏框
设置 input 标记的 type 属性值为hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
3.4.4 多行文本输入框
textarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
3.4.5 下拉列表框
下拉列表通常需要同时使用select和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"><a href="#">更多>></a></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"><a href="#">更多 >></a></p >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>用户注册信息</title>
<style type="text/css">
fieldset{
width: 700px;
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form" id="form">
<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="radio" name="radio" id="radio1" value="radio" checked="checked" />
男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio" />
女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/>
</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 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" />
<label for="checkbox">看书</label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2">上网</label>
<input type="checkbox" name="checkbox3" id="checkbox3" />
<label for="checkbox3">打球</label>
</td>
</tr>
<tr>
<td width="200" align="right">相片：</td>
<td><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>
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
