3.1表格概述
表格是网页中的一个重要元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然
3.1.1表格的结构
表格是有行和列组成的二维表，而每行又一个或多个单元格组成，用于放置数据或其他内容
3.1.2表格的基本语法
在HTML中，常用表格主要通过5个标记来构成的：（table），（caption），（th），（tr)和（td）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义表格</title>
</head>
<body>
<table width="700" height="150" border="1">
<caption><h2>18软件技术7班课程表</h2></caption>
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>第一节课</td>
<td>数据库</td>
<td>C语言</td>
<td>网页设计</td>
<td>Java</td>
<td>PHP</td>
</tr>
<tr>
<td>第3-4节</td>
<td>PHP</td>
<td>计算机数学</td>
<td></td>
<td></td>
<td>C语言</td>
</tr>
<tr>
<td>第5-6节</td>
<td>Java</td>
<td></td>
<td></td>
<td>数据库</td>
<td>网页设计</td>
</tr>
<tr>
<td>第7-8节</td>
<td>心理咨询</td>
<td></td>
<td>数据库</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
3.2表格属性设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一设置，对表格的设置实质是对表格标记属性的一些设置
3.2.1表格边框属性
设置表格标记中的边框属性可以改变表格的外观
(1） border属性。用于设置边框的粗细，单位是像素。
（2） bontdercolor属性。用于设置表格边框的颜色，可以使用 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）同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置表格边框、背景</title>
</head>
<body>
<h4 align="center">设置表格边框、背景</h4>
<table align="center" width="700px" height="150px"border="15" bordercolorlight="#ff0000" bordercolordark="#6600ff" bg-color="#99cccc">
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在学院</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
<hr >
<table align="center" border="15px" bordercolor="grey" width="700px" height="150px" background="img/bj01.ipg" bgcolor="#99cccc">
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在学院</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
</body>
</html>
3.2.4表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式，设置表格标记中的rules属性可以改变表格内部边框的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框样式</title>
</head>
<body>
<table align="center" border="2" bordercolor="blue" width="400px" height="120px" frame="hsides" rules="all">
<caption><b>表格边框样式定义</b></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在学院</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
<tr>
<td>张小林</td>
<td>工程学院</td>
<td>17160301115</td>
</tr>
</table>
</body>
</html>
3.2.5表格单元格间距、单元格边距属性
设置表格标记中的 cellpadding 属性可以增加表格单元格的内容与内部边
设置表格标记中的 cellepacing 属性可以改变表格单元格之间的间隔，使网页中的表格内
框之间的距离。
语法：
<table cellypacing="" cellpadding=-""
</table>
（1）celspacing。值的单位为像素或百分比，默认值为2px。
（2）cellpadding。值的单位为像素或百分比。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置单元格间距和边距</title>
<style type="text/css">
strong{
background: #ccffcc;
}
td{
background: #99ccff;
}
</style>
</head>
<body>
<b>设置单元格间距和边距</b>
<table width="380" border="4" cellspacing="50px" cellpadding="20px" bgcolor="#9966ff">
<tr>
<td><strong>网页设置</strong></td>
<td><strong>大学体育</strong></td>
</tr>
</table>
</body>
</html>
3.2.6表格水平对齐属性
通过设置表格标记的aling 属性，可以设定表格在水平方向上的对齐方式
语法：<table align="left|center| right"></table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置表格水平对齐方式</title>
<style type="text/css">
div{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div>
<table width="400" align="left" border="2">
<caption>学生信息表（左对齐）</caption>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
</div>
<div>
<table width="400" align="center" border="2">
<caption>学生信息表（居中对齐）</caption>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
</div>
</body>
</html>
3.2.7设置表格的(tr)标记行的属性
通过tr标记的align属性可以设置行内容的水平对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charsei="UTF-8">
<title>设置行内容对齐方式</title>
<style type="texi/ona">
td{
background:#ccffee;
}
</style>
</head>
<body>
<table borlore="1" width="450px" hoight="240p"
alipn="cnter"bordercolor="#6600ff"
<caption><b>学生信息表(设置表行内容对齐方式)</b></caption>
<tr>
<th>姓名</th>
<th>院系名称</th>
<th>班级</th>
</tr>
<tr align="left" valign ="top">
<td>李明</td>
<td>信息学院</td>
<td>1616010218</td>
<tr align="center" valign="middle">
<td>王丹</td>
<td>管理学院</td>
<td>1416020109</td>
<tr align="right" valign="bottom">
<td>张小林</td>
<td>工程学院</td>
<td>1716030115</td>
</tr>
</table>
</body>
</html>
3.2.8设置单元格的属性
表格的列（td）标记的属性可以设置表格单元格的显示风格
3.2.9表格单元格跨行、跨列属性
<!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="#333ff">
<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="#33f99">
<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>结束。表单定义了采集数据的范
围，其所包含的数据内容将被完整地提交给服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的使用</title>
</head>
<body>
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<h3>输入课程成绩</h3>
姓名：<input type="text"/><br />
网页设计：<input type="text" size="15"/>
数据结构：<input type="text" size="15"/><br /><br />
<input type="submit" value="成绩提交"/>
<input type="reset" value="成绩重置"/>
</form>
</body>
</html>
3.4.2定义域和域标题
利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分
组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放
到 fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果,
或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。
语法：
<form>
<fieldset>
<legend alig="left I center I right">域标题内容</legend>
</fieldset>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义域和域标题</title>
</head>
<body>
<form>
<fieldset>
<legend align="center">基本信息</legend>
姓名：<input name="name" type="text"/>
性别：<input name="sex" type="text"/>
</fieldset>
<fieldset>
<legend align="center">其他信息</legend>
身高：<input name="height" type="text"/>
体重：<input name="weight" type="text"/>
</fieldset>
</form>
</body>
</html>
3.4.3表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送服务器等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记
3.4.4多行文本输入框
textarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行并将这些信息提交到服务器
1.单行文本输入框
设置 input 标记的 type 属性值为 text，可以实现向表单中插入一个单行文本框。在
文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。
语法：
cimput name="" type="text" maxlengh="" size ="" value="" readonly>
说明：单行文本输入框的主要属性有 name，maxlengh，size，value 和 readonly，
2.密码输入框
设置 input 标记的 type 属性值为 password，可以实现向表单中插入一个密码输
码输入框中可以输入任意类型的数据，与单行文本输人框有所不同，这些数据不是
示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码！
语法：
<imput name="" type="password" maxlength="" size=""1>
说明：密码输入框的主要属性有 name，maxlenth 和 size，取值及说明与单行
相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入用户信息</title>
</head>
<body>
<h4>输入用户信息</h4>
<form>
用户名：<input type="text" name="user" maxlength="20" size="10"/>
身份：<input type="text" name="position" readonly value="学生"/><br />
密 码：<input type="password" name="psw" maxlength="20" size="10"/>
</form>
</body>
</html>
3.复选框
设置 impnt 标记的 type 属性值为 checkbox，可以实现向表单中插人一个复选框，用户利
用复选框在网页上设置多项选择。
语法：
<imput name="” type="checkbox” value="" checked/>
选项。
4.单选按钮
设置 imput 标记的 type 属性值为 rudio，可以实现向表单中插入一个单选按钮，用户可利
用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name="" type=" radio" value="" checked/>
说明：单选按钮的属性有 name， vale 和 checked 等，其属性、取值及说明与复选框相
同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单
选按钮的所有 name 属性值必须相同，value 属性取值应该不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框和单选框的应用</title>
<style type="text/css">
fieldset{
width: 300px;
height: 120px;
border: 2px double #003399;
padding-left: 30px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>请填写个人信息</legend>
姓名：<input type="text" name="user" maxlength="10" size="10"/>
爱好：<input type="checkbox" name="n1" value="跳舞" />跳舞
<input type="checkbox" name="n2" value="踢足球" checked="checked"/>踢足球
<input type="checkbox" name="n3" value="打游戏" checked="checked"/>打游戏<br />
性别：<input type="radio" name="sex" value="male" checked="checked"/>男
<input type="radio" name="sex" value="female"/>女
</fieldset>
</form>
</body>
</html>
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-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"> </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="196" bgcolor="#FFAF03">
<p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
电话：0750-XXXXXX<br/>
传真：0705-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">&bsp;</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 = "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" > </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="forml" id="forml">
<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="eight">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>男<img src="img/Male.gif"
width="22" height="22" 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>
扫一扫
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
