表格标记表格标题标记 | 表格表头标记 | |
表格的行标记 | 表格的列标记
（1）table标记是成对标记的，表示表格的结束 。
（2）caption标记是成对标记的，表示标题的开始，表示标题结束，使用caption标记可以给表格添加标题，该标题应位于table标记与tr标记之间的位置。
（3）tr标记是成对标记的， |
表示行的开始，
表示行的结束 。
（4）th标记是成对标记的，表示表头的开始， | 表示表头的结束 ，在设计表格时，表头常常作为表格的第一行或者第一列，用来对表格单元格的内行说明。表头文字内容一般居中、加粗显示。
（5）td标记是成对标记的，定义单元格或列，以开始，以 | 结束 。而表头可以用标记定义也可以用 | 标记定义，但是 | | 两标记之间的内容不自动居中、加粗。
在一个表格中，可以插入多个tr标记，表示多行，一组|
标记表示插入一行，一行中可以有
多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
3.2 表格属性的设置
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。
表格边框属性说明
边框属性说明边框属性说明border表示表格边框粗细bordercolorlight表示表格亮边框颜色bordercolor表示表格边框颜色bordercolordark表示表格暗边形颜色
（1）border属性。用于设置边框的粗细，其单位为像素。
（2）bordercolor属性。用于设置边框的颜色，可以用rgb函数、十六进制数和颜色英文的名称。
（3）bordercolorlight属性。用于设置表格的亮边框，对表格左上边框生效。
（4）bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="3px">
<caption>23软件2班名单</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>
</body>
</html>
3.2.2 表格的宽度和高度属性
通过设置width属性和height，属性可以设置表格的宽度和高度。
（1）width。其单位可以是长度单位或者百分比，用于定义表格的宽度
（2）height。其单位可以是长度单位或者百分比，用于定义表格的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="160px" height="150px">
<caption>23软件2班名单</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>
</body>
</html>
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>
<table bgcolor="ffffbb">
<caption>23软件2班名单</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>
</body>
</html>
3.2.4 表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
其语法：
<table frame="" rules="">···内容···</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table frame="vsides" rules="all">
<caption>23软件2班名单</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></body>
</html>
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
（1）cellspacing。值的单位为像素或百分比，默认值为2px。
（2）cellpadding。值的单位为像素或百分比。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table cellspacing="10px" border="2px">
<caption>23软件2班名单</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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table cellpadding="10px" border="6px">
<caption>23软件2班名单</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>
</body>
</html>
3.2.6 表格水平对齐属性
通过是在表格标记的align属性，可以设定表格在水平方向上的对齐方式。align属性的取值可以为left、center、right。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table align="center">
<caption>23软件2班名单</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>
</body>
</html>
3.2.7 设置表格的（tr）标记行的属性
表格行tr标记的属性用于设置表格某一行的样式，其属性设置如表
属性值说明属性说明align行内容水平对齐bordercolor行的边框颜色valign行内容垂直对齐bordercolorlight行的亮边框颜色bgcolor行的背景颜色bordercolordark行的暗边框颜色
通过tr标记的align属性可以设置行内容的水平对齐方式。而水平方式有居中、居左、居右对齐；通过tr标记的valign属性可以设置行内容的垂直对齐方式。而垂直对齐方式有顶部、居中、底部对齐方式。
3.2.8 设置单元格的属性
表格列（td）标记的属性可以设置表格单元格的显示风格。td标记常用属性如表所示：
td标记的属性表
属性值说明属性值说明align单元格内容水平对齐bordercoloright单元格的亮边框颜色valign单元格内容垂直对齐bordercolordark单元格的暗边框颜色bgcolor单元格的背景颜色rowspan单元格跨行background单元格背景图像colspan单元格跨列bordercolor单元格的边框颜色width单元格宽度height单元格高度
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性进行设置单元格跨行合并。
其语法：
<td rowspan="行数">···</td>
3.2.9.2 单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
其语法：
<td colspan="列数">···</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 align="center">
<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>
</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>结束。表单定义类采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user"/>
</form>
</body>
</html>
3.4.2 定义域和域标题
利用fieldset标记可以再网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset将表单内容的一部分打包，生成一组相关表单的字段。
语法：
<form>
<fieldset>
<legend alig="left|center|right">域标签</legend>
<fieldset>
</form>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<fieldset>
<legend align="center">个人信息</legend>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
<br/>
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
</fieldset>
<fieldset>
<legend align="center">教学评价</legend>
<select multiple>
<option name="s" value="Web">网页</option>
<option name="s" value="java">Java</option>
<option name="s" value="Android">安卓</option>
<option name="s" value="ps">PS</option>
<option name="s" value="online">网络</option>
</select>
<br />
请输入您的宝贵意见
<textarea rows="4" cols="30"></textarea>
</fieldset>
</form>
</body>
</html>
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。
语法：
<input name="" type=""/>
3.4.3.1 单行文本输入框
设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。
<input name="" type="text" maxlength="" size="" value="" readonly/>
3.4.3.2 密码输入框
设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。
语法：
<input name="" type="password" maxlength="" size=""/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>
</body>
</html>
3.4.3.3 复选框
设置input标记type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法：
<input name="" type="" checkbox="" value="" checked/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
</form>
</body>
</html>
3.4.3.4 单选按钮
设置input标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name="" type="radio" value="" checked/>
3.4.3.5 图像按钮
设置input标记的type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插入一张图片，通过src属性加载图像。
语法：
<input name="" type="image" src="" width="" height=""/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
<br/>
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
</form>
</body>
</html>
3.4.3.6 提交按钮
设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法：
<input name="" type="submit" value="提交"/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登陆"/>
</form>
</body>
</html>
3.4.3.7 重置按钮
设置input标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法：
<input name="" type="reset" value=""/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登陆"/>
<input type="reset"/>
</form>
</body>
</html>
3.4.3.8 普通按钮
设置input标记的type属性值为button，可以实现向表单中插入一个普通按钮。
语法：
<input name="" type="button" value="" onclick=""/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<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>
</body>
</html>
3.4.3.9 文件选择框
设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。
语法：
<input name="" type="file" value=""/>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
<br/>
爱好：
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketball"/>篮球
<input type="checkbox" name="n4" value="run"/>长跑
<br />
请选择佐证材料：<input type="file"/>
</form>
</body>
</html>
3.4.3.10 隐藏框
设置input标记的type属性值为hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法：
<input name="" type="hidden" value=""/>
3.4.4 多行文本输入框
textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并且这些信息提交到服务器。
语法：
<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
请输入您的宝贵意见
<textarea rows="4" cols="30"></textarea>
</form>
</body>
</html>
3.4.5 下拉列表框
下拉列表可以再表单中接收用户的输入。下拉列表通常需要同时使用select和option标记来在表单中输入下拉菜单和列表项。
语法：
<select name="" size="" multiple>
<option value="" selected>文字信息1</option>
<option value="">文字信息2</option>
......
</select>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<select multiple>
<option name="s" value="Web">网页</option>
<option name="s" value="java">Java</option>
<option name="s" value="Android">安卓</option>
<option name="s" value="ps">PS</option>
<option name="s" value="online">网络</option>
</select>
<br />
请输入您的宝贵意见
<textarea rows="4" cols="30"></textarea>
</form>
</body>
</html>
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/>
传真: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"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
<td 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"><a href="#">更多>></a></p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
“第三章 表格布局和表单交互”的评论:
还没有评论
