3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML 页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其
他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或求格等元素。表格中的内容按照相应的行或列进行分类和显示
3.1.2 表格的基本语法
在HTML中，常用表格主要以5个标记来构成：<table>;<caption>;<th>;<tr>;<td>
(1) table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2) caption标记是成对标记，<caption>表示标题开始，<Jcaption>表示标题结束。使用
caption 标记可以给表格添加标题，该标题应位于 table 标记与r标记之间的位置。
(3) tr (Table Row) 标记是成对标记，<r>表示行开始，<tr>表示行结束。
(4) th (Table Heading 表头）标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。
(5) td (Table Data) 标记是成对标记，定义单元格或列。以<td>开始，以<td>结束表头可以用山标记定义，也可以用d标记定义，但<td><J/td>两标记之间的内容不自动居
中、不加粗。
在一个表格中，可以插入多个心标记，表示多行，一组<tr></tr>标记表示插入一行，
一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
<caption>23软件技术4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>22</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>王二</td>
<td>女</td>
</tr>3.2 表格属性的设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，实质上是对表格标记属性进行设置。
| 属性 | 取值 | 说明 |
| align | left | center | right | 规定表格相对周围元素的对齐方式 |
| bgrcolor | #rrggbb | colorname b (r%,g%,b%) rgb (rr, gg,bb) | 规定表格的背景颜色 |
| border | pixels | 规定表格边框的宽度 |
| cellpadding | pixels | % | 规定单元边沿与其内容之间的空白 |
| cellspacing | pixels | % | 规定单元格之间的空白 |
| frame | above | below | hsides | vsides | lhs | rhs | border | void | 规定外侧边框的哪个部分是可见的 |
| rules | none all | rows | colslgroups | 规定内侧边框的哪个部分是可见的 |
| height | % | pixels | 规定表格的高度 |
| width | % | pixels | 规定表格的宽度 |
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。表格中的属性同样适用于单元格
| 边框属性 | 说明 | 边框属性 | 说明 |
| border | 表示表格边框粗细 | bordercolorlight | 表示表格亮边框颜色 |
| bordercolor | 表示表格边框颜色 | bordercolordark | 表示暗边形颜色 |
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添
背景图效果，其表格更加美观。
3.2.4 表格边框样式属性
通过以下属性可改变表格边框的样式：
| rame属性值 | 说 明 | rules 属性值 | 说 明 |
| above | 显示上边框 | all | 显示所有内部边框 |
| below | 显示下边框 | none | 不显示内部边框 |
| hsides | 显示上下边框 | rows | 仅显示行边框 |
| vsides | 显示左右边框 | cols | 仅显示列边框 |
| lhs | 显示左边框 | groups | 显示介于行列间边框 |
| rhs | 显示右边框 | border | 显示上下，左右边框 |
| void | 不显示边框 |
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的 cellpadding 属性可以增加表格单元格的内容与内部边框之间的距离。
语法：
<table cellspacing="" cellpadding=""
</table>
(1) cellspacing。值的单位为像素或百分比，默认值为 2px。
(2) cellpadding。值的单位为像素或百分比。
3.2.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左，居中，居右。
3.2.7 设置表格的（tr）标记行的属性
表格行tr标记的属性用于表格某一行的样式，其属性如下表所示
| 属性值 | 说明 | 属性 | 说明 |
| align | 行内容水平对齐 | bordercolor | 行的边框颜色 |
| valign | 行内容垂直对齐 | bordercolorlight | 行的亮边框颜色 |
| bgcolor | 行的背景颜色 | bordercolor | 行的边框颜色 |
其中valign又分为top（顶部对齐），middle（垂直居中）以及bottom（底部对齐）
3.2.8 设置单元格的属性
不仅可以设置表格边框的属性还可以设置单元格的属性。表格的列td标记的属性可以设置表格单元格的显示风格。
| 属性值 | 说明 | 属性值 | 说明 |
| align | 单元格内容水平对齐 | bordercolorlight | 单元格的亮边框颜色 |
| valign | 单元格内容垂直对齐 | bordercolodarck | 单元格的暗边框颜色 |
| bgcolor | 单元格背景颜色 | rowspan | 单元格跨行 |
| background | 单元格背景图像 | colspan | 单元格跨列 |
| bordercolor | 单元格的边框颜色 | width | 单元格宽度 |
| height | 单元格高度 |
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格 td 标记的 colspan 属性可以设置单元格跨列合并。语法：
<td colspan="列数">··…<td>
说明：colspan 属性可以设置单元格跨列。通过 colspan="n"(n是正整数），可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。
3.2.9.2 单元格跨列
<! DOCTYPE hml>
<html>
<head>
<meta charset=" UTF-8">
<title>设置单元格跨列、跨行属性</title>
</head>
<body>
<h3 align="center">设置单元格跨列、跨行属性</h3>
<table border= " 」" width =" 500px" align =" center" bordercolor=" #3366f"
<caption>专业研讨会日程安排</caption>
<tr align=" center">
<td colspan="2">上午</dd>
<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>
........
</tr>
</table>
3.4 表单
HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器；服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
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 定义域和域标题
利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。
<form>
<fieldset>
<legend alig="left I center I right">域标题内容</legend>
</fieldset>
</form>说明：fieldset 标记没有属性，是成对标记。legend 标记必须位于 fieldset 标记内，也是成对标记：有一个对齐 align 属性，属性值分别为 left, center 和 ight。
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
设置 input 标记的type 属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输人的数据只能单行显示，不能换行。
<input name="" type='"text" maxlength="" size="" value="" readonly/>name：定义名称；maxlength：规定输入字段中的字符最大长度；
size：定义宽度，其值小于或等于最大长度；
value：规定input元素的默认值
readonly：规定文本框中内容只读，不能修改和编辑。
3.4.3.2 密码输入框
设置 input 标记的 type 属性值为 password，可以实现向表单中插人一个密码输入框。密码输人框中可以输人任意类型的数据，与单行文本输人框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
语法：
<input name='"'" type="password" maxlength="'" size=""/>说明：密码输入框的主要属性有 name, maxlenth 和 size，取值及说明与单行文本输人框相同
3.4.3.3 复选框
设置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户就可以用复选框在网页上设置多项选择。
语法：
<input name="" type="checkbox" value=""checked/>说明：单选按钮的属性有 name, vale 和 checked 等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有 name 属性值必须相同，value属性取值应该不同。
3.4.3.4 单选按钮
设置input 标记的type 属性值为 radio，可以实现向表单中插人一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name="" type="radio" value=" checked/>
3.4.3.5 图像按钮
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像按钮应用</title>
<style type="text/css">
body{
text-align:center;
}
input{
width:150px;
height:150px;
}
</style>
</head>
<body>
<form>
<h3>Play Game</h3>
<input type="image" name="start" src="img/789.png" align="center"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3.4.4 多行文本输入框
textarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这此信息提交到服务器。
<textarea name='"" rows="'" cols="" wrap=""/>初始信息内容<textarea>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用 select 和 option 标记来在表单中插入下拉菜单和列表项。
语法：
<select name="" size="" multiple>
<oplion value=""" selected>文字信息1< option>
<opion value='"">文字信息2<ption>
......
</select>
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="0" cellsacing="5">
<tr>
<td width="100" align="center" valign="middle" bacolor=#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>
<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">地址：广东省江门市xxxxx<br />
传真：0750-xxxxxx<br />
电话：0750-xxxxxx<br/>
QQ：1234567890<br />
电子邮箱：<br />
123@163.com <br />
工作室网站：<br />
www.xxxxx.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>运行结果：
案例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="multipar/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" mame="textield2" id="texfield2"/></td>
</tr>
<tr>
<td width="200" align="right">确认密码:</td>
<td><input type="password" name="textield3" 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" widh="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio2"/>
女<img src="../img/Female.gif" width="23" heighr="21" align="absmiddle" /></td>
<tr>
<tr>
<td width="200" align="right">出生年月:</td>
<td><input name="textfield4" type="text" id="texfield4" 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="textarel" cols="45" rows="S"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="button" id= "button" value="提交">
<input type="reset" name="button2" id= "buton2" value="重置">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>运行结果：
运行结果：
扫一扫
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
