rowspan和colspan用法詳解

標籤：

rowspan和colspan用法詳解:

表格是組織資料的利器，表格中有兩個屬性rowspan和colspan，非常的重要，利用這兩個屬性可以實現儲存格的合并效果，下面就通過代碼執行個體分別介紹一下這兩個屬性的作用。

一.colspan屬性:

此屬性可以實現橫向跨列儲存格合并效果。

為了便於理解可以先從屬性單詞上入手，colspan是一個合成詞:column(列)+span(跨度).

屬性值是數字，表示跨幾個列合併儲存格。

代碼執行個體如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title></head><body><table border="1">  <tr>    <td colspan="2">螞蟻標題</td>  </tr>  <tr>    <td>螞蟻部落</td>    <td>免費教程</td>  </tr></table></body></html>

以上代碼可以跨兩個列合併儲存格，於是第一行的兩個儲存格合并成一個儲存格。

二.rowspan屬性:

此屬性可以實現跨行儲存格合并效果。

同樣rowspan是一個合成詞:row(行)+span(跨度)。

屬性值是數字，表示跨幾個列合併儲存格。

代碼執行個體如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title><body><table border="1">  <tr>    <td rowspan="2">螞蟻標題</td>    <td>螞蟻部落</td>  </tr>  <tr>    <td>免費教程</td>  </tr></table></body></html>

以上代碼可以跨兩個行合併儲存格，於是第一個行的第一個儲存格和第二行的第一個儲存格實現合并效果。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4021.html

最為原始地址是:http://www.softwhy.com/ 

rowspan和colspan用法詳解