3.1 表格概述
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于防止数据或其它内容。
3.1.2 表格的基本语法
表格里的内容应该用<table>...</table>都包起来。在HTML中，常用表格主要通过5个标记来构成：<table>，<caption>，<th>，<tr>和<td>。
例如：
<table>
<caption>23软件技术一班</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 表格边框属性
（1)border 属性。用于设置边框的粗细，单位是像素。
（2)bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜
色英文名称。
（3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
（4）bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
例如：
<table border="2px" bordercolor="#aaaaff" bordercolorlight="#00ff00" borgercolordack="#0000ff">
<caption>23软件技术一班</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>
（1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。
（2)height。其单位可以是长度单位或百分比，用于定义表格的高度。
例如：
<table border="2px" width=300px height="200px">
<caption>23软件技术一班</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>
（1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
（2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
（3）同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色.
例如：
<table bgcolor="#aaaaff">
<caption>23软件技术一班</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/picture/学校.png">
3.2.4 表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
例如：
<table width=200px height="100px" frame="hsides" rules="all">
<caption>23软件技术一班</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>
（1)cellspacing，值的单位为像素或百分比，默认值为2px。
（2)cellpadding值的单位为像素或百分比。
例如：
<table border="2px" cellspacing="6px" cellpadding="5px">
<caption>23软件技术一班</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属性，可以设定表格在水平方向上的对齐方式。对齐方式有
居左、居中、居右3种。
语法：
<table align="left| center | right">.</table>
说明：align 属性的取值可以为left（默认居左）、center（居中）和right（居右）。
例如：
<table border="2px" width=300px height="200px" align="center">
<caption>23软件技术一班</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=300px height="200px" align="center">
<caption>23软件技术一班</caption>
<tr align="right">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>李四</td>
<td>男</td>
</tr>
<tr align="left">
<td>2</td>
<td>张三</td>
<td>男</td>
</tr>
</table>
3.2.8 设置单元格的属性
表格的列（td）标记的属性可以设置表格单元格的显示风格。td标记常用的属性如表
图所示。
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
语法：
<td rowspan="行数">…</td>
说明：rowspan属性可以设置单元格跨行。通过rowspan="n"（n是正整数），可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td标记。
3.2.9.2 单元格跨列
使用单元格td标记的colspan 属性可以设置单元格跨列合并。
语法：
<td colspan="列数">…</td>
说明：colspan 属性可以设置单元格跨列。通过colspan="n"（n是正整数），可以设置
某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>设置单元格跨列、跨行属性</title>
</head>
<body>
<h2 align="center">设置单元格跨列、跨行属性</h2>
<table border="1px" width=800px height="200px" align="center">
<caption>专业研讨会日程安排</caption>
<tr align="center">
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>
<tr align="left">
<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 表格嵌套
例如：
<style>
body{font-size:36px;}
</style>
<hr/ zize="5" color="ff0000">
<h3 align="center">3.3</h3><br/>
<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>
<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>
3.4 表单
3.4.1 表单标记
表单form 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
例如：
<form name="form1" mathod="post" action="form_action.jsp" enctype="text/plain">
用 户 名：<input type="text" name="usuer"/><br/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br/>
<input type="submit" value="登入"/>
</form>
3.4.2 定义域和域标题
利用fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果,或者可创建一个子表单来处理这些元素。legend标记为fieldset 标记定义域标题。
例如：
<form name="form1" mathod="post" action="form_action.jsp" enctype="text/plain">
用 户 名：<input type="text" name="usuer"/><br/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br/>
<input type="submit" value="登入"/>
<input type ="reset" name="reset"/>
<input type="button" name="button" value="注册" onclick="javascript:alert('请先注册新用户')"/>
</fieldset>
<hr/>
<fieldset>
<legend align="center">其他信息</legend>
<input type="file" name="file"/>
<input type="hidden" name ="abc" value="123"/>
请输入您的宝贵建议<textarea name="info" rows="4" cols="50"></textarea><br/>
请选择职业规划：
<select name="abc" multiiple>
<option value="z1">前端</option>
<option value="z2">后端</option>
<option value="z3">运营</option>
<option value="z4">测试</option>
</select>
</fieldset>
</form>
3.4.3 表单信息输入
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=""/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
3.4.3.3 复选框
设置 input 标记的 type 属性值为 checkbox，可以实现向表单中插人一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name= " " type=" checkbox" value=" ” checked/>
说明:复选框的主要属性有name，value和checked，其中 checked 属性用于设置初始预选项。复选框的属性、取值及说明。
3.4.3.4 单选按钮
设置 input 标记的type 属性值为 radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name ="" type="radio" value="" checked/>
说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。
例如：
<form name="form1" mathod="post" action="form_action.jsp" enctype="text/plain">
用 户 名：<input type="text" name="usuer"/><br/>
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女<br/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br/>
爱好：<input type="checkbox" name="a1" value="sing"/>唱歌
<input type ="checkbox" name="a2" value="dance"/>跳舞
<input type ="checkbox" name="a3" value="rap" checked/>Rap
<input type ="checkbox" name="a2=4" value="playbacketball"/>打篮球<br/>
3.4.3.5 图像按钮
设置 input 标记的 type 属性值为 image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过 src 属性加载图像。
语法:
<input name=" " type="image" src=" " width="" height=" "/>
说明:图像按钮主要属性有name，src，width和height。
<form name="form1" mathod="post" action="form_action.jsp" enctype="text/plain">
用 户 名：<input type="text" name="usuer"/><br/>
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女<br/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br/>
爱好：<input type="checkbox" name="a1" value="sing"/>唱歌
<input type ="checkbox" name="a2" value="dance"/>跳舞
<input type ="checkbox" name="a3" value="rap" checked/>Rap
<input type ="checkbox" name="a2=4" value="playbacketball"/>打篮球<br/>
<input type="image" name="start" src="../img/picture/start.png"/><br/>
3.4.3.6 提交按钮
设置 input 标记的 type 属性值为 submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理，
语法:
<input name ="" type="submit"value="提交"/>
<form name="form1" mathod="post" action="form_action.jsp" enctype="text/plain">
用 户 名：<input type="text" name="usuer"/><br/>
密 码：<input type="password" maxlength="10" size="10"/><br/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br/>
<input type="submit" value="登入"/>
<input type ="reset" name="reset"/>
<input type="button" name="button" value="注册" onclick="javascript:alert('请先注册新用户')"/>
3.4.3.7 重置按钮
设置 input 标记的 type 属性值为 reset，可以实现向表单中插人一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
<input name=" " type= " reset" value=" "/>
说明:重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。
<input type ="reset" name="reset"/>
3.4.3.8 普通按钮
设置 inpu 标记的type 属性值为 button，可以实现向表单中插人一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name="" type=" button" value=" " οnclick=" "/>
说明:普通按钮的属性有name，value 和onclick。
<input type="button" name="button" value="注册" onclick="javascript:alert('请先注册新用户')"/>
3.4.3.9 文件选择框
设置 input 标记的 type 属性值为 le，可以实现向表单中插人一个文件选择框
语法:
<input name= " " type=" file" value=" "/>
<input type="file" name="file"/>
3.4.3.10 隐藏框
设置 input 标记的 type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的
语法:
<input name= " " type=" hidden" value=" "/>
<input type="hidden" name ="abc" value="123"/>
3.4.4 多行文本输入框
textarea 标记可以向表单中插入多行文本输人框。多行文本输人框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
<legend align="center">其他信息</legend>
<input type="file" name="file"/>
<input type="hidden" name ="abc" value="123"/>
请输入您的宝贵建议<textarea name="info" rows="4" cols="50"></textarea><br/>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和 option 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size=" " multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息 2</option>
......
</select>
请选择职业规划：
<select name="abc" multiiple>
<option value="z1">前端</option>
<option value="z2">后端</option>
<option value="z3">运营</option>
<option value="z4">测试</option>
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/images/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 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" > </p>
<p class = " zibai chu" >更多 >></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" > </p>
<p class ="zibai chu" >更多 >></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>
扫一扫
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
