切換
舊版
前往
大廳
主題

【筆記/心得】(巴哈文章)用原始碼處理表格—格子的合併

Aishimeth | 2017-10-18 08:17:33 | 巴幣 0 | 人氣 699


閱讀這篇文章前,建議可以先閱讀這兩篇文章:

從1、2理解標籤及屬性是什麼即可,3很長就不一定要看了。
這篇其實不用看也無妨。不過要是平常沒有使用表格的習慣的話,看一下應該會比較好理解下文。



另外,巴哈的表格雖然有提供合併、設定屬性、分割之類的功能,但在多次編輯後很容易整個表格壞掉……分割和合併跟你說發生錯誤、寬度高度設定不了之類的(個人經驗)。

所以我現在處理表格,除了一開始的建立用文章編輯器外之外,其他東西都在文章原始碼自己處理,以確保表格原始碼的乾淨。


1、表格的結構

開頭先提醒一下:
表格中橫的是列,直的是行(或稱欄)。

一般來說,在建立一個表格時,我會建議先直接利用巴哈文章編輯器。不確定自己要幾行幾列的話,可以先弄個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]

格1-1 格1-2
   


而如果多新增一個[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]

格1-1
格2-1
   




2、格子的合併

表格的概念那篇文章中有提到:表格所有的變化都是透過合併格子,而且任意格子必定是矩形。
這點務必記住,至少巴哈的表格不可能做出矩形以外的格子。

這邊先看到處理合併格子的兩個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]

格1-1~1-2
格2-1 格2-2
  

就這個範例而言,是一個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]

格1-1 格1-2~1-4 格1-5
格2-1 格2-2 格2-3 格2-4 格2-5
  

這個範例是一個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]

格1-1~2-1 格1-2 格1-3
格2-2 格2-3
  

這個範例是一個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]

格1-1~2-1 格1-2 格1-3 格1-4~3-4
格2-2~3-3 格2-4
格3-1 格3-3
  

這個範例是一個3*4的表格,而我分別在在格1-1、格1-4、格2-2設定了rowspan。

上面的原始碼或許複雜了一些,但請仔細觀察一下原始碼及呈現結果,就會發現很簡單了,也能理解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]

格1-1 格1-2 格1-3 格1-4
格2-1~3-3 格2-4
格3-4
格4-1 格4-2 格4-3 格4-4
  

呈現的結果或許和某些人想像的不同,可能會覺得是L型的,
但就像我說的,巴哈表格的任一格絕對是矩形,不管怎麼合併。

而上面其實也可以看出一件事情,那就是:
表格的任一格都是(Rowspan)*(Colspan)大小的矩形。

像上面的例子,那一個大矩形就是一個2*3的矩形,因為它的Rowspan=2、Colspan=3。
而這也就是為什麼我說,Rowspan和Colspan的預設值是1。1*1就是一格嘛,也就是一個單位格。
上面的例子2*3=6,所以是6個單位格合併出的格子。看不懂這句話的話,可以在上面的呈現結果數看看。




之後可能會補上一些應用。

創作回應

相關創作

更多創作