閱讀這篇文章前，建議可以先閱讀這兩篇文章：
從1、2理解標籤及屬性是什麼即可，3很長就不一定要看了。
這篇其實不用看也無妨。不過要是平常沒有使用表格的習慣的話，看一下應該會比較好理解下文。
另外，巴哈的表格雖然有提供合併、設定屬性、分割之類的功能，但在多次編輯後很容易整個表格壞掉……分割和合併跟你說發生錯誤、寬度高度設定不了之類的(個人經驗)。
所以我現在處理表格，除了一開始的建立用文章編輯器外之外，其他東西都在文章原始碼自己處理，以確保表格原始碼的乾淨。
開頭先提醒一下：
表格中橫的是列，直的是行(或稱欄)。
一般來說，在建立一個表格時，我會建議先直接利用巴哈文章編輯器。不確定自己要幾行幾列的話，可以先弄個1*1(1列1行)即可。
如果用巴哈的文章編輯器直接新增一個1*1的表格(除了行列數其他都沒動)，那檢視原始碼應該會看到如下的形式：
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]# [/td] [/tr] [/table] |
|
不過一般來說，我會建議把單個td標籤改成一行，個人覺得這樣在檢視程式碼的時候會比較清楚：
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]#[/td] (←把單個td標籤的頭尾寫成一行) [/tr] [/table] |
|
現在可能沒什麼感覺，但td標籤多起來的時候，編輯上就差很多了。
首先要知道的是，tr標籤裡必須有td標籤；而table標籤裡必須有tr標籤。觀察上面1*1表格的原始碼，應該可以看出這點。
而這裡便必須有個概念：
「tr標籤」是代表「列」；
「td標籤」是代表「行」。
比方說在一個tr標籤中多新增一個[td][/td]，那該「列」就會多一行，或者說多一格。
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]格1-1[/td] [td]格1-2[/td] [/tr] [/table] |
|
而如果多新增一個[tr][td][/td][/tr]，那就會多一列：
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]格1-1[/td] [/tr] [tr] [td]格2-1[/td] [/tr] [/table] |
|
表格的概念那篇文章中有提到：表格所有的變化都是透過合併格子，而且任意格子必定是矩形。
這點務必記住，至少巴哈的表格不可能做出矩形以外的格子。
這邊先看到處理合併格子的兩個td標籤的屬性：
colspan：水平合併數。
rowspan：垂直合併數。
這邊要先記住幾點：
1、colspan的合併數方向只往右；rowspan的合併數方向只往下。兩者的預設值為1(不合併)。
2、colspan是對照表格的列數來處理合併格子；rowspan是對照表格的行數來處理合併格子。
3、表格的行列數不會因為合併任意格子而有所改變。
上面講得可能都很抽象，還請從下面的範例一一理解。
例1、colspan的基本使用 — 1
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td colspan=2]格1-1～1-2[/td] [/tr] [tr] [td]格2-1[/td] [td]格2-2[/td] [/tr] [/table] |
|
||||
就這個範例而言，是一個2*2的表格。而我在格1-1設定了colspan=2。
意思為「從格1-1往右計算(包含格1-1)，將2個格子合併」。
可以注意到，被合併的格子是不用寫出標籤的。所以得在原始碼中刪掉被合併的td標籤。
也就是說，一個表格內的大格子不管是經由合併幾個格子做出來的，都會變成以1個td標籤表示。
可以觀察上面的結果思考一下。
例2、colspan的基本使用 — 2
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]格1-1[/td] [td colspan=3]格1-2～1-4[/td] [td]格1-5[/td] [/tr] [tr] [td]格2-1[/td] [td]格2-2[/td] [td]格2-3[/td] [td]格2-4[/td] [td]格2-5[/td] [/tr] [/table] |
|
||||||||||
這個範例是一個2*5的表格。而我在格1-2設定了colspan=3。
概念同例1，意思為「從格1-2往右計算(包含格1-2)，將3個格子合併」。看到這裡應該比較理解了。包括預設值1為什麼等同不合併。
例3、rowspan的基本使用 — 1
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td rowspan=2]格1-1～2-1[/td] [td]格1-2[/td] [td]格1-3[/td] [/tr] [tr] [td]格2-2[/td] [td]格2-3[/td] [/tr] [/table] |
|
這個範例是一個2*3的表格，而我在格1-1設定了rowspan=2。
可以注意到的是，第二個tr標籤內的第一個td是被合併的那格，所以得去掉。但tr標籤並不會不見。
例4、rowspan的基本使用 — 2
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td rowspan=2]格1-1～2-1[/td] [td]格1-2[/td] [td]格1-3[/td] [td rowspan=3]格1-4～3-4[/td] [/tr] [tr] [td rowspan=2]格2-2～3-3[/td] [td]格2-4[/td] [/tr] [tr] [td]格3-1[/td] [td]格3-3[/td] [/tr] [/table] |
|
上面的原始碼或許複雜了一些，但請仔細觀察一下原始碼及呈現結果，就會發現很簡單了，也能理解rowspan的作用方式。
例5、單格同時使用colspan及rowspan
| [table width=98% cellpadding=1 cellspacing=1 border=1] [tr] [td]格1-1[/td] [td]格1-2[/td] [td]格1-3[/td] [td]格1-4[/td] [/tr] [tr] [td rowspan=2 colspan=3]格2-2～2-3[/td] [td]格2-4[/td] [/tr] [tr] [td]格3-4[/td] [/tr] [tr] [td]格4-1[/td] [td]格4-2[/td] [td]格4-3[/td] [td]格4-4[/td] [/tr] [/table] |
|
|||||||||||||
呈現的結果或許和某些人想像的不同，可能會覺得是L型的，
但就像我說的，巴哈表格的任一格絕對是矩形，不管怎麼合併。
而上面其實也可以看出一件事情，那就是：
表格的任一格都是(Rowspan)*(Colspan)大小的矩形。
像上面的例子，那一個大矩形就是一個2*3的矩形，因為它的Rowspan=2、Colspan=3。
而這也就是為什麼我說，Rowspan和Colspan的預設值是1。1*1就是一格嘛，也就是一個單位格。
上面的例子2*3=6，所以是6個單位格合併出的格子。看不懂這句話的話，可以在上面的呈現結果數看看。
之後可能會補上一些應用。
達人
