html跨多行跨多列表格教程講解

如果我要插入一張圖片，並且要占4個單元的空間，那怎麼辦?這就要用到跨多行跨多列的表格，本節就開始講解ｈｔｍｌ跨多行跨多列表格教程。

一、什麼是跨多行跨多列的表格

有時可能要將多行或多列合並成一個單元格，即可以創建跨多列的行，或創建跨多行的列。colspan屬性用於創建跨多列的單元格，rowspan屬性用於創建跨多行的單元格。要

實現如圖1所示的跨多行跨多列表格，怎麼辦?不急，我們先來看看跨多列的表格是如何實現的。

圖1　　跨多行跨多列的表格

二、跨多列的表格

跨多列的表格是單元格在水平方向上跨多列。

語法：

創建跨多列的表格基本語法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨列數＂＞單元格內容＜／ＴＤ＞

下面通過示例1來說明colspan這一屬性的用法。

示例１：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂３＂＞學生成績表＜／ＴＤ＞

英語

數學

語文

95

98

89

這裡，將第一行單元格在水平方向上所跨的列數設為3，因為表格共包括3列，所以第一行只有一個單元格，運行效果如圖2所示。跨多列表格已經實現了，下面我們想想如何實現跨多行的表格?

圖2　跨多列的表格

三、跨多行的表格

單元格除了可以在水平方向上跨列，還可以在垂直方向上跨行，跨多行的表格是單元格在垂直方向上跨多行。

語法：

創建跨多行的表格基本語法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨行數＂＞單元格內容＜／ＴＤ＞

示例２：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞早餐菜譜＜／ＴＤ＞

食物

雞蛋

飲料

牛奶

甜點

開心粉

這裡，由於第一行第一個單元格垂直跨了3行，還剩2個單元格，因此在接下來的兩行都只有2個單元格，運行效果如圖3所示。

圖3　跨多行的表格

四、如何創建跨多行跨多列的表格

創建了跨多列的表格，也創建了跨多行的表格，但是在有些情況下要在一張表中既有跨多行又有跨多列的單元格，那將如何實現?這要說簡單真的很簡單，說難還真的不容

易，下面我們就以示例3和示例4來說明如何創建跨多行跨多列的表格。

示例３：

手機充值、IP卡

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞辦公設備、文具＜／ＴＤ＞

＜ＴＤ　ｒｏｗｓｐａｎ＝＂２＂＞各種卡的總匯＜／ＴＤ＞　　　　鉛筆

彩筆

打印

刻錄

示例3在浏覽器中運行的結果如圖4所示。在創建如圖2.9所示的表格時，應先創建表格標簽…

;然後在表格標簽裡創建行標簽…，這裡一共創建了3行;最後在每行裡創建列標簽…，並設置跨多行跨多列的屬性，即可實現跨多行跨多列的表格。

圖4　跨多行多列表格1

示例４：

這裡，將第一行單元格在水平方向上所跨的列數設為3，因為表格共包括3列，所以第一行只有一個單元格，運行效果如圖2所示。跨多列表格已經實現了，下面我們想想如何實現跨多行的表格?

圖2　跨多列表格

三、跨多行的表格

單元格除了可以在水平方向上跨列，還可以在垂直方向上跨行，跨多行的表格是單元格在垂直方向上跨多行。

語法：

創建跨多行的表格基本語法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨行數＂＞單元格內容＜／ＴＤ＞

示例２：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞早餐菜譜＜／ＴＤ＞

食物

雞蛋

飲料

牛奶

甜點

開心粉

這裡，由於第一行第一個單元格垂直跨了3行，還剩2個單元格，因此在接下來的兩行都只有2個單元格，運行效果如圖3所示。

圖3　跨多行的表格

四、如何創建跨多行跨多列的表格

創建了跨多列的表格，也創建了跨多行的表格，但是在有些情況下要在一張表中既有跨多行又有跨多列的單元格，那將如何實現?這要說簡單真的很簡單，說難還真的不容

易，下面我們就以示例3和示例4來說明如何創建跨多行跨多列的表格。

示例３：

手機充值、IP卡

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞辦公設備、文具＜／ＴＤ＞

＜ＴＤ　ｒｏｗｓｐａｎ＝＂２＂＞各種卡的總匯＜／ＴＤ＞　　　　鉛筆

彩筆

打印

刻錄

示例3在浏覽器中運行的結果如圖4所示。在創建如圖2.9所示的表格時，應先創建表格標簽…

;然後在表格標簽裡創建行標簽…，這裡一共創建了3行;最後在每行裡創建列標簽…，並設置跨多行跨多列的屬性，即可實現跨多行跨多列的表格。

圖4　跨多行多列表格1

示例４：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞產品名稱＜／ＴＤ＞　　　　掌上電腦

彩音盒MP3

18克拉鑽戒

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞＜Ｐ＞歡迎光臨本購物網站＜／Ｐ＞

示例4在浏覽器中運行的結果如圖5所示。大家可以試試修改rowspan和colspan屬性值的大小，如果把rowspan和colspan的值改得過小，表格中會出現空白區域，這樣會使表格的編輯變得困難，因此在設置表格時，要注意各行的單元格列數應相同。

圖5　跨多行多列表格2

小經驗：一般情況下在設置表格行和列的時候，為了保證在表格裡不出現空白區域，可以將跨多列或跨多行的單元格看成多個單元格，而單元格的個數就是所跨的列數或行數，只要保證各行的單元格列數相同，就不會出現空白區域。

本節作業：

制作如下圖網頁。

以上就是精品學習提供的關於ｈｔｍｌ跨多行跨多列表格教程的內容，希望能夠帶給您幫助。