eb前端培训规划图（育知同创前端培训技术分享）

今天我们还要继续讲一下常用的标签。

√ 表格

√ 表单

一、表格标签

1.表格的基本用法

我们先来看一下什么是表格

看到以上的这个表格我们要表格是由行和单元格组成的。

table的主要作用：

a)用于布局（过时）

b)用于显示批量的数据

早期我们使用table来布局网页，但是table有一个缺点，就是加载页面的时候，需要全部的数据都请求到，才显示页面，否则就是一片的空白，而且表格进行布局页面为了达到某种效果,不得不嵌套使用大量的表格,最终导致页面灵活性很差,代码也显得繁琐，因此现在一般不采用table来做布局，而是使用div css进行布局。虽然我们已经放弃使用table进行布局页面了，但是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吧。登录过京东帐号在京东上买东吧，这些你输入信息的框都是表单，表单在整个网站起到一个至关重要的作用。我们一起来了解一下表单。

,