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 表格边框属性
border用于表格边框粗细 单位是像素
bordercolor用于设置表格边框颜色 可使用rgb函数 十六进制数和颜色英文名称
bordercolorlight用于设置表格亮边框 对表格左上边框有效
bordercolordark用于设置表格暗边框 对表格右下边框有效
3.2.2 表格的宽度和高度属性
width可以是长度单位或百分比 用于定义表格宽度
height可以是长度单位或百分比 用于定义表格高度
3.2.3 表格背景颜色与表格图像属性
bgcolor属性可以改变表格的背景颜色
background属性可以为表格增添背景图像效果
3.2.4 表格边框样式属性
fame属性可以改变边框的样式
rules属性可以改变表格内部的边框样式
fame属性值为hsides只显示表格上下边框 不显示左右边框
rules属性值为all显示表格内部的所以边框
3.2.5 表格单元格间距、单元格边距属性
cellspacing属性可以改变表格单元格之间的间隔
cellpadding属性可以增强表格单元格的内容与内部边框之间的距离
cellspacing值的单位像素或百分比，默认值2px
cellpadding值的单位像素或百分比
3.2.6 表格水平对齐属性
通过tr标记align水平对齐方式
left居左 center居中 right居右
3.2.7 设置表格的（tr）标记行的属性
align设置水平对齐方式 valign设置垂直水平方式
top顶部对齐 middle居中 bottom底部对齐
3.2.8 设置单元格的属性
td属性设置表格单元格显示风格
align 单元格内容水平对齐 bordercolorlight 单元格的亮边框颜色
valign 单元格内容垂直对齐 bordercolordark 单元格的暗边框颜色
bgcolor 单元格的背景颜色 rowspan 单元格跨行
background 单元格背景图像 colspan 单元格跨列
bordercolor 单元格的边框颜色 width 单元格宽度
height 单元格高度
3.2.9 表格单元格跨行、跨列属性
单元格td标记的rowspan属性可以设置单元格跨行合并
单元格td标记的colspan属性可以设置单元格跨列合并
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>
扫一扫
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
