表格标签和表单标签(上)

表格标签和表单标签（上）

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

✓表格

✓表单

一、表格标签

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
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属性

那我们通过设置上面的属性来实现稍漂亮一点的表格吧！

2.表格的高级应用(合并单元格)

有时候我们需将单元格进行合并，但是单元格进行合并分为水平合并（colspan）,垂直合并（rowspan）

colspan属性水平合并

rowspan属性垂直合并

代码：

工作证
姓名：	张大宝	照片
职位：	HTML5讲师
部门：	教学部

页面效果