3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。
3.1.1表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示
3.1.2 表格的基本语法
<table></table>//表格说明
<caption></caption>//表格标题标记
<th></th>//表格表头标记
<tr></tr>//行
<td></td>//列
table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。<caption>表示标题开始，</caption>表示标题结束。
(2)caption标记是成对标记caption 标记可以给表格添加标题，该标题应位于table 标记与t标记之间的位置。
(3)tr(Table Row)标记是成对标记，<tr>表示行开始，</t>表示行结束。
(4)th(Table Heading表头)标记是成对标记，<th>表示表头开始，</t>表示表头结束
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用出 标记定义，也可以用 td 标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
3.2 表格属性设置
3.2.1表格边框属性
| 边框属性 | 说明 | 边框属性 | 说明 |
| border | 表示表格边框粗细 | bordercolorlight | 表示表格亮边框颜色 |
| bordercolor | 表示表格边框颜色 | bordercolordark | 表示表格暗边框颜色 |
(1)border 属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb 函数、十六进制数和颜色英文名称。
(3)bordercoloright属性。用于设置表格亮边框，对表格左上边框生效
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效
3.2.2宽度和高度属性
通过设置width属性和height,属性可以设置表格的宽度和高度。
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2)height。其单位可以是长度单位或百分比，用于定义表格的高度。
3.2.3背景颜色和背景图象属性
设置表格的 bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色
3.2.4边框样式属性
| frame属性值 | 说明 | rules属性值 | 说明 |
| above | 上边框 | all | 所有内部边框 |
| below | 下边框 | none | 不显示内部边框 |
| hsides | 上下边框 | rows | 行边框 |
| vsides | 左右边框 | cols | 列边框 |
| lhs | 左边框 | groups | 介于行列间边框 |
| rhs | 右边框 | border | 上下，左右边框 |
| void | 不显示边框 |
3.2.5单元格间距，单元格边距属性
设置表格标记中的 cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。
1.cellspacing。值的单位为像素或百分比，默认值为2px。
2.celpadding。值的单位为像素或百分比
3.2.6表格水平对齐属性
通过设置align属性，设置表格对齐方式。
有三种方式：left，center，right
3.2.7 设置表格的（tr）标记行的属性
| 属性值 | 说明 | 属性 | 说明 |
| align | 行内容水平对齐 | bordercolor | 行的边框颜色 |
| valign | 行内容垂直对齐 | bordercolorlight | 行的亮边框颜色 |
| bgcolor | 行的背景颜色 | bordercolordark | 行的暗边框颜色 |
3.2.8格单元格跨行、跨列属性
1.单元格跨行：rowspan
语法：<td rowspan="行数"></td>
2. 单元格跨列：colspan
语法:<td colspan="列数"></td>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第三章——表格</title>
</head>
<body>
<table width="350" height="150"> <!--设置边框属性-->
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
<table width="350" height="150" border="1"> <!--规定边框宽度-->
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
<table width="350" height="150" border="1" bordercolor="blue"><!--设置边框颜色-->
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
<table width="350" height="150" border="1" bgcolor="red"><!--设置表格背景颜色-->
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
<table width="350" height="150" <frame="hsides" rules="all">> <!--设置边框样式-->
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
<table width="350" height="150" border="1"><!--align用来设置对齐方式-->
<caption>23软件1班名单</caption>
<tr align="center">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="left">
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr align="right">
<th>2</th>
<th>李四</th>
<th>女</th>
</tr>
</table>
</body>
</html>
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.2.9.1 单元格跨行
语法：<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标记。
3.3表格嵌套
表格嵌套是一种常用的页面布局。利用表格嵌套可以设计比较复杂且美观的页面效果。
语法：<table>
<tr>
.....
</tr>
<tr>
<td>
<table>
<tr>
.....
<tr/>
<table/>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4 align="center">嵌套表格布局</h4>
<table border="1" width="660px" 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>
</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 定义域和域标题
利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。
语法:
<form>
<fieldset>
<legend alig="left | center | right">域标题内容</legend>
</fieldset>
</form>
3.4.3 表单信息输入
1.单行文本输入框
设置input 标记的 type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输人的数据只能单行显示，不能换行。
语法:<input name =" " type= " text" maxlength=" " size=" " value="" readonly/>
2.密码输入框
设置input 标记的type 属性值为password,可以实现向表单中插入一个密码输入框。
语法:<input name =" " type= " password" maxlength = " " size = " " />
3 .复选框
设置 iput 标记的 type属性值为 checkbox，可以实现向表单中插人一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name = " "type =" checkbox" value=" " checked/>
4. 单选按钮
设置 input 标记的 type 属性值为 radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name = " " type = " radio" value= " " checked/>
5. 图像按钮
可以实现向表单中插人一个图像按钮，用户设置 input 标记的 type 属性值为 image,利用图像按钮在网页中插入一张图像，通过src属性加载图像。
语法：<input name="" type="image" src=" " width=" " height=" "/>
6. 提交按钮
设置 input 标记的 type 属性值为 submit,可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value=" 提交"/>
7. 重置按钮
设置 input标记的 type属性值为reset，可以实现向表单中插人一个重置按钮，重置按钢用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
<input name = " " type = " reset" value = " "/>
8 .普通按钮
设置input 标记的type属性值为 button，可以实现向表单中插人一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name=" " type=" button" value =" " onclick =" "/>
9. 文件选择框
设置 input 标记的type 属性值为file，可以实现向表单中插入一个文件选择框。
语法:
<input name=" " type = " fle" value=" "/>
10 .隐藏框
设置 input 标记的type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法:
<input name = " " type = " hidden" value = " "/>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="form1" method="post"
action=""enctype="text/plain"
>
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usetype" value="普通用户"readonly />
密码：<input type="password" name="password"/>
<hr/>
姓名：<input type="text"name="name"/>
爱好：
<input type="checkbox" name="n1" value="dance"checked />跳舞
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n1" value="run"/>跑步
<hr/>
姓名：<input type="text"name="name"/>
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
爱好：
<input type="checkbox" name="n1" value="dance"checked />跳舞
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n1" value="run"/>跑步
<hr/>
<input type="image" name="start" src="img/game.png"/ >
<hr />
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usetype" value="普通用户"readonly />
密码：<input type="password" name="password"/><br />
<input type="submit" name="submit"value="登录"/>
<input type="reset" name="reset"/>
<input type="button" name="button" value="注册"
onclick="javascript:alert('注册新用户')"/>
<hr/>
姓名：<input type="text"name="name"/>
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
爱好：
<input type="checkbox" name="n1" value="dance"checked />跳舞
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n1" value="run"/>跑步<br />
<input type="file"name="file"/>
<input type="hidden" name="abc" value="123"/>
<hr />
姓名：<input type="text"name="name"/>
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
爱好：
<input type="checkbox" name="n1" value="dance"checked />跳舞
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n1" value="run"/>跑步<br />
<input type="file"name="file"/>
请输入你的宝贵意见
<textarea name="info"rows="4"cols="50"></textarea>
<br />
请选择职业：
<select>
<option value="s1">前端</option>
<option value="s2">后端</option>
<option value="s3">运维</option>
</select>
</form>
</body>
</html>
3.4.4多行文本输入框
语法:<textarea name =" "rows =" "cols=" "wrap=""/>
3.4.5下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和 opton 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size =" "multiple>
<option value=""selected>文字信息1</ option>
<option value="">文字信息2</option>
..........
</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" 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" calss="zil">网站首页</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</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" aligh="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="zi1">关于我们</td>
</tr>
<tr>
<td height="278" valign="top" bgcolor="#FC880D">
<p class="zibai">
达维工作室是专业从事互联网相关开发的公司。<br />
专门提供全方面的优质服务和最专业的网站建设方案为企业打造全新的电子平台。<br />
达维工作室成立于2014年,已经成为国内著名的网站建设提供商。多年的风雨历程.......
</p>
<p calss="zibai"> </p>
<p calss="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
<td width="280">
<table widht="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"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.用户注册信息
<!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="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 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 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>
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
