查看單個文章
舊 2007-05-13, 10:24 AM   #1 (permalink)
猜謎人
榮譽會員
 
猜謎人 的頭像
榮譽勳章
UID - 14438
在線等級: 級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時級別:99 | 在線時長:10294小時 | 升級還需:106小時
註冊日期: 2002-12-19
住址: 虎爛宮解籤詩處
文章: 18702
現金: 10109 金幣
資產: 2886912 金幣
預設 表格之設計2

現在我們要說明的是資料格的合併與分割,也就是說一個行下面又分好幾行,或者一個列下面又分好幾個列!這個時候我們要用到的是colspan和rowspan這兩個標籤。
先舉第一個例子,仍然做一個table,caption是史萊姆的第一個家,在列的方面,我們先分成兩大列,一是虎爛集團,一是北極熊營建,而虎爛集團再細分三列,分別是虎爛七子、畫虎爛和菊花茶!至於北極熊營建則分兩列,跑卡丁車和耍酷。所以,第一個th我們要讓屬性多rowspan=3,意思是下面要分成三列!第二個th則是rowspan=2,意思是下面要分成兩列!注意,資料格(也就是td)可以有六種對齊方式!水平對齊可以靠左、靠中和靠右,垂直對齊可以靠上靠中和靠下,也就是用valign=top、middle、bottom等,舉例如下:
現在我們把上表給反過來!先只有一行,也就是標題是史萊姆的第一個家,然後他分成五行!(你可試試如果只分兩行會有何結果?也就是colspan=2),其中三行歸虎爛集團,兩行歸北極熊營建。在此情形下,第一個tr中,th的rowspan=5,第二個tr中,第一個th的colspan=3,第二個th的colspan=2!再來的tr就是填上各個資料!對齊和第一個表格相同,HTML的原始碼如下:

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/z001.jpg

瀏覽器我們把寬縮小,顯示如下:

http://i171.photobucket.com/albums/u287/sad_jellyfish/teach/z002.jpg
__________________
http://i171.photobucket.com/albums/u287/sad_jellyfish/net-pic/s_zpsf91b1q3t.jpghttp://i171.photobucket.com/albums/u287/sad_jellyfish/gif/banner.gifhttp://i171.photobucket.com/albums/u287/sad_jellyfish/gif/kkk_zps3punatke.gif
猜謎人 目前離線  
送花文章: 1110, 收花文章: 16299 篇, 收花: 83322 次
有 4 位會員向 猜謎人 送花:
bearipf (2007-05-13),j92121034 (2007-11-14),wulihua (2007-05-20),羅迪 (2015-04-08)
感謝您發表一篇好文章