第 14 章 用CSS 設計表格(Table).

Presentation on theme: "第 14 章 用CSS 設計表格(Table)."— Presentation transcript:

1 第 14 章 用CSS 設計表格(Table)

2 本章提要 14-1 建立一份簡單的表格 14-2 加上表格框線 14-3 單獨設定上下左右框線的外觀
14-4 設定四個方向的屬性時，所遵循的共同規則 14-5 框線設定的實用範例

3 前言 本章將要說明如何利用 CSS 來設計表格, 不過由於表格的基本架構還是藉由 HTML 的標籤所組成, 所以第一節會先複習一下相關標籤的用法。 然後再使用 CSS 提供的各種屬性, 設定表格的細部特性, 例如：框線的樣式、框線的粗細等等, 最後則介紹一些實際應用。

4 14-1 建立一份簡單的表格 表格主要是由 <table>、<tr> 和 <td> 3 種標籤所構成, 我們先複習一下這些標籤的用法, 用它們建立一個表格, ：

5 14-1 建立一份簡單的表格

6 14-1 建立一份簡單的表格 上圖是一個劃分成兩列兩欄的表格, 包含了 4 個資料欄位, 不過因為沒顯示表格的框線 (Border), 所以看起來不像表格。別急, 我們待會兒就會學到如何加上框線。 為了方便後文的說明, 我們簡化一下, 改用『兩列一欄、上下兩個資料欄位』的表格作為範例, 上資料欄位包含一個圖片；下資料欄位包含一段文字：

7 14-1 建立一份簡單的表格

8 14-1 建立一份簡單的表格

9 避免在表格中包含表格 雖然在 CSS 的規範並未禁止在一個表格中又包含另一個表格（亦即俗稱的『巢狀表格』）, 但是我們應儘量避免這種設計。
因為瀏覽器開啟有巢狀表格的檔案時, 速度會大幅降低, 甚至出現停頓的情形。

10 14-2 加上表格框線 相信在大多數人的認知中, 一份表格應該是有框線的, 以便於閱讀。所以先前我們加入了圖形和文字之後, 現在要來為表格加上框線。

11 認識『外框線』與『資料欄位框線』 CSS 將表格框線區分為『外框線』和『資料欄位框線』兩種, 而且兩者可以完全獨立顯示、各有不同的面貌, 例如：

12 認識『外框線』與『資料欄位框線』

13 認識『外框線』與『資料欄位框線』 然而, 實際上會用到上面這種表格的機會很少－因為線條太多, 不易閱讀。通常我們希望能簡化成下圖的樣子：

14 14-2-1 認識『外框線』與『資料欄位框線』 也就是說, 其實毋須分別顯示每個資料欄位框線, 應該儘量讓相鄰的框線重疊在一起。
CSS 提供了一個 border-collapse 屬性來控制資料欄位框線是否重疊, 當它的屬性值為 collapse, 表示讓框線重疊成為一條線；若屬性值為 seperate, 表示框線不重疊。CSS 2.0 規範是以 collapse 作為預設值, 但是許多瀏覽器的預設值卻是 seperate。

15 認識『外框線』與『資料欄位框線』 所以當我們欲顯示框線時, 第一步通常是將 <table> 標籤套用 『border-collapse: collapse』屬性, 例如： 或

16 認識『外框線』與『資料欄位框線』 總結來說, 設定了 border-collaspe: collapse, 不但會使相鄰的資料欄位框線重疊, 而且也使資料欄位框線與相鄰的外框線重疊, 但是並不表示會顯示出框線, 所以下一步我們要讓框線顯示出來, 同時決定它的樣式、寬度與顏色。 為了簡化行文, 在後文若無特別說明, 一律以『框線』統稱資料欄位框線與外框線。

17 顯示框線的樣式、寬度與顏色 CSS 以 border-style、border-width 和 border-color 3 種屬性來控制框線的樣式、寬度與顏色, 它們的用途和常用屬性值整理如下表：

18 顯示框線的樣式、寬度與顏色 border-width 的屬性值是以數字加度量單位表示；border-color 的屬性值則是以顏色名稱或 RGB 數字來表示, 這些在前幾章都已經提過了, 所以後文就只說明 borderstyle 的屬性值： none：無框線, 為預設值。若要顯示框線, border-style 就一定不能為 none, 否則即使設定了 borer-width 和 border-color 也沒用。

19 顯示框線的樣式、寬度與顏色 solid：以『單實心線』為框線, 如下圖：

20 顯示框線的樣式、寬度與顏色 double：以『雙實心線』為框線, 如下圖：

21 顯示框線的樣式、寬度與顏色 dashed：以『單虛線』為框線, 如下圖：

22 顯示框線的樣式、寬度與顏色 dotted：以『圓點虛線』為框線, 如下圖：

23 顯示框線的樣式、寬度與顏色 以下我們用範例來說明這 3 種屬性在表格的應用, 其中要注意的是必須分別設定外框線和資料欄位框線。

24 設定外框線 設定外框線的方式, 就是對於 <table> 標籤套用先前提過的 3 種屬性：

25 設定外框線

26 設定外框線

27 設定資料欄位框線 設定資料欄位框線的方式, 則是對於 <td> 標籤套用先前提過的 3 種屬性：

28 設定資料欄位框線

29 設定資料欄位框線

30 框線的簡便設定－border 在我們熟悉了設定框線樣式、寬度與顏色的方式之後, 便可以改用 border 屬性來做簡便（Shorthand）設定, 一次就設定三種屬性, 其語法如下：

