3.1 表格概述
网页的重要容器，可包含图片和文字。
3.1.1 表格的结构
3.1.2 表格的基本语法
由<table>包含
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<caption>标题</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>
</table>
</body>
</html>运行结果
3.2 表格属性的设置
3.2.1 表格边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<caption>标题</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>
</table>
</body>
</html>
运行结果
边框颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="2px" bordercolor="#0000ff">
<caption>标题</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>
</table>
</body>
</html>结果
3.2.2 表格的宽度和高度属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="200px" height="150px" border="1">
<caption>标题</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>
</table>
</body>
</html>结果
百分比方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="20%" height="40%" border="1">
<caption>标题</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>
</table>
</body>
</html>结果
3.2.3 表格背景颜色与表格图像属性
bgcolor=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="20%" height="40%" border="1" bgcolor="#aaaaff">
<caption>标题</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>
</table>
</body>
</html>结果
背景图 background
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="20%" height="40%" border="1" background="img/xx.png">
<caption>标题</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>
</table>
</body>
</html>结果
3.2.4 表格边框样式属性
其中fram是外边框的值，rules是内边框的值例如：
<table frame="hsides" rules="all"> 
3.2.5 表格单元格间距、单元格边距属性
单元格间距 即单元格之间的距离
<table border="2px" cellspacing="8px"> 
单元格边距：单元格内容与单元格之间的距离
<table border="2px" cellpadding="8px">运行结果
3.2.6 表格水平对齐属性
表格的对齐方式，表格内容不动
<table border="2px" align="center"> 结果
内容对齐就在<tr>里设置对齐方式
<table border="2px" align="center">
<caption>标题</caption>
<tr align="center">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="left">
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>结果
3.2.7 设置表格的（tr）标记行的属性
<table width="450px" height="150px" border="1px" align="center" valign="top">
<caption>标题</caption>
<tr align="center" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="left" valign="bottom">
<td>2</td>
<td>李四</td>
<td>女</td>
结果
3.2.8 设置单元格的属性
lign|单元格内容水平对齐| valign|单元格内容垂直对齐|
bgcolor|单元格的背景颜色| background|单元格背景图像|
bordercolor|单元格的边框颜色| height|单元格高度|
bordercolordark|单元格的暗边框颜色| bordercolorlight|单元格的亮边框颜色|
rowspan|单元格跨行| colspan|单元格跨列| width|单元格宽度|
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
3.2.9.2 单元格跨列
<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>运行结果
3.3 表格嵌套
嵌套表格是一种常用的页面布局方式，利用表格嵌套可以设计比较复杂且美观的页面效果，但是在一般情况下，使用嵌套表格时，表格不宜过多使用，否则会降低网站的访问速度。在使用嵌套时，内层表格放在外层表格的<td>标签内，语法如下：
<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: 36px;}
</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 表单
3.4.1 表单标记
<form name="form1" method="post" action=""></form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表单</title>
</head>
<body>
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<h3>输入课程成绩</h3>
姓名:<input type="text"/><br/>
网页设计：<input type="text" size="15"/>
数据结构：<input type="text" size="15"/><br/><br/>
<input type="submit" value="成绩提交"/>
<input type="reset" value="成绩重置"/>
</form>
</body>
</html>结果
3.4.2 定义域和域标题
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="usertype" value="普通用户" readonly/>
</form>运行结果
3.4.3.2 密码输入框
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
</form>运行结果
3.4.3.3 复选框
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n13" value="rap"/>rap
<input type="checkbox" name="n4" value="basketball"/>篮球
</form>运行结果
3.4.3.4 单选按钮
3.4.3.5 图像按钮
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n13" value="rap"/>rap
<input type="checkbox" name="n4" value="basketball"/>篮球
<input type="image" name="start" src="img/yxks.png"/>
</form> 
3.4.3.6 提交按钮
3.4.3.7 重置按钮
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置"/>
</form>运行结果
3.4.3.8 普通按钮
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="usertype" value="普通用户" readonly/>
密码：<input type="password" name="password"/>
<input type="button" name="button" value="注册" onclick="javascript:alert(注册新用户)"/>
</form>运行结果
3.4.3.9 文件选择框
<form name="form1" mrthod="post"
action="form_action.jsp" enctype="text/plain">
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="n1" value="sing"/>唱歌
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n13" value="rap"/>rap
<input type="checkbox" name="n4" value="basketball"/>篮球
<br/>
<input type="image" name="start" src="img/yxks.png"/>
<br/>
请输入您的宝贵意见
<textarea name="nifo" row="4" cols="50"></textarea>
<br/>
请选择职业规划
</form> 结果
3.4.3.10 隐藏框
<input type="hidden" name="id" value="40">
3.4.4 多行文本输入框
3.4.5 下拉列表框
<select>
<option value="c1" selected>c语言程序设计</option>
<option value="c2">计算数学</option>
<option value="c3">数据结构</option>
<option value="c4">Java程序设计</option>
</select>结果
3.5 综合案例——表格与表单
<!DOCTYPE html>
<html lang="en">
<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" 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="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" 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" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
</tr>
<tr>
<td height="30" bgcolor="#FFAF03">
<p class="zibai">地址:广东省江门市XXXXXXXXX<br/>
电话:0750-XXXXXX<br/>
传真:0750-XXXXXX<br/>
QQ:12345678<br/>
电子邮箱:<br/>
123@163.com<br/>
工作室网站:<br/>
www.XXX.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" 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="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>运行结果
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
