3.1 表格概述
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个元素组成，用于放置数据或其他内容。
3.1.2 表格的基本语法
（1）table标记是成对标记，<table>表示表格开始，</ table>表示表格结束。
（2）caption标记是成对标记，<caption>表示标题开始，</ caption>表示标题结束。
（3） tr 标记是成对标记，<t>表示行开始，<t>表示行结束。
（4） th标记是成对标记，<th>表示表头开始，Jth>表示表头结束。
（5）td标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用h 标记定义，也可以用d标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插入多个w标记，表示多行，一组<tr></tr>标记表示插入一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
3.2 表格属性的设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
<table>
<caption>23级软件2班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
</table>运行结果：
3.2.1 表格边框属性
（1）border属性。用于设置边框的粗细，单位是像素。
（2）bordercolor 属性。用于设置表格边框的颜色，可以使用gb 函数、十六进制数和商色英文名称。
（3） bordercolorlight 属性。用于设置表格亮边框，对表格左上边框生效。(4) bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
<table border="3px">
<caption>23级软件2班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
</table>
运行结果：
3.2.2 表格的宽度和高度属性
通过设置width属性和height属性，属性可以设置表格的宽度和高度。
语法：
<table width=" " height=" ">···</ table>
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。
设置表格标记中的高度与宽度为百分比时，表格和跟随浏览器窗口的改变而自动调整。
<table width="200px" hight="150px">
<caption>23级软件2班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
</table>运行结果：
<table width="20%" height="20%">3.2.3 表格背景颜色与表格图像属性
设置表格的 bgcolor 属性可以改变表格的背景颜色，设置表格的 background 属性可以为表格增添背景图像效果，使表格更加美观。
语法：
<table bgcolor="" background=" >/table>
(1) bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。
(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
<table bgcolor="#0000ff">运行结果：
<table background="img/wu.jpg">运行结果：
3.2.4 表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
语法：
<table frame=" " rules=" ">······内容·······</table>
这两种属性可以随机搭配。
<table frame="hsides" rules="all">运行结果：
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
语法：
<table cellspacing=" " cellpacing=" "
</table>
(1) cllspacing。值的单位为像素或百分比，默认值为 2px.
(2) cellpadding。值的单位为像素或百分比。
<table cellpadding="10px" border="2px">运行结果：
<table cellpadding="10px" border="2px">运行结果：
3.2.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平向上的对齐方式。对齐方式有居左、居中、居右三种。
语法：
<table align="left | center | right">···</table>
<table align="left">运行结果：
3.2.7 设置表格的（tr）标记行的属性
通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法：
<table align="center">
<tr align="lefi I center I right" valign="top I middle I bottom">
<Id>···</td>
<tr>
······
</table>
<table border="2px" width="200px" height="150px">
<caption>23级软件2班名单</caption>
<tr align="left">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right">
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table><table border="2px" width="200px" height="150px">
<caption>23级软件2班名单</caption>
<tr align="left" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</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>
</tr>
</table>运行结果：
3.2.8 设置单元格的属性
表格的列（td）标记的属性可以设置表格单元格的显示风格。td标记常用的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
语法：
<td rowspan="行数">···</td>
3.2.9.2 单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：
<td rowspan="列数">···</td>
示例：
<!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 表格嵌套
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
语法：
<table>
<tr>
······
</tr>
<tr>
<td> <!--单元格内嵌表格-->
<table>
<tr>
······
</tr>
</table>
</td>
</tr>
······
</tr>
</table>
示例：
<!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="#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>
<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>
</body>
</html>运行结果：
3.4 表单
3.4.1 表单标记
表单form标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地交给服务器。
语法：
<form method='"post" action="">
<input type="text" name=""/>
<textarea name=" rows="" cols=">...·…(/textarea>
<select name="">
<option value="" selected></option>
<option value=""></option>
</select>
</form>
3.4.2 定义域和域标题
利用 Geldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分
组,Geldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 ieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。
语法：
<form>
<fieldset>
<legend alig="left I center I right”>域标题内容<legend>
</fieldset>
</form>
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器
响应。表单中输人信息的标记是input 标记，可以输人一行信息。input 标记是单个标记。
语法：
<inpul name=" " type=" "/>
3.4.3.1 单行文本输入框
设置 input 标记的ype 属性值为text，可以实现向表单中插人一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输人的数据只能单行显示，不能换行。
语法：
<input name=" " type=" text " maxlength=" " size=" " value=" " readonly/>
<form>
用户名：<input type="text" name="user"/>
</form>运行结果：
3.4.3.2 密码输入框
设置 input 标记的 type 属性值为 password，可以实现向表单中插入一个密码输入框。密
码输人框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“。”所取代，这样设计可以保障用户输人的密码不被泄露。
语法：
<input name=" " type='"password" maxlength=" " size="/>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>运行结果：
3.4.3.3 复选框
设置 input 标记的 type 属性值为 checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法：
<input name="" type='"checkbox'" value=''" checked/>
<form>
姓名：<input type="text" name="name"/>
爱好：<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
</form>运行结果：
3.4.3.4 单选按钮
设置 input 标记的 type 属性值为 radio，可以实现向表单中插人一个单选按钮，用户可利
用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name=" " type=" radio " value=" " checked/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
<br />运行结果：
3.4.3.5 图像按钮
设置 input 标记的 ype 属性值为 image，可以实现向表单中插入一个图像按钮，用用
利用图像按钮在网页中插人一张图像，通过sre 属性加载图像。
语法：
<input name=" " type=" image" src=" " width=" " height=" "/>
<form>
<input type="image" src="img/游戏.jpg"/>
</form>
3.4.3.6 提交按钮
设置 input 标记的type 属性值为 submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法：
<input name='"" type="submit"value="提交"/>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登入"/>
</form>
3.4.3.7 重置按钮
设置 input标记的bype 属性值为 reset，可以实现向表单中插入一个重置按钮，重置按会
用于将表单中所有的输人信息清空，然后让用户可以重新填写。
语法：
<input name='" "type=" reset"value=" "/>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="reset"/>
</form>运行结果：
3.4.3.8 普通按钮
设置input 标记的ype 属性值为 button，可以实现向表单中插入一个普通按钮。普通按
钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法：
<inpult name=" " type= "button" value=" οnclick=" "/>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登入"/>
<input type="reset"/>
<input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
</form>运行结果：
3.4.3.9 文件选择框
设置 inpu 标记的vpe 属性值为ile，可以实现向表单中插人一个文件选择框。
语法：
<input
name=" "type="ile" value=" "/>说明：
name,定义 input 标记的名称。页面上会自动添加一个文本输入框和一个“浏览....按钮。单击“浏览··”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后动将文件名称回填到文本输人框中。
<form>
请选择作证材料：<input type="file"/>
</form>运行结果：
3.4.3.10 隐藏框
设置 input 标记的 ype 属性值为 hidden，可以实现向表单中插人一个隐藏框，用户提
表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法：
<input name=" type="hidden" value=" "/>
<form>
<input type="hidden" name="abc" value="123"/>
</form>
3.4.4 多行文本输入框
lextarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
语法：
<textarea name=" " rows=" " cols=" " wrap=" "/>初始信息内容</textarea>
<form>
<input type="hidden" name="abc" value="123"/>
<textarea rows="4" cols="30"></textarea>
</form>运行结果：
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用 select 和 oplion标记来在表单中插人下拉菜单和列表项。
语法：
<select name="" size='"" mulliple>
<option value="" selected>文字信息 1<J option>
<option value="">文字信息2/option>
<Jselect>
说明：select 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有 name, size 和 multiple 等属性。option 标记有 value 和 selected 等属性。select 标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value
值，显示文本通常附在 option 标记后面。
<form>
请选择课程
<select multiple>
<option name="s">网页</option>
<option name="s">Java</option>
<option name="s">安卓</option>
<option name="s">PS</option>
<option name="s">网络</option>
</select>
<br />
请输入您的宝贵意见：
<textarea rows="4" cols="30"></textarea>
</form>运行结果：
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" 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="290" 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">地址：广东省
<p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
电话：0750——XXXXXX<br/>
传真：0750——XXXXXX<br/>
QQ:12345678<br/>
电子邮箱：<br/>
[email protected]<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"> </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" encdype=" mulipart/om- data" name=" forml" id="from1">
<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="texfield" id="textfield" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" mame="textfield2" id="textfield2"/></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name= "textield3" id="textfield3"/></td>
<tr>
<tr>
<td widh="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked= "checked"/>男
<img src="img/Male.gif" width="22" heigh="21" dlign="absmidde" />
<input type="radio" name="radio" id="radio2" value="radi2" />女
<img src="img/Female.gif" width="23" heighr="21" align="abiniddle" /></td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td><input name="textfield4" ype="text" id="toxtfield4" sive="12" />年
<select name="select" id=" select">
<option>l</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>S</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月</td>
</td>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name= "checkbox" id="checkbox1">看书
<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=" ilefField" /></td>
</td>
<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>运行结果：
