創作內容

22 GP

教你如何在巴哈熟潤使用表格介紹!

作者:實在想不出ID│2016-07-15 10:43:09│贊助:47│人氣:1404



前言:

有鑑於巴哈表格難用!

無法"直覺式"的調整 (這句話好像那個誰說過 ... )

且多數攻略、心得文也時常會在巴哈利用表格去彙整資訊,
(例如個人整理得全職業列表文章:新手百態 - 職業選擇 (表格於文中位置))

讓巴友能更直白了解內容,不會"眼花撩亂"  (咦 ... 這句..)


因此,個人花了"龐大的時間",

來撰寫此篇:

【心得】教你如何在巴哈熟潤使用表格介紹!

這篇會教大家怎麼透過修改原始碼,來讓表格產生自己想要的變化



【基礎篇】

在基礎篇中,會先讓大家先了解表格對應程式碼的內容是什麼!!

首先,可以先隨意找一篇文章回覆,把內容全清光乾淨後!


開始以下的操作教學

可以自行創建一個表格,請點擊於右上方表格的圖示:建立表格↗




會出現視窗:【插入表格】設定表格欄列數、寬度、高度等,直接按確定



插入好後,表格會如下所示:


接著,請切換到萬惡的原始碼 ...

請找出如下圖反白的那段,並將其整理!
P.S.:發現還有其他有的沒的一堆程式碼找不到嗎 ...
(看吧 .. 前面就說要完整乾淨才建立表格 趕快去所見所得頁籤刪到只留下表格! )


請把那些原始碼整理成容易了解!讀懂階層式的樣子如下:


接著,看著圖下了解一下程式碼代表的意思嚕 !! (圖片點擊放"超大")



參數調整細部介紹與差異比較:

【Width】表格寬度

調整10%:

調整98% (預設):



【Cellspacing】表格外框間距

cellspacing = 0

cellspacing = 9



【Cellspacing】表格內距

cellpadding = 1 (預設)
*預設為1,應該是剛創表格的樣子啊?怎麼會是這又乾又扁的表格
*別懷疑~ 剛創建表格不會乾扁,是因為要給你輸入文字,
當你沒輸入文字從原始碼再切回所見所得,就會如上那個樣子了。

cellpadding = 9



【Border】表格邊框

Border = 0


Border = 5




到了這邊!!恭喜你從【基礎篇】畢業嚕!!

你已經學會怎麼看表格的語法及自行設定參數來改變表格外觀嚕~!

程式碼可以複製起來~不用每次整理唷!!

[table width=98% cellspacing=1 cellpadding=1 border=1]
    [tr]
        [td][/td]
        [td][/td]
    [/tr]
    [tr]
        [td][/td]
        [td][/td]
    [/tr]
    [tr]
        [td][/td]
        [td][/td]
    [/tr]
[/table]

(什麼 ... ! 我上面不就白自己浪費一堆時間整理了 !! )

嘿嘿!總要自己嘗試一次嚕!


接下來 ... 進階篇



【進階篇】

在基礎篇中,大家應該對表格原始碼有基礎的了解~

進階篇中,我們會開始有一些多樣的變化唷!


【合併橫向儲存格-colspan】

常常會遇到想要有表格Title的效果:

【神之子 Zero】

神之子
搞笑 搞怪



該怎麼做呢?

來,請看VCR!





【合併橫向儲存格-colspan解析】

從VCR中可以看到,

colspan可以操控:這個一欄位儲存格,要橫向跨越佔據幾格


也就是說,我們將第一列中的第一欄設定

colspan = 2:即是設定第一個儲存格跨越佔兩格

設定完會變成這樣,為什麼呢?


注意,仔細看程式碼:

[table width=98% cellspacing=1 cellpadding=1 border=1]
    [tr]
        [td colspan=2][/td]
        [td][/td]
    [/tr]


程式碼中:
[td colspan=2][/td] 』的下方還多一個[td][/td]

當你設定第一格已經「橫向跨越兩行」,

下面又多打一次才又會多一欄儲存格出來,刪掉就會是正確的嚕!

最後在所見及所得中,打上文字並反白倒下表格顏色~

完美的表格Title就完成嚕!!



【合併直向儲存格-rowspan】

更多時後,我們會想要一個側邊的合併儲存格

來當作一個"群集"的感覺:

【楓葉英雄】

英雄團 精靈遊俠 (Mercedes) 夜光 (Luminous)
狂狼勇士 (Aran) 龍魔導士 (Evan)
幻影俠盜 (Phantom) 隱月 (EunWol)

*楓葉英雄回歸!一定要上相一下啦~~!
*英文開頭合起來剛好是 MAPLE !   楓之谷 (Maple Stroy)


