今天我们还要继续讲一下常用的标签。
√ 表格
√ 表单
一、表格标签
1.表格的基本用法
我们先来看一下什么是表格
看到以上的这个表格我们要表格是由行和单元格组成的。
table的主要作用：
a)用于布局（过时）
b)用于显示批量的数据
早期我们使用table来布局网页，但是table有一个缺点，就是加载页面的时候，需要全部的数据都请求到，才显示页面，否则就是一片的空白，而且表格进行布局页面为了达到某种效果,不得不嵌套使用大量的表格,最终导致页面灵活性很差,代码也显得繁琐，因此现在一般不采用table来做布局，而是使用div+css进行布局。虽然我们已经放弃使用table进行布局页面了，但是table在其它地方（显示批量数据的时候）还是有他的作用的。
下面我们来看一下table的完整结构。
一个完整的表格由这几个标签组成(thead、tbody、tfoot和tr、td组成)
第一步：我们写表格了首先们要先写的是table标签，也就是先写一对table标签。
第二步：在table这对标签里写thead这对标签（thead的意思是表格的头部）
第三步：在thead这对标签里写tr这对标签（tr表示行）
第四步：在tr这对标签里写th这对标签（th表示重要的单元格）或td这对标签（td表示单元格）
第五步：在td这对标签里写内容（内容包括各种标签）
注：
同理写tbody和tfoot.
写在table里标签里面的像border、cellspacing、cellpadding、align、width叫table的标签属性。那这些属性是什么意思呢，我们分别来介绍一下：
border:边框
cellspacing:单元格与单元格之间的间距
cellpadding:内容到边框的距离
align:center/left/right:表格的对齐方式
width:表格的宽度
好了，看表格的完整结构。
<table border="1" cellspacing="0" cellpadding="0" align="center" width="600">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
浏览器中显示的效果
在写表格的完整结构时注意:
Thead部分和tfoot部分是可以省略的，但tbody是不能省略的，而且tbody部分可以有多个。表格的完整结构在HTML页面的时候一般都不需要这样写了，这样写有些复杂，我们一般的时候写看表格的简写结构，下面看下表格的简写结构。
<table border="1" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
显示效果：
以后我们就写这种简写版就可以，但是大家观察上面的这个表格好像长的不太好看，我还需要进一步修饰。那我们来修饰一下tr和td。那tr和td有那些属性呢？
tr的属性:
algin属性:left/center/right
valgin属性 :top/bottom/middle
height属性
td的属性:
colspan属性 水平合并
rowspan属性 垂直合并
algin属性: left/center/right
valgin属性 : left/center/right
width/height属性
那我们通过设置上面的属性来实现稍漂亮一点的表格吧！
<table border="1" cellspacing="0" cellpadding="0" align="center" width="600">
<tr height="40" align="center">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr height="40" align="center">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr height="40" align="center">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr height="40" align="center">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
显示效果
2.表格的高级应用(合并单元格)
有时候我们需将单元格进行合并，但是单元格进行合并分为水平合并（colspan）,垂直合并（rowspan）
vcolspan属性 水平合并
vrowspan属性 垂直合并
代码：
<table border="1" cellspacing="0" cellpadding="0" align="center" width="500">
<tr height="60" align="center">
<td colspan="3">工作证</td>
</tr>
<tr height="40" align="center">
<td width="100">姓名：</td>
<td width="200">张大宝</td>
<td rowspan="3">照片</td>
</tr>
<tr height="40" align="center">
<td>职位：</td>
<td>HTML5讲师</td>
</tr>
<tr height="40" align="center">
<td>部门：</td>
<td>教学部</td>
</tr>
</table>
页面效果
表格讲完我们来看一下表单，那我们先要了解一下什么是表单，我们大家注册过QQ吧。登录过京东帐号在京东上买东吧，这些你输入信息的框都是表单，表单在整个网站起到一个至关重要的作用。我们一起来了解一下表单。