rowspan 與 colspan 詳解

admin發表於2017-12-04

表格是組織資料的利器，表格中有兩個屬性rowspan和colspan，非常的重要，利用這兩個屬性可以實現單元格的合併效果，下面就通過程式碼例項分別介紹一下這兩個屬性的作用。

一.colspan屬性:

此屬性可以實現橫向跨列單元格合併效果。

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

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body>
<table border="1">
  <tr>
    <td colspan="2">螞蟻標題</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>免費教程</td>
  </tr>
</table>
</body>
</html>

以上程式碼可以跨兩個列合併單元格，於是第一行的兩個單元格合併成一個單元格。

二.rowspan屬性:

此屬性可以實現跨行單元格合併效果。

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

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body>
<table border="1">
  <tr>
    <td rowspan="2">螞蟻標題</td>
    <td>螞蟻部落</td>
  </tr>
  <tr>
    <td>免費教程</td>
  </tr>
</table>
</body>
</html>

跨兩個行合併單元格，於是第一個行的第一個單元格和第二行的第一個單元格實現合併效果。

相關文章