3.1表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。
3.1.1表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或者表格等元素。表格中的内容按照相应的行或列进行分类和显示。
3.1.2表格的基本语法
<table border="3px"(边框) width="200px"(宽度) height="150px"(高度) bgcolor="#aaaff"(背景颜色 background="img/01.jpg" frame=“hsides”改变表格边框样式rules=“all”改变表格内部样式cellspacing="5px"单元格间距cellpadding="10px"单元格的边距)> 创建表格
<caption>23软件2班名单</caption> 表格标题
<tr>
<th>xx</th> 表头
<th>xx</th>
<th>xx</th>
</tr>
<tr>
<td>xx</td> 表内容
<td>xx</td>
<td>xx</td>
<tr>
3.2表格属性设置
3.2.1表格边框属性
1.border属性，用于设置边框的粗细，单位是像素。
2.bordercolor属性，用于设置表格边框的颜色，可以使用rgb函数，十六进制数和颜色英文名称。
3.bordercolorlight属性，用于设置表格亮边框，对表格左上边框生效。
4.bordercolordark属性，用于设置表格暗边框，对表格右下边框生效。
3.2.2表格的宽度与高度的属性
1.width，其单位可以是长度单位或者百分比，用于定义表格的宽度。
2.height，其单位可以是长度单位或者是百分比，用于定义表格的高度。
3.2.3表格背景颜色与背景图像属性
1.bgcolor,可以用rgb函数，十六进制数和颜色英文名称来设置背景颜色。
2.background，设置背景图像，图像的路径可以是绝对路径或者是相对路径。
3.同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4表格边框样式属性
语法：
<table frame=" " rules=" ">******内容*******</table>
3.2.5表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记
3.2.6表格水平对齐属性
左右居中对齐用 align=“left或者right或者center”
上下中对齐用 valign=“top或者middle或者bottom”
3.2.7设置表格的（tr）标记行的属性
3.2.8设置单元格的属性
3.2.9表格单元格跨行、跨列属性
3.3表格嵌套
3.4表单
3.4.1表单标记
3.4.2定义域和域标题
<fieldset>
<legend align="center">个人信息</legend>
</fieldset>
3.4.3表单信息输入
3.4.3.1单行文本输入框
<from>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</from>
3.4.3.2密码输入框
<from>
密码：<input type="password" name="password"/>
</from>
3.4.3.3复选框
<from>
爱好：
<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"/>长跑
</from>
3.4.3.4单选按钮
<from>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性
</from>
3.4.3.5图像按钮
<from>
<input type="image" src="img/anniu.jpg"/>
</from>
3.4.3.6提交按钮
<from>
<input type="submit" value="登录"/>
</from>
3.4.3.7重置按钮
<from>
<input type="reset"/>
</from>
3.4.3.8普通按钮
<from>
<input type="button" value="注册" οnclick="javascript:alert('注册新用户')"/>
</from>
3.4.3.9文件选择框
<from>
请选择佐证材料：<input type="file"/>
</from>
3.4.3.10隐藏框
<from>
<input type="hidden" name="ABC" value="123"/>
</from>
3.4.4多行文本输入框
<from>
请输入你的宝贵意见：
<textarea rows="4" cols="30"></textarea>
</from>
3.4.5下拉列表框
<select multiple>
<option name="" value="">网页</option>
<option name="" value="">安卓</option>
<option name="" value="">Java</option>
<option name="" value="">网络</option>
<option name="" value="">PS</option>
</select>
3.5综合案例-表格与表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室————联系我们</title>
<style type="text/css">
.chu{
font-weight:hold;
}
.zil{
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">
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">
<img src="img/logo.jpg" alt="" width="100" height="63"/></td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">网站首页</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">关于我们</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">团队合作</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">相关作品</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">设计理念</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">人物介绍</td>
<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">联系我们</td>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="20">
<tr>
<td height="318" width="25%"> </td>
<td height="280" valign="top">
<table width="100%" border="0" cellpadding="20" cellspacing="0">
<tr>
<td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#ffaf03">
<p class="zibai">地址:广东省江门市XXXXXXXXXXXXX<br />
电话:0750-XXXXXXX<br />
传真:0750-XXXXXXX<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" cellpadding="20" cellspacing="0">
<tr>
<td height="30" align="center" bgcolor="#ffffff" class="zil">关于我们</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"><a href="#">更多 >></a></p>
</td>
</tr>
</table>
</td>
<td width="280">
<table width="100%" border="0" cellspancing="0" cellpadding="20" style="border-spacing: 0px;">
<tr>
<td height="30" align="center" bgcolor="#ffffff" class="zil">团队合作</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 chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册信息</title>
</head>
<body>
<form>
<fieldset>
<legend align="center">用户注册信息</legend>
用户名：<input type="text" name="user"/><br/>
密码：<input type="password" name="password"/><br/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female"/>女性<br/>
出生年月：<input type="password" name="password"/>年
<select>
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
<option name="5" value="5">5</option>
<option name="6" value="6">6</option>
<option name="7" value="7">7</option>
<option name="8" value="8">8</option>
<option name="9" value="9">9</option>
<option name="10" value="10">10</option>
<option name="11" value="11">11</option>
<option name="12" value="12">12</option>
</select>月<br/>
业余爱好：
<input type="checkbox" name="n1" value="ks" checked/>看书
<input type="checkbox" name="n2" value="sw"/>上网
<input type="checkbox" name="n3" value="dwq"/>打网球<br/>
相片：<input type="file"/></br>
意见或建议：
<textarea rows="4" cols="30"></textarea><br/>
<input type="submit" value="提交"/>
<input type="reset"/>
</fieldset>
</form>
</body>
</html>
扫一扫
1376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
