3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐,网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。
3.1.1 表格的结构
<table>表格开始，</table>表格结束
<tr>行开始，</tr>行结束
<th>表头开始，</th>表头结束
td定义单元格或列
3.1.2 表格的基本语法
<caption>23软件1班</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="2px"><table border="2px"bordercolor="#0000ff">
3.2.2 表格的宽度和高度属性
<table border="2px" width="200px" height="150px"><table border="2px" width="20%" height="20%">
3.2.3 表格背景颜色与表格图像属性
<table bgcolor="#aaaaff"><table border="2px" width="200px" height="150px" bgcolor="#aaaaff" background="img/school.png">
3.2.4 表格边框样式属性
<table frame="hsides" rules="none">
3.2.5 表格单元格间距、单元格边距属性
<table border="2px" cellspacing="5px"><table border="2px" cellpadding="5px">
3.2.6 表格水平对齐属性
<table align="center">
3.2.7 设置表格的（tr）标记行的属性
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right">
<td>2</td>
<td>张兰</td>
<td>女</td>
</tr>
3.2.8 设置单元格的属性
<tr valign="top">
<th>序号</th><!--表头-->
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center"valign="middle">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right"valign="bottom">
<td>2</td>
<td>张兰</td>
<td>女</td>
</tr>
align水平方向center right left，valign垂直方向top middle bottom
<td align="right"valign="bottom">张三</td>
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格d标记的rowspan 属性可以设置单元格跨行合并。
语法:
<td rowspan="行数">…</td>
说明:rowspan属性可以设置单元格跨行。通过rowspan="n"(n是正整数),可置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义td标记。
3.2.9.2 单元格跨列
使用单元格td标记的colspan 属性可以设置单元格跨列合并。
语法:
<td colspan="列数" >…</td>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个标记。
3.3 表格嵌套
<table border="1" width="30px">
<tr>
<td>53615</td>
</tr>
<tr>
<td>
<table border="1" width="30px>
<tr height="50">
<td>123</td>
<td>5326</td>
</tr>
</table>
</td>
</tr>
</table>
3.4 表单
<form name="form1" method="post" action="" enctype="text/plain"></form>
3.4.1 表单标记
表单 form 标记为成对标记，以<fomm>开始和</fomm>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器
3.4.2 定义域和域标题
<form name="form1" method="post" action="" enctype="text/plain">
用户名：<input type="text" name="user"/>
</form>
用户类型：<input type="text" name="use" value="普通用户"readonly/>
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
3.4.3.2 密码输入框
密码:<input type="password" name="password"/>
3.4.3.3 复选框
<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="run"/>跑步
3.4.3.4 单选按钮
性别：
<input type="radio" name="sex"value="male"checked/>男
<input type="radio" name="sex"value="female"/>女
3.4.3.5 图像按钮
<input type="image" name="start" src="img/4b17b9ba189b46bc2fbe0913d6584db.png"/>
3.4.3.6 提交按钮
<input type="submit" name="submit"value="提交按钮"/>
3.4.3.7 重置按钮
<input type="reset" name="resert"/>
3.4.3.8 普通按钮
<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')"/>
3.4.3.9 文件选择框
<input type="file" name="file"/>
3.4.3.10 隐藏框
<input type="hidden" name="abc" value="123"/>
3.4.4 多行文本输入框
请输入你的评价：
<textarea name="info" rows="5" cols="50"></textarea>
3.4.5 下拉列表框
请选择课程：
<select>
<option value="s1">1</option>
<option value="s2">2</option>
<option value="s3">3</option>
</select>
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-fnumily :"微软雅黑";
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="20" cellpadding="20">
<tr>
<td height= "30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAFO3">
<p class="zibai">地址:广东省江门市XXXXXXXXX<br/>
电话:0750-XXXXXX<br/>
传真:0750-XXXXXX<br/>
QQ:123456778<br/>
电子邮箱:<br />
123@163.com<br />
工作室网站：<br />
www.XXXX.com</p >
</td>
</tr>
</table>
</td>
<td width="280"valign="top">
<table width="100%" border="O" 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 chu"><a href="#">更多>></a></p>
<td>
</tr>
</table>
</td>
<td width="280">
<table width="100%" border="O" 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册信息</title>
<style type="text/css">
fieldset {
width:700px;
}
</style>
</head>
<body>
<form action=" " method ="post" enctype =" multipart/form-data" name =" forml" id ="form1">
<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 = " password" name =" textfield2" id=" textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">确认密码:</td>
<td><input type = " password" name = " textfield3" id=" textfield3" /></td>
</tr>
<tr>
<td width="200" align="right">性别:</td>
<td><input name = "radio" type="radio" id="radio" value="radio" checked="checked" />
男<img src="img/Male.gif" width="22" height="21" align="absmiddle" />
<input type = "radio" name="radio" id="radio2" value="radio2" />
女<img src ="img/Female.gif" width="23" height="21" align="absmiddle" /></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" />看书
<input type = "checkbox" name="checkbox2" id="checkbox2" />上网
<input type = "checkbox" name="checkbox3" id="checkbox3" />打球</td>
</tr>
<tr>
<td width="200" align="right">相片:</td>
<td height="25" ><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>
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
