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

單元格內(nèi)容

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

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

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

單元格內(nèi)容

示例2:跨行表格

早餐菜譜	食物	雞蛋
	飲料	牛奶
	甜點(diǎn)	開心粉

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

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

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

總結(jié)

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

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