設為首頁 收藏本站   立即加入 登入
返回列表

在帖子中建立表格的方法

此教學是針對萌會而設的哦
所以不要問為何在其實論壇使用不到

本教學對於對html有一定認識的人會比較易掌握
其實就是打html code換成discuz code打出來罷了

表格運用在整理一大堆資料方面十分有用(雖然要打很多code)


首先來個簡單點的做法
首先打上
  1. [table][tr][td]內容[/td][/tr][/table]
複製代碼
再按發帖區上方的「所見即所得模式」
外連圖片
按著再按一下內容
外連圖片
接著就可以按上下左右的箭頭來新增欄(打直)列(打橫)啦!
想要刪除錯誤新增的儲存格可按(x)
外連圖片

在教進階之前
請先理解所指令的功能
  1. [table][/table] 開啟表格/關閉表格
  2. [tr][/tr] 開啟列/關閉列
  3. [td][/tr] 開啟欄/關閉欄
複製代碼
一般來說.建立表格的格式都是
列1欄1列1欄2
列2欄1列2欄2
  1. [table]
  2. [tr][td]列1欄1[/td][td]列1欄2[/td][/tr]
  3. [tr][td]列2欄1[/td][td]列2欄2[/td][/tr]
  4. [/table]
複製代碼
好了.開始進階.就是分割儲存格跟合併儲存格
在html code中.分割/合併存格的指令如下:
col就是欄.row就是列
i. <td colspan=3> 把儲存格下方的分成3欄 (因為表格的格式是由上至下
ii. <td rowspan=3> 把儲存格右方的分成3列 (因為表格的格式是由左至右
至於在discuz code就會用這個取代:
  1. [td=A,B]
複製代碼
A就是html code中「colspan=」後的那個數字
B就是html code中「rowspan=」後的那個數字

來一個覽例:
代碼如下
  1. [table]
  2. [tr][td=2,3]1.[/td]
  3. [td]1a i.[/td][/tr]
  4. [tr][td]1a ii.[/td][/tr]
  5. [tr][td]1a iii.[/td][/tr]
  6. [tr][td]1b i.[/td]
  7. [td]1b ii.[/td]
  8. [td]1b iii.[/td][/tr]
  9. [/table]
複製代碼
1.1a i.
1a ii.
1a iii.
1b i.1b ii.2.


詳細之分割/合併存格指令請參見2樓

現在來說一下在建立整理帖類似物時方便編寫表格的方法.
就是就這:
假如我的表格是有3欄的.首先打好
  1. [tr][td][/td][td][/td][td][/td][/tr]
複製代碼
之後再把它變成
  1. [tr][td][/td][td][/td][td][/td][/tr]
  2. [tr][td][/td][td][/td][td][/td][/tr]
  3. [tr][td][/td][td][/td][td][/td][/tr]
  4. [tr][td][/td][td][/td][td][/td][/tr]
  5. [tr][td][/td][td][/td][td][/td][/tr]
  6. [tr][td][/td][td][/td][td][/td][/tr]
  7. [tr][td][/td][td][/td][td][/td][/tr]
  8. [tr][td][/td][td][/td][td][/td][/tr]
  9. [tr][td][/td][td][/td][td][/td][/tr]
複製代碼
本教學完 (笑
相信有很多人還不明白我在作啥
逃~

[ 本帖最後由 edo_zu 於 2008-5-4 07:29 PM 編輯 ]
1

評分人數

    • cct930:萌力 + 20 點 GJ + 4 個 評分理由: [獎勵原因:發言-你的發言非常精彩,請再接再厲!]
分割/合併存格之進階教學

以下理論適用於html的表格建立
只是code不用罷了
所以學來也蠻有用 (像我這種愛用notepad寫網的人來說


先來一個概念圖:
1.2a.3a
2b.3b.
2c.3c.
  1. [table]
  2. [tr][td=1,3]1.[/td]
  3. [td]2a.[/td][td]3a[/td][/tr]
  4. [tr][td]2b.[/td][td]3b.[/td][/tr]
  5. [tr][td]2c.[/td][td]3c.[/td][/tr]
  6. [/table]
複製代碼
先來分割
若我想把3a.三格再分割該如何辨呢?
錯誤示範就不作了.
1.2a.3a i.
3a ii.
3a iii.
2b.3b.
2c.3c.
  1. [table]
  2. [tr][td=1,5]1.[/td]
  3. [td=1,3]2a.[/td][td]3a i.[/td][/tr]
  4. [tr][td]3a ii.[/td][/tr]
  5. [tr][td]3a iii.[/td][/tr]
  6. [tr][td]2b.[/td][td]3b.[/td][/tr]
  7. [tr][td]2c.[/td][td]3c.[/td][/tr]
  8. [/table]
複製代碼
由於2a.格右方儲存格由3a.變成3a i. , 3a ii. , 3a iii. 3格
所以要用
  1. [td=1,3]2a.[/td]
複製代碼
這個應該明吧.
基於下表
1.2a.第一列第三欄
第二列第三欄
第三列第三欄
2b.3b.
2c.3c.

所以實際上2b. , 3b.應是第四欄
而2c. , 3c.則是第五欄
因此1.那格要寫成
  1. [td=1,5]1.[/td]
複製代碼
備註: 由於2a.格右方儲存格由3a.變成3a i. , 3a ii. , 3a iii. 3格
所以就是1格->3格
即是多了右方2格.即是2欄(欄=打橫)
所以經過簡單的運算3(1開始向右分割了3格)+2(多加2欄)=5.
儲存格內容為1.的那格就要用「1,5」啦


再來合併
若我想把3a. , 3b. , 3c. 三格合併起來該如何辨呢?

概念圖.其實我們想做的就是這個
1.2a.3.4a.
2b.4b.
2c.4c.
  1. [table]
  2. [tr][td=1,3]1.[/td]
  3. [td]2a.[/td][td=1,3]3.[/td][td]4a.[/td][/tr]
  4. [tr][td]2b.[/td][td]4b.[/td][/tr]
  5. [tr][td]2c.[/td][td]4c.[/td][/tr]
  6. [/table]
複製代碼
由於在儲存格內容為1.的那格早已打欄1分為3.
所以基本上儲存格內容為1.的那格 右邊一直都是會有3格就說
如果想要合併.把想合併的那格一拼改成同一個分割數值
把4a. , 4b. , 4c.省去.得出結果.
1.2a.3.
2b.
2c.
  1. [table]
  2. [tr][td=1,3]1.[/td]
  3. [td]2a.[/td][td=1,3]3.[/td][/tr]
  4. [tr][td]2b.[/td][/tr]
  5. [tr][td]2c.[/td][/tr]
  6. [/table]
複製代碼
(打直)的就法一樣.請自行嘗試.
本教學完.以上

[ 本帖最後由 edo_zu 於 2008-5-5 10:50 AM 編輯 ]
2樓教學增設完畢
請食用