如何使用表格

teabug

日前羽身兄在好吃的泡菜一帖中，貼了美麗的價格表，讓有些茶友羨慕不已，原來是羽身兄特聘台大高材生製作的。

小弟在此野人獻曝，提供使用代碼來製作表格的方法，各位茶友可以DIY，就不用去找台大高材生來製作了！
如果各位覺得此帖對您有用，請不要吝嗇打賞！

第一課： 簡易表格 (1)：單格表格

語法範例：

1. [table]
   
2. [tr]
   
3.   [td]第一行，第一格[/td]
   
4. [/tr]
   
5. [/table]

複製代碼

成品：

第一行，第一格

說明：
    這是最少(最起碼)的表格語法，請注意代碼的語法是成對使用的，「table」是表格，「tr」是行，「td」是格，同一行可以不只一格(請看第二課)。


第二課： 簡易表格 (2)：一行多格

語法範例：

1. [table]
   
2. [tr]
   
3.   [td]第一行，第一格[/td]
   
4.   [td]第一行，第二格[/td]
   
5.   [td]第一行，第三格[/td]
   
6. [/tr]
   
7. [/table]

複製代碼

成品：

第一行，第一格

第一行，第二格

第一行，第三格

說明：
    要一行多格，只要增加「td」即可。

第三課： 簡易表格 (3)：多行多格

語法範例：

1. [table]
   
2. [tr]
   
3.   [td]第一行，第一格[/td]
   
4.   [td]第一行，第二格[/td]
   
5.   [td]第一行，第三格[/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td]第二行，第一格[/td]
   
9.   [td]第二行，第二格[/td]
   