31 框線的簡便設定－border 以上三種屬性值並無一定的順序, 只要用一個半形空白隔開即可, 所以『border:solid 3px purple』、『border:3px solid purple』或『border:purple 3px solid』都代表相同的意義。因此可以將前一個範例的程式碼予以簡化：

32 框線的簡便設定－border 整個程式碼精簡化之後如下：

33 框線的簡便設定－border

34 框線的簡便設定－border

35 14-3 單獨設定上下左右框線的外觀 前一節用來設定框線的方式, 一次就設定了上下左右 4 條框線的外觀。或許有人會問：「我們是否能單獨對於這 4 條框線做不同的設定呢？」 是的, 的確可以。而且更方便的是, 只要修改屬性名稱, 指定不同的設定對象即可, 原有的屬性值都可以沿用。相關的屬性名稱、用途和屬性值, 我們仍然依據框線的樣式、寬度與顏色, 整理如下表：

36 14-3 單獨設定上下左右框線的外觀

37 14-3 單獨設定上下左右框線的外觀 接著我們用一個整合範例來示範將四段框線分別做不同設定：

38 14-3 單獨設定上下左右框線的外觀

39 14-3 單獨設定上下左右框線的外觀

40 14-3 單獨設定上下左右框線的外觀

41 簡便設定 如同 border-style、border-width、border-color 三種屬性, 可以用 border 一次設定完畢。 我們也可以利用 border-top 、border-bottom、border-left、border-right 這 4 種屬性, 給予每個屬性 3 個屬性值, 一次就設定上下左右 4 條框線的外觀。以 border-top 為例, 其語法如下：

42 簡便設定 所以 『border-top:double 5px green』 代表將上框線設為寬 5px 的綠色雙實心線。同樣地, 這三種屬性值不必按照任何順序出現, 只要用一個半形空白隔開即可。 其餘的 border-bottom、border-left 及 border-right 也都擁有相同的語法和規則。

43 簡便設定 因此『border-bottom:dashed 7px red』 與 『border-bottom:red dashed 7px』 相同；『border-left:dotted blue 5pt』 與 『border-left:5pt dotted blue』相同。

44 14-4 設定四個方向的屬性時, 所遵循的共同規則 在 CSS 的語法中, 只要是用來設定上、下、左、右四個方向的屬性, 都遵循以下的共同規則：

45 14-4 設定四個方向的屬性時, 所遵循的共同規則 1.若給定 W、X、Y、Z 四個值, 這四個值便按照『順時針方向』對應到上、右、下、左 4 個方向的屬性： 所以 代表上框線寬度＝1px, 右框線寬度＝2px, 下框線寬度＝3px, 左框線寬度＝4px。

46 14-4 設定四個方向的屬性時, 所遵循的共同規則 2.若僅僅給定 W 一個值, 該值便套用到 『上、右、下、左』 4 個方向的屬性： 所以
代表上框線寬度＝右框線寬度＝下框線寬度＝左框線寬度＝4px。

47 14-4 設定四個方向的屬性時, 所遵循的共同規則 3.若給定 W、X 兩個值, 這些值依照『上、 右』的順序套用, 所缺的值則用 對面的值來代替： 因此 代表上框線寬度＝1px, 右框線寬度＝2px, 下框線寬度＝1px（同上框線寬度）, 左框線寬度＝2px（同右框線寬度）。

48 14-4 設定四個方向的屬性時, 所遵循的共同規則 4.若給定 W、X、Y 三個值, 這些值依照『上、右、下』順序套用, 所缺的值用對面的值 來代替： 因此 代表上框線寬度＝1px, 右框線寬度＝2px, 下框線寬度＝3px, 左框線寬度＝2px（同右框線寬度）。

49 14-4 設定四個方向的屬性時, 所遵循的共同規則 以上的規則, 適用於設定框線（Border）、邊距（padding）和間距（Margin）等等屬性。

50 14-5 框線設定的實用範例 先前介紹了蠻多關於框線的各種屬性與屬性值, 但是究竟該如何運用這一大堆設定呢？本節便舉一些範例, 作為將來實際應用的參考。

51 用框線作為水平分隔線 利用單獨設定下框線, 可以取代 <hr> 標籤, 顯示出更多樣化的水平分隔線：

52 用框線作為水平分隔線

53 用框線作為水平分隔線

54 用框線作為項目符號 單獨設定左框線, 只要粗細恰當、再搭配適當顏色, 就能設計出具有特色的項目符號：

55 用框線作為項目符號

56 用框線作為項目符號

57 用框線強調特定文字 將標題顯示出上框線與下框線, 以吸引瀏覽者的目光；對於內文, 單獨顯示出下框線,以凸顯其重要性：

58 用框線強調特定文字 Span

59 用框線強調特定文字

60 用框線改變超連結效果 當滑鼠指標移到一般的超連結文字上頭時, 只有文字的顏色會改變。現在, 我們可以利用框線的設定, 製造出『項目符號、底線與文字』都一齊變化的效果：

61 用框線改變超連結效果

62 用框線改變超連結效果

63 用框線改變超連結效果

64 用框線改變超連結效果

65 用框線改變超連結效果

66 用框線改變超連結效果

67 14-5-4 用框線改變超連結效果 在上例中, 每一個 <a> 標籤類都有出現『href=“#”』。
其中的井字符號『#』 代表目前網頁的開頭, 所以即使點選此連結, 會發現還是顯示相同的網頁。 不過讀者實作時, 應該將井字符號換成實際想要指到的網頁 URL。