3.1 表格概述
3.1.1 表格的结构
表格是由行和列组成的二维表，，并且包含文本，图片等多种类型
3.1.2 表格的基本语法
<taeble>(创建一个表格）
<caption>（标题）</caption>
<tr>(表头)
<th>（表头内容)</th>
</tr>
<td>（内容）</td>
<tr
</taeble>
<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>3.2 表格属性的设置
3.2.1 表格边框属性
<table border="1px">：设置边框
3.2.2 表格的宽度和高度属性
<table width="设置表格宽度" height="设置表格高度">
<table background="img/xx.jpg" width="200px" height="150px">3.2.3 表格背景颜色与表格图像属性
<table bgcolor="设置背景颜色">
<table background="设置背景图">
3.2.4 表格边框样式属性
<table frame="设置外边框"rules="设置内边框">
3.2.5 表格单元格间距、单元格边距属性
<table cellspacing="设置单元格间距">
<table cellpadding（设置单元格边距）="10px" border="2px">
3.2.6 表格水平对齐属性
<table align="...">可以设置表格的对齐，于先前一样，只需要在“<table>”内，和其他的内容不分前后。
<table align="left">居左（这是默认的，如果没有设置的话就会默认位于左边）。
<table align="center">居中。
<table align="right">居右。
3.2.7 设置表格的（tr）标记行的属性
<table align="...">可以设置表格的对齐，于先前一样，只需要在“<table>”内，和其他的内容不分前后。
<table align="left">居左（这是默认的，如果没有设置的话就会默认位于左边）。
<table align="center">居中。
<table align="right">居右。
3.2.8 设置单元格的属性
<th align="right" valign="bottom">序列</th>
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
rowspan="2"跨行
3.2.9.2 单元格跨列
colspan="2"跨列
3.3 表格嵌套
3.4 表单
<form>:表单
3.4.1 表单标记
<form>......</form>
3.4.2 定义域和域标题
定义一个区域在其中编辑，一种非常常见的格式。
其中主要由“fieldset>
<legend>定义域</legend>”的格式组成。
3.4.3 表单信息输入
所有的输入都是用<input/>来输入，但是会用<input type="..."/>来区别。
3.4.3.1 单行文本输入框
<form>
用户名:<input type="text" name="uese"/>
密码:<input type="password" name="password"/>
</form>3.4.3.2 密码输入框
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password"name="password"/>
</form>3.4.3.3 复选
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="name"value="male" checked/>男
<input type="radio" name="name"value="female"/>女
<br />
爱好：
<input type="checkbox" name="n1" value="sing"/>跳舞
<input type="checkbox" name="n2" value="dance"/>打球
<input type="checkbox" name="n3" value="basketball"/>美术
<input type="checkbox" name="n4" value="run"/>下棋
</form>3.4.3.4 单选按钮
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="name"value="male" checked/>男
<input type="radio" name="name"value="female"/>女
<br />
<form>3.4.3.5 图像按钮
<form>
<input type="image" src="img/yxks.jpg"/>
</form>3.4.3.6 提交按钮
<form>
<input name="tijiao" type="submit" value="你好"/>
</form>3.4.3.7 重置按钮
form>
用户名：<input type="text" name="user"/>
密码：<input type="password"name="password"/>
<br />
<input type="submit" value="登入"/>
<input type="reset"/>
</form>3.4.3.8 普通按钮
<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>3.4.3.9 文件选择框
<form>
<input type="file"/>
</form>
<form>
<input type="file"/>
</form>3.4.3.10 隐藏框
<form>
<input name="yincang" type="hidden" value="22"/>
</form>3.4.4 多行文本输入框
上面有单行输入，那么此时就开始多行，毕竟有时候需要很多字数。比如给与意见，或者其他数据。
<textarea rows="..." cols="...">...</textarea>：是设置文本域，就是输入数据的行数和宽度
<form>
多行文本输入框：
<textarea rows="5" cols="5"></textarea>
</form>
3.4.5 下拉列表框
select中有三个属性：
name定义sele标记的名称。
size下拉列表框可见的内容（旁边滑轮可以滑动内容）。
miltiple规定可以选择多个选项（可以删除此项）。
<option...>...</option>中有两个属性：
value规定列表项的值。
selected设置预选列的列表项
<form>
<h3>请选择您的课程：</h3>
<select size="5" multiple>
<option name="course" value="cA" selected>数据跌宕</option>
<option name="course" value="cB">崩坏核心</option>
<option name="course" value="cC">破碎篇章</option>
<option name="course" value="cD">史诗长河</option>
<option name="course" value="cE">超现实规格感染</option>
<option name="course" value="cF">书写者层次</option>
<option name="course" value="cG">万物一体</option>
</form>3.5 综合案例——表格与表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室————联系我们</title>
<style type="text/css">
.chu {
font-weight:bold;
}
.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" 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="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>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="20">
<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="zil">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAF03">
<p class="zibai">
地址:广东省江门市XXXXXXXXXXX<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="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" cellspacing="0" cellpadding="20">
<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"> </p>
<p class="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
