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

單元格內(nèi)容

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

學(xué)生成績表
英語	數(shù)學(xué)	語文
95	98	89

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

單元格內(nèi)容

示例2:跨行表格

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

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

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

示例3在瀏覽器中運行的結(jié)果如圖4所示。在創(chuàng)建如圖2.9所示的表格時，應(yīng)先創(chuàng)建表格標(biāo) 簽；然后在表格標(biāo)簽里創(chuàng)建行標(biāo)簽…，這里一共創(chuàng)建 了3行；最后在每行里創(chuàng)建列標(biāo)簽…，并設(shè)置跨多行跨多列的屬性，即可實現(xiàn)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。