HTML跨多行跨多列的表格上節所示的表格比較簡單，如果我要插入一張圖片，并且要占4個單元的空間，那怎么辦？這就要用到跨多行跨多列的表格，本節就開始講解如何實現把多個單元格合并成一個單元格。本節單詞記憶：屬性 1.cospan 2.rowspan網頁學習網提示：html語言非常簡單，不需要邏輯理解，而絕大部分朋友覺得它難以掌握，90%的原因在于英語單詞不過關，所以每節記憶幾個單詞是非常有必要的。一、什么是跨多行跨多列的表格有時可能要將多行或多列合并成一個單元格，即可以創建跨多列的行，或創建跨多行的列。colspan屬性用于創建跨多列的單元格，rowspan屬性用于創建跨多行的單元格。要實現如圖1所示的跨多行跨多列表格，怎么辦？不急，我們先來看看跨多列的表格是如何實現的。圖1 ?跨多行跨多列的表格?二、跨多列的表格跨多列的表格是單元格在水平方向上跨多列。語法:創建跨多列的表格基本語法：

單元格內容

下面通過示例1來說明colspan這一屬性的用法。示例1:跨多列的表格

學生成績表
英語	數學	語文
95	98	89

這里，將第一行單元格在水平方向上所跨的列數設為3，因為表格共包括3列，所以第一行只有一個單元格，運行效果如圖2所示。跨多列表格已經實現了，下面我們想想如何實現跨多行的表格？圖2 跨多列的表格三、跨多行的表格單元格除了可以在水平方向上跨列，還可以在垂直方向上跨行，跨多行的表格是單元格在垂直方向上跨多行。 HYPERLINK "/" WANGYEXX.COM語法:創建跨多行的表格基本語法：

單元格內容

示例2:跨行表格

早餐菜譜	食物	雞蛋
	飲料	牛奶
	甜點	開心粉

這里，由于第一行第一個單元格垂直跨了3行，還剩2個單元格，因此在接下來的兩行都只有2個單元格，運行效果如圖3所示。圖3 跨多行的表格四、如何創建跨多行跨多列的表格創建了跨多列的表格，也創建了跨多行的表格，但是在有些情況下要在一張表中既有跨多行又有跨多列的單元格，那將如何實現？這要說簡單真的很簡單，說難還真的不容易，下面我們就以示例3和示例4來說明如何創建跨多行跨多列的表格。示例3:跨多行多列表格1

手機充值、IP卡	辦公設備、文具
各種卡的總匯	鉛筆	彩筆
	打印	刻錄

示例3在瀏覽器中運行的結果如圖4所示。在創建如圖2.9所示的表格時，應先創建表格標 簽；然后在表格標簽里創建行標簽…，這里一共創建 了3行；最后在每行里創建列標簽…，并設置跨多行跨多列的屬性，即可實現

總結

以上是生活随笔為你收集整理的html 多行多列列表格,HTML跨多行跨多列表格.doc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。