表格标签和表单标签（上）
今天我们还要继续讲一下常用的标签。
? 表格
? 表单
一、 表格标签
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:表格的宽度
好了，看表格的完整结构。
| Header |
Header |
Header |
| Data |
Data |
Data |
| Data |
Data |
Data |
浏览器中显示的效果
在写表格的完整结构时注意:
Thead部分和tfoot部分是可以省略的，但tbody是不能省略的，而且tbody部分可以有多个。表格的完整结构在HTML页面的时候一般都不需要这样写了，这样写有些复杂，我们一般的时候写看表格的简写结构，下面看下表格的简写结构。
| Data |
Data |
Data |
| Data |
Data |
Data |
| Data |
Data |
Data |
| Data |
Data |
Data |
显示效果：
以后我们就写这种简写版就可以，但是大家观察上面的这个表格好像长的不太好看，我还需要进一步修饰。那我们来修饰一下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属性
那我们通过设置上面的属性来实现稍漂亮一点的表格吧！
| Data |
Data |
Data |
| Data |
Data |
Data |
| Data |
Data |
Data |
| Data |
Data |
Data |
显示效果
2.表格的高级应用(合并单元格)
有时候我们需将单元格进行合并，但是单元格进行合并分为水平合并（colspan）,垂直合并（rowspan）
? colspan属性 水平合并
? rowspan属性 垂直合并
代码：
| 工作证 |
| 姓名： |
张大宝 |
照片 |
| 职位： |
HTML5讲师 |
| 部门： |
教学部 |
页面效果
表格讲完我们来看一下表单，那我们先要了解一下什么是表单，我们大家注册过QQ吧。登录过京东帐号在京东上买东吧，这些你输入信息的框都是表单，表单在整个网站起到一个至关重要的作用。我们一起来了解一下表单。
育知同创教育 版权所有
浙公网安备 33021202002483