3.1 表格概述
3.1.1 表格的结构
表格是由行和列组成的二维表，表格最上方一行是标题，往下一行是表头，表头下面就是内容
3.1.2 表格的基本语法
<table>：表格域，创建表格
<caption>：表格的标题
<tr>:从<tr>开始包起来的是表格一行的内容，<tr>行开头，</tr>行结尾
<th>:表头内容
<td>:单元格内容
3.2 表格属性的设置
3.2.1 表格边框属性
border：设置边框的粗细，单位是像素px
3.2.2 表格的宽度和高度属性
宽度：width
高度：height
如果设置的宽高太小的话，表格只有设置的宽度会生效，设置的高度会失效。
响应式布局，用百分比作为单位，永远占屏幕的百分比 会跟着屏幕的变化而变化
3.2.3 表格背景颜色与表格图像属性
bgcolor属性：设置背景颜色
background属性：设置图像背景图
如果背景图太大，只会取左上角一部分
3.2.4 表格边框样式属性
| frame属性 | 说明 | rules属性 | 说明 |
|---|---|---|---|
| above | 显示上边框 | all | 显示所有内部边框 |
| below | 显示下边框 | none | 不显示内部边框 |
| hsides | 显示上下边框 | rows | 仅显示行边框 |
| vsides | 显示左右边框 | cols | 仅显示列边框 |
| lhs | 显示左边框 | groups | 显示介于行列间边框 |
| rhs | 显示右边框 | border | 显示上下、左右边框 |
| void | 不显示边框 |
frame：显示外边框（上下左右）
rules属性：显示内边框
3.2.5 表格单元格间距，单元格边距属性
间距cellspacing：两个单元格的距离
边距cellpadding：单元格内容和单元格边框之间的距离
3.2.6 表格水平对齐属性
align属性：居左：left ；居中：center ；居右：right
表格内容位置没变，表格整体位置变化
3.2.7 设置表格的(tr) 标记行的属性
表格行tr标记的属性用于设置表格某一行的样式
对齐方式：align属性（内容水平对齐）：左对齐，居中对齐，右对齐
valign属性（内容垂直对齐）：top：顶部对齐，middle：居中对齐，bottom：底部对齐
3.2.8 设置单元格的属性
表格的td标签的属性可以给某个单元格设置属性
3.2.9 表格单元格跨行、跨列属性
单元格跨行：使用单元格td标记的rowspan属性可以设置单元格跨行合并
单元格跨列：使用单元格td标记的colspan属性可以设置单元格跨列合并
单元格跨行、跨列的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置单元格跨行，跨列属性</title>
</head>
<body>
<h3 align="center">设置单元格跨行、跨列属性</h3>
<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:00-12:00</td>
<td>14:00-16:00</td>
<td>16:00-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>
</body>
</html>代码运行结果
3.3 表格嵌套
表格嵌套是一种常见的页面布局方式，利用表格嵌套可以设计比较复杂且美观的页面效果。
表格嵌套的代码例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套表格布局页面</title>
<style>
boby{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>标签：里面可包含各种表单信息输入标记
语法：<form></form>
3.4.2 定义域和域标题
<form>
<fieldset>
<legend>定义域标题</legend>
</fieldset>
</form>
<fieldset>标签，每个<fieldset>标签都是一个定义域
3.4.3 表单信息输入
所有的信息都在<input>标签输入
type属性有很多不同的值
1.单行文本输入框
设置input标记的type属性值为text，可插入一个单行文本框
语法：<form>
用户名:<input type="text"name=" "/>
</form>
输入的数据只能单行显示，不能换行
name属性:定义index元素的名称
readonly属性：规定文本框中内容只读，不能修改和编辑
2.密码输入框
语法：<input type="password" name=" ">
设置input标记的type属性值为password，可插入一个密码输入框
输入的密码不会显示，而是会以显示字符.（黑点）替代
3.复选框
语法：<input type=""name=""value=""checked/>
设置input标记的type属性值为checkbox，可插入一个复选框
用户可用复选框在网页上设置多项选择
value属性：向后端传值
checked：默认被选定
4.单选按钮
语法：<input type="radio"name=" "value=" "checked/>
设置input标记的type属性值为radio
5.图像按钮
语法：<input type="image" src=" "/>
设置input标记的type属性值为image,通过src属性加载图像
6.提交按钮
语法：<input type="submit"value=" "/>
设置input标记的type属性值为submit
7.重置按钮
语法：<input type="reset"/>
设置input标记的type属性值为reset,重置按钮会使表单内容全部清空
8.普通按钮
语法：<input type="button"value=" "οnclick=" "/>
设置input标记的type属性值为button,如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
onclick属性：绑定事件代码、自定义函数或直接使用脚本代码
9.文件选择框
语法：<input type="file"
设置input标记的type属性值为file
10.隐藏框
语法：<input type="hidden"name=" "value=" "/>
设置input标记的type属性值为hidden
3.4.4 多行文本输入框
textarea标记可以向表单插入多行文本输入框
语法：<textarea rows=" "cols=" "></textarea>
rows:设置文本行数，cols：设置文本区内的可见宽度
3.4.5 下拉列表框
下拉列表通常需要同时使用select和option标记来在表单中插入下拉菜单和列表项
语法：
<select name=" " size=" " multiple>
<option value=" " selected>文字</option>
<option value=" " >文字</option>
......
</select>
1.select标记是成对标记，select有三个属性:name,size,multiple
name属性：定义select标记的名称
size属性：规定下拉列表框中可见选项的数目
multiple属性：规定可选择多个选项
2.option标记由两个属性：value，selected
value属性：规定列表项的值
selected属性：设置预选列表项
4.以上所有内容的代码例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--表格概述-->
<!-- 3.1.1表格的结构-->
<!--3.1.2 表格的基本语法-->
<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>
<br/>
<br/>
<!--3.2 表格属性的设置-->
<!--3.2.1 表格边框属性-->
<table border="3px">
<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>
<br/>
<br/>
<!--3.2.2 表格的宽度和高度属性-->
<table width="200px" height="150px">
<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>
<br/>
<br/>
<!--用百分比设置高度和宽度-->
<!--响应式布局，用百分比，表示表格占屏幕的百分比-->
<table width="20%" height="20%">
<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>
<br/>
<br/>
<!--3.2.3 表格背景颜色与表格图像属性-->
<table 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>
<br/>
<br/>
<!--设置表格图像背景图-->
<table background="img/school.jpg">
<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>
<br/>
<br/>
<!--3.2.4 表格边框样式属性-->
<table frame="vsides"rules="all">
<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>
<br/>
<br/>
<!--3.2.5 表格单元格间距，单元格边距属性-->
<!--只加了边框的表格-->
<table border="2px">
<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>
<br/>
<br/>
<!--加了间距的表格-->
<table cellspacing="10px" border="2px">
<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>
<br/>
<br/>
<!--加了边距的表格-->
<table cellpadding="10px" border="2px">
<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>
<br/>
<!--3.2.6 表格水平对齐属性-->
<!--表格左对齐-->
<table align="left">
<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>
<br/>
<!--表格居中对齐-->
<table align="center">
<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>
<br/>
<!--表格右对齐-->
<table align="right">
<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>
<br/>
<!--3.2.7 设置表格的(tr) 标记行的属性-->
<table border="2px" width="200px" height="150px">
<caption>表格每一行内容对齐</caption>
<tr align="left"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>
</table>
<br/>
<!--3.2.8 设置单元格的属性-->
<table border="2px" width="200px" height="150px">
<caption>给某个单元格设置属性</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td align="left"valign="top">张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
<br/>
<!--3.4 表单-->
<!--3.4.2 定义域和域标题-->
<form>
<fieldset>
<legend align="center">个人信息</legend>
</fieldset>
<br/>
<fieldset>
<legend align="center">教学评价</legend>
</fieldset>
</form>
<br/>
<!--往定义域中添加内容-->
<form>
<fieldset>
<legend align="center">个人信息</legend>
姓名：<input type="text"name="name"/>
性别：
<input type="radio"name="sex"value="male"checked/>男生
<input type="radio"name="sex"value="female"/>女生
<br/>
爱好：
<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"/>长跑
<br/>
请选择佐证材料：<input type="file"/>
</fieldset>
<br/>
<fieldset>
<legend align="center">教学评价</legend>
请选择课程
<select multiple><!--可实现多选，按住CTRL键-->
<option name="s">网页</option>
<option name="s">Java</option>
<option name="s">安卓</option>
<option name="s">PS</option>
<option name="s">网络</option>
</select>
请输入您的宝贵意见
<textarea rows="4"cols="30"></textarea>
</fieldset>
</form>
<!--3.4.3 表单信息输入-->
<!--1.单行文本输入框-->
<form>
用户名:<input type="text"name="user"/>
</form>
<br/>
<!--2.密码输入框-->
<form>
用户名:<input type="text"name="user"/>
密码：<input type="password" name="password">
</form>
<br/>
<!--单选、复选按钮-->
<form>
姓名：<input type="text"name="name"/>
性别：<!--单选按钮-->
<input type="radio"name="sex"value="male"checked/>男生
<input type="radio"name="sex"value="female"/>女生
<br/>
爱好：<!--复选框-->
<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"/>长跑
</form>
<br/>
<!--5.图像按钮-->
<form>
<input type="image" src="img/ks.jpg"/>
</form>
<br/>
<!--6.提交按钮-->
<form>
用户名:<input type="text"name="user"/>
密码：<input type="password" name="password">
<br/>
<input type="submit"value="登录"/><!--6.提交按钮-->
<input type="reset"/><!--7.重置按钮-->
<input type="button"value="注册"onclick="javascript:alert('注册新用户')"/><!--8.普通按钮-->
</form>
<br/>
<!--9.文件选择框-->
<form>
请选择佐证材料：<input type="file"/>
</form>
<br/>
<!--10.隐藏框-->
<form>
<input type="hidden"name="abc"value="123"/>
</form>
<br/>
<!--3.4.4 多行文本输入框-->
<form>
请输入您的宝贵意见
<textarea rows="4"cols="30"></textarea><!--文本域-->
</form>
<br/>
<!--3.4.5 下拉列表框-->
<form>
请选择课程
<select multiple><!--可实现多选，按住CTRL键-->
<option name="s">网页</option>
<option name="s">Java</option>
<option name="s">安卓</option>
<option name="s">PS</option>
<option name="s">网络</option>
</select>
</form>
</body>
</html>
上面代码的结果
5.综合案例——表格与表单
案例1——达维工作室“联系我们”子页
<!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-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="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="0"cellpadding="20">
<tr>
<td height="30"align="center"bgcolor="#FFFFFF"class="zi1">联系我们</td>
</tr>
<tr>
<td height="196"bgcolor="#FFAF03">
<p class="zibai">地址：广东省江门市XXXXXXXXX<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="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="0"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>代码运行结果
案例2——用户注册信息
<!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="form1"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="22"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>代码运行结果
扫一扫
1387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
