3.1 表格概述
1.表格的结构
表格由行与列组成的二维表，每行由一个或多个单元格组成
2.表格的基本语法
注：一个表格可以插入多个tr标记，表示多行
语法
<table>
<caption>表格标题</caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
.......
</table>
3.2表格属性设置
1.表格边框属性
改变表格外观
语法
<table border=""bordercolor="" bordercolorlight=""bordercolordack="">...</table>
border属性：设置边框的粗细，单位像素（px）
border color属性：设置表格边框颜色，可以用rgb函数，16进制数和颜色英文名称
border color light属性：设置亮边框，对表格左上边框生效
border color dack属性：设置暗边框，对表格右下边框生效
2.表格的宽度和高度属性
设置表格高度和宽度
语法
<table width="" height="">...</table>
width 定义表格的宽度，单位：百分比或长度单位
height 定义表格的高度，单位：百分比或长度单位
3.表格背景颜色与背景图像属性
改变表格的背景颜色； background属性为表格添背景图像效果，使表格美观
语法
<table bgcolor="" background="">...</table>
bgcolor 设置背景颜色，可以用rgb函数，16进制数和颜色英文名称
background 设置背景图像，图像路径可以是绝对路径或相对路径
同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色
4.表格边框样式属性
fame属性改变表格边框的样式；rules属性改变内部边框的样式
语法
<table frame="" rules="">...</table>
5.表格单位格间距、单位格边距属性
cellspacing属性改变表格单元格之间的间隔，使网页中表格内容松散一些；cellpadding属性增加表格内容和内部边框之间的距离
语法
<table cellspacing=""cellpadding="">...</table>
cellspacing 单位像素或百分比，默认2px
cellpadding 单位像素或百分比
6.表格水平对齐属性
align属性：设定水平方向的对齐方式
语法
<table align="left|center|right">...</table>
7.设置表格的（tr）标记行的属性
tr标记属性：设置表格某一行的样式
align属性设置水平对齐方式：左对齐（left）、居中对齐（center）、右对齐（right）
valign属性设置垂直对齐方式：顶部对齐（top）、居中对齐（middle）、底部对齐（bottom）
语法
<table align="left|center|right">
<tr align="left|center|right" valign="top|middle|bottom">
<td></td>
</tr>
</table>
8.设置单元格的属性
td标记属性设置单元格显示风格
单位格跨行
使用td标记的rowspan属性设置单元格跨行合并
语法
<td rowspan="行数">...</td>
注：rowspan="n"设置跨n行
单位格跨列
使用td标记的colspan属性设置单元格跨列合并
语法
<td colspan="列数">...</td>
注：colspan="n"设置跨n列
示例
<!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>
......
</tr>
</table>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌套表格布局页面</title>
<style>
body {
font-size: 18px; /* 横线下是3号字 */
}
</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 表单
1.表单的标记
表单from标记，表单定义采集数据的范围，其所包含的数据内容将被完整地提交给服务器
语法
<form method="post" action="">
<input type="text" name=""/>
</form>
2.定义域和域标题
利用fieldset标记在网页上定义域，对表单的相关内容分组
语法
<form>
<fieldset>
<legend alig="left|center|right">域标题内容</legend>
</fieldset>
</form>
注：fieldset标记没有属性，是成对标记。
3.表单信息输入
表单的主要功能是为用户提供输入信息的接口。
表单的输入信息标记是input标记，可以输入一行内容
语法
<input name="" type=""/>
3.1 单行文本输入框
设置input标记的type属性为text，可以插入单行文本框
语法
<input name="" type="text" maxlength="" size="" value=""readonly/>
3.2 密码输入框
设置input标记的type属性为password，实现表单中插入一个密码输入框
语法
<input name="" type="password"maxlength="" size="" />
3.3 复选框
设置input标记的type属性为checkbox，实现向表单插入一个复选框，可以进行多个选择
语法
<input name="" type="checkbox" value=""checked/>
3.4 单选按钮
设置input标记的type属性为radio，实现向表单插入一个单选按钮，可以进行单选操作
语法
<input name="" type="radio" value=""checked/>
3.5 图像按钮
设置input标记的type属性为image，实现向表单插入一个图像按钮，可以插入一张图像
语法
<input name="" type="image" src="" width="" height=""/>
3.6 提交按钮
设置input标记的type属性为submit，实现向表单插入一个提交按钮
语法
<input name="" type="submit" value="提交"/>
3.7 重置按钮
设置input标记的type属性为reset，实现向表单插入一个重置按钮，可以实现内容的重置
语法
<input name="" type="reset" value="重置"/>
3.8 普通按钮
设置input标记的type属性为button，实现想表单插入一个普通按钮
语法
<input name="" type="button" value="" οnclick=""/>
3.9 文件选择框
设置input标记的type属性为file，实现向表单插入一个文件选择框
语法
<input name="" type="file" value="" />
3.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="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
表单的标记
<br />
用户名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male"/>男
<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="backetball"/>打篮球
<input type="checkbox" name="n4" value="soccer/>踢足球
<input type="checkbox" name="n5" value="run"/>长跑
多选
<br />
<input type="image" name="start" src="img/dd747bd6017b6f1bc88d88362871aad.png"/>
插入图像
<br />
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
输入密码
<br />
<input type="submit" name="submit" value="登录"/>
<input type="reset" name="reset"/>
提交按钮和重置按钮
<br />
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
普通按钮
<br />
<input type="submit" name="submit" value="登录"/>
<input type="reset" name="reset"/>
<input type="button" name="burron" value="注册新用户" onclick="javascript;alert('注册新用户')"/>
<br />
<input type="file" name="file"/>
<br />
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
插入文件
<br />
请输入您的宝贵意见
</form>
</body>
</html>显示效果
4.多行文本输入框
textarea标记向表单插入多行文本输入框。可以输入多行的内容，也可以换行
语法
<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>
5.下拉列表框
下拉列表可以在表单中接收用户的输入
语法
<select name="" size="" multiple>
<option value="" selected>文字信息1</option>
<option value="">文字信息2</option>
</select>
案例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 />
[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 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="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 type="password" name="textfield2" id="textfield2" /></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>显示效果