這樣的群集合併第一欄該怎麼做呢?

Go,VCR放映!





【合併直向儲存格-rowspan解析】

從VCR中可以看到,

rowspan可以操控:這個一欄位儲存格,要直向跨越佔據幾格


也就是說,我們將第一列中的第一欄設定:

rowspan = 3:即是設定第一個儲存格直向跨越佔三格

設定完會變成這樣,Why?
*右上怎麼缺角了 ! 假的。全是業障。


在我們平時用Word理解應該會是:

反白一整直欄 → 合併儲存格 → 完成


並不會有最右上欄缺一角的情況產生!

但是在巴哈中,他是這樣子 ...

來人!請上菜!





原本的表格為:三列 (橫向)、二欄 (直向)

由於我們要將第一儲存格跨越成直向三格,

所以巴哈系統的理解是:

[table width=98% cellspacing=1 cellpadding=1 border=1]
    [tr]
        [td rowspan=3][/td]
        [td][/td]
    [/tr]
    [tr]
        [td][/td]
        [td][/td]
    [/tr]
    [tr]
        [td][/td]
        [td][/td]
    [/tr]
[/table]


程式碼中:

【第一列橫欄位[tr][/tr]中】
把第一欄[td][/td]的儲存格往下跨越三格 (rowspan=3),
之後跟平常一般,在右邊第二欄建置第二格


【第二列欄位[tr][/tr]
因為第二列的第一欄,被第一列第一欄儲存格直向佔據三格 (如上面)
所以從第二欄開始,往右依照程式:
        [td][/td]
        [td][/td]

從第二欄開始才建置兩格


【第三列欄位[tr][/tr]
以第二列為類退,一樣意思。


再上一次圖,給予理解:

*colspan & rowspan 可能要很冷靜去想表格設定樣式的結果,如果怕麻煩的話 ...
可以用預覽文章看看,有少哪格,就依照第幾列第幾欄去追增!有多就把那格刪掉!


到了這邊!!恭喜你從【進階篇】畢業嚕!!

你已經學會怎麼去合併直向、橫向的儲存格~!

程式碼可以複製起來~才不會打錯字唷!!

    [tr]
        [td colspan=?][/td]
        [td rowspan=?][/td]
    [/tr]

(我自己在實錄gif動態圖狂打錯字.... 兩個gif都拍了1X次 )

就當作是 .... 熟能生巧!


接下來 ... 精靈寶可夢【大師篇】



【大師篇】

儲存格直行合併又想要橫向合併,這類複雜表格 ...

該怎麼做到呢 ?
新楓之谷全職業
Lv.70 LV.120 LV.210
英雄團 幻影 爆擊機率+10% 幻影 爆擊機率+15% 幻影 爆擊機率+20%



 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  

                             To Be Continue ...


【水水篇】

只是乾愣愣的表格 ... 該如何變得顏色好看又美且排版乾淨俐落呢 ?

                             To Be Continue ...




作業:心得報告】 - 50% & 50%

請試著做一遍文中介紹的兩大 【神之子 Zero】【楓葉英雄】  表格

並根據學習成果,回顧在過程中所收穫的心得以及感想

記錄下來製成心得報告,當作未來學習筆記。


【神之子 Zero】

神之子
搞笑 搞怪


【楓葉英雄】

英雄團 精靈遊俠 (Mercedes) 夜光 (Luminous)
狂狼勇士 (Aran) 龍魔導士 (Evan)
幻影俠盜 (Phantom) 隱月 (EunWol)





先到這邊 .... 本來要全部完成 ...

剛剛聽說外婆住院情況危及 ...

好幾次進加護病房都有平安出院,但剛剛聽似乎比較嚴重 ...

這應該算私事就不多說了,完全與遊戲無關

大家回覆還是請以遊戲相關為主!


多時常關心周圍的每個人,玩樂空閒中趁吃飯多跟家人陪伴聊天吧。

就好比在陪楓之谷遊戲中的朋友們一般更親暱!

先出門了 ..
           
              - 本篇獻給所有巴友熱愛無私分享攻略整理資訊的大大們。



引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3255171
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 2 篇留言

linray
非常實用,淺顯易懂

07-02 00:17

銀嵐
這邊都是先用Word弄好主架構貼上後,在用原始碼修……背不起html標籤。

12-07 13:22

我要留言提醒:您尚未登入,請先登入再留言

22喜歡★gameboy82516 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:新手百態 - 裝備集大成... 後一篇:談遊戲橘子數位科技股份有...

追蹤私訊切換新版閱覽

作品資料夾

KrisPuth法式長棍麵包
モア!ジャンプ!モア!看更多我要大聲說昨天18:27


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】