10.   [td][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

成品：

第一行，第一格	第一行，第二格	第一行，第三格
第二行，第一格	第二行，第二格

說明：
    每一行用一組「tr」，每一行用的「td」的數量要一致。如果格子要留白，可參考語法的第11行。

teabug

第四課： 改變表格寬度及背景顏色 (1)

語法範例：

1. [table=50%,white]
   
2. [tr=gray]
   
3.   [td]第一行，第一格[/td]
   
4.   [td]第一行，第二格[/td]
   
5.   [td]第一行，第三格[/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td]第二行，第一格[/td]
   
9.   [td]第二行，第二格[/td]
   
10.   [td][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

成品：

第一行，第一格	第一行，第二格	第一行，第三格
第二行，第一格	第二行，第二格

說明：
    語法是「table=寬度,顏色」，上面的例子表格的寬度設成網頁的50%，表格的背景顏色設成白色；寬度也可以用點數(請看第五課)。「tr=顏色」，第一行的背景顏色改為灰色。


第五課： 改變表格寬度及背景顏色 (2)

語法範例：

1. [table=300]
   
2. [tr=Silver]
   
3.   [td][color=Red]第一行，第一格[/color][/td]
   
4.   [td]第一行，第二格[/td]
   
5.   [td]第一行，第三格[/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td]第二行，第一格[/td]
   
9.   [td]第二行，第二格[/td]
   
10.   [td][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

成品：

第一行，第一格	第一行，第二格	第一行，第三格
第二行，第一格	第二行，第二格

說明：
    上面的例子表格的寬度設成300點(points)，表格的背景顏色沒有設(用論壇帖子的背景色)。第一行的背景顏色改為銀色，第一行第一格的字設為紅色。

teabug

回復 2# teabug

    帖子不能修改，在此補充一下第五課：如果格子太窄，格子內的文字會自動換行，那一行就會變的高一點。

teabug

感謝您的打賞！

先補充第四課：表格寬度設成網頁的50%，如果改變網頁的寬度(如把IE或是Firefox的視窗改成最大或縮小)，表格的寬度也會跟著改變。

第六課： 表格格子內的文字的調整

語法範例：

1. [table]
   
2. [tr=Silver]
   
3.   [td][size=4]大字[/size][/td]
   
4.   [td][align=center]置中[/center][/td]
   
5.   [td][align=right]置右[/align][/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td][color=Blue]藍色[/color][/td]
   
9.   [td][b]粗體[/b][/td]
   
10.   [td][align=center][u]置中＋底線[/u][/center][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

成品：
[tr=Silver]
  [td]大字[/td]
  [td]

置中[/center][/td]
  [td]

置右

[/td]
[/tr]
[tr]
  [td]藍色[/td]
  [td]粗體[/td]
  [td]

置中＋底線[/center][/td]
[/tr]
[/table]

說明：
    表格中每一格的文字需要單獨調整，可以用編輯功能(如下圖)來改變文字大小、顏色、段落排列等。上面範例中的代碼是使用編輯功能後的結果。

teabug

放砲了！   不能修改前帖，重貼第六課修正版：

第六課： 表格格子內的文字的調整 (修正版)

語法範例：

1. [table]
   
2. [tr=Silver]
   
3.   [td][size=4]大字[/size][/td]
   
4.   [td][align=center]置中[/center][/td]
   
5.   [td][align=right]置右[/align][/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td][color=Blue]藍色[/color][/td]
   
9.   [td][b]粗體[/b][/td]
   
10.   [td][align=center][u]置中＋底線[/u][/align][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

成品：

大字	置中[/center]	置右
藍色	粗體	置中＋底線

說明：
    表格中每一格的文字需要單獨調整，可以用編輯功能(如下圖)來改變文字大小、顏色、段落排列等。上面範例中的代碼是使用編輯功能後的結果。

teabug

回復 6# teabug

    沒有修改功能真是麻煩！又發現一個錯，原始碼第4行最後的「center」，應該改成「align」。正確版如下：

1. [table]
   
2. [tr=Silver]
   
3.   [td][size=4]大字[/size][/td]
   
4.   [td][align=center]置中[/align][/td]
   
5.   [td][align=right]置右[/align][/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td][color=Blue]藍色[/color][/td]
   
9.   [td][b]粗體[/b][/td]
   
10.   [td][align=center][u]置中＋底線[/u][/align][/td]
    
11. [/tr]
    
12. [/table]

複製代碼

大字	置中	置右
藍色	粗體	置中＋底線

lht3489s

太厲害了！謝謝分享~

teabug

第七課： 合併格，跨行/跨列

語法範例：跨兩行

1. [table]
   
2. [tr]
   
3.   [td=1,2,300]跨兩行[/td]
   
4.   [td]第一行/第二格[/td]
   
5.   [td]第一行/第三格[/td]
   
6. [/tr]
   
7. [tr]
   
8.   [td]第二行/第二格[/td]
   
9.   [td]第二行/第三格[/td]
   
10. [/tr]
    
11. [/table]

複製代碼

成品：

跨兩行	第一行/第二格	第一行/第三格
	第二行/第二格	第二行/第三格

說明：
  合併格(跨行或跨列)的語法是：「td=跨列數,跨行數,寬度」，上面這個例子將第一格跨兩行，並設寬度為300點，請注意第二行的「td」只有兩個，而不是3個，因為第一行跨行的關係，就少一個「td」。


語法範例：跨兩列

1. [table]
   
2. [tr]
   
3.   [td=2,1]跨兩列[/td]
   
4.   [td]第一行/第三格[/td]
   
5. [/tr]
   
6. [tr]
   
7.   [td]第二行/第一格[/td]
   
8.   [td]第二行/第二格[/td]
   
9.   [td]第二行/第三格[/td]
   
10. [/tr]
    
11. [/table]

複製代碼

成品：

跨兩列		第一行/第三格
第二行/第一格	第二行/第二格	第二行/第三格

說明：
  上面這個例子將第一行的第一格和第二格合併，所以第一行的「td」只有兩個，而不是3個。

來自高雄

完全看不懂.....太笨了

素還真

回復 10# 來自高雄

可以複製代碼...
然後.....另存......再修改其中文字