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

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

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

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

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

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

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

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

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

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

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

14-2-1 認識『外框線』與『資料欄位框線』

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

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

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

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

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

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

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

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

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

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

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

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

設定外框線

設定外框線

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

設定資料欄位框線

設定資料欄位框線

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

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

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

14-2-3 框線的簡便設定－border

14-2-3 框線的簡便設定－border

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14-5-1 用框線作為水平分隔線

14-5-1 用框線作為水平分隔線

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

14-5-2 用框線作為項目符號

14-5-2 用框線作為項目符號

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

14-5-3 用框線強調特定文字 Span

14-5-3 用框線強調特定文字

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

14-5-4 用框線改變超連結效果

14-5-4 用框線改變超連結效果

14-5-4 用框線改變超連結效果

14-5-4 用框線改變超連結效果

14-5-4 用框線改變超連結效果

14-5-4 用框線改變超連結效果

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