今天我們還要繼續講一下常用的标簽。

√ 表格

√ 表單

一、表格标簽

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吧。登錄過京東帳号在京東上買東吧，這些你輸入信息的框都是表單，表單在整個網站起到一個至關重要的作用。我們一起來了解一下表單。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!