第六章 表格的應用 表格是常見的資料表示方法之一，表格同樣可以應用在HTML網頁中，我們不但可以設定簡單的表格，還可以合併儲存格、設定表格顏色、設定框線寬度，製作各種表格上的變化。除此之外，在網頁製作中，表格最常應用到的反而不是繪製一個正常的表格，而是用來對齊資料，大部分您在網路上看到非常整齊的網頁，都是使用表格對齊資料的技巧所完成的。

Presentation on theme: "第六章 表格的應用 表格是常見的資料表示方法之一，表格同樣可以應用在HTML網頁中，我們不但可以設定簡單的表格，還可以合併儲存格、設定表格顏色、設定框線寬度，製作各種表格上的變化。除此之外，在網頁製作中，表格最常應用到的反而不是繪製一個正常的表格，而是用來對齊資料，大部分您在網路上看到非常整齊的網頁，都是使用表格對齊資料的技巧所完成的。"— Presentation transcript:

1 第六章 表格的應用 表格是常見的資料表示方法之一，表格同樣可以應用在HTML網頁中，我們不但可以設定簡單的表格，還可以合併儲存格、設定表格顏色、設定框線寬度，製作各種表格上的變化。除此之外，在網頁製作中，表格最常應用到的反而不是繪製一個正常的表格，而是用來對齊資料，大部分您在網路上看到非常整齊的網頁，都是使用表格對齊資料的技巧所完成的。

2 第六章 表格的應用 本章重點放在介紹HTML網頁的表格及應用，本章非常重要，不論您是否想要在網頁中加入表格，都必須學習表格的製作方式，以及種種表格的設定。這是因為表格除了可以放置資料之外，一個無框線的表格更是對齊網頁資料常使用的技巧。

3 大綱 6.1 表格宣告（<table>、<tr>、<th>、<td>）
6.1.1 基本表格的製作 6.1.2 表格的屬性列表 6.2 深入<table>表格屬性 6.2.1 <table>－border屬性（表格邊框寬度） 6.2.2 <table>－cellspacing屬性（儲存格距離／表格內框線寬度） 6.2.3 <table>－cellpadding屬性（資料與框線距離） 6.2.4 <table>－width屬性（設定表格寬度） 6.2.5 <table>－hieght屬性（設定表格高度） 6.2.6 <table>－align屬性（設定表格位置） 6.2.7 <table>－bgcolor屬性（設定表格背景顏色） 6.2.8 <table>－bordercolor、bordercolorlight 、bordercolordark屬性 （設定表格框線顏色） 6.2.9 <table>－background屬性（設定表格背景圖片）

4 大綱 6.3 深入<tr>（列）的屬性 6.4 深入<th>、<td>（儲存格）的屬性
6.3.1 <tr>－bgcolor屬性（列的背景顏色） 6.3.2 <tr>－align屬性（設定單列文字的水平對齊方式） 6.3.3 <tr>－valign屬性（設定單列文字的垂直對齊方式） 6.4 深入<th>、<td>（儲存格）的屬性 6.4.1 <th>、<td>－width屬性（儲存格寬度） 6.4.2 <th>、<td>－height屬性（儲存格高度） 6.4.3 <th>、<td>－align屬性（設定儲存格文字的水平對齊方式） 6.4.4 <th>、<td>－valign屬性（設定儲存格文字的垂直對齊方式） 6.4.5 <th>、<td>－bgcolor屬性（儲存格的背景顏色） 6.4.6 <th>、<td>－background屬性（儲存格的背景圖片） 6.4.7 <th>、<td>－colspan屬性（行的擴展／向右合併儲存格） 6.4.8 <th>、<td>－rowspan屬性（列的擴展／向下合併儲存格） 6.4.9 <th>、<td>－colspan與rowspan屬性的整合應用

5 大綱 6.5 <caption>標籤（表格標題） 6.6 表格的整合應用
6.5.1 <caption>－align屬性（設定表格標題的水平位置） 6.5.2 <caption>－valign屬性（設定表格標題的垂直位置） 6.6 表格的整合應用 6.6.1 巢狀表格 6.6.2 對齊資料 6.6.3 表格描述

6 6.1 表格宣告 （<table>、<tr>、<th>、<td>）
首先我們從表格宣告開始介紹，HTML的表格宣告，最主要是靠<table>、<tr>、<td>（或<th>）等3種標籤組合而成。並且每個標籤包含各種屬性，藉由這些屬性便可以完成表格的種種變化。各標籤用途如下： <table>、</table>：成對標籤，用來宣告一個表格的開頭與結束。 <tr>、</tr>：成對標籤，用來宣告表格中某一列的開頭與結束。 <td>、</td>（或<th>、</th>）：成對標籤，一列中某一個儲存格的開頭與結束。其中<td>稱為一般儲存格（或簡稱儲存格），<th>則稱為標題儲存格。

7 6.1 表格宣告 （<table>、<tr>、<th>、<td>）
<table>、<tr>、<td>（或<th>）的基本格式與示意圖如下： 格式： <table> <tr> <td>...</td> <td>...</td> </tr> ：……………………………………….. </table>

8 6.1 表格宣告 （<table>、<tr>、<th>、<td>）
示意圖： 【觀念釐清】： 本書所稱之"列"，一律指的是『橫列』；"行"則一律指的是『直行』，一個"3×4的表格"指的是『一個表格具有3列，每列有4個儲存格。』。 根據經驗，在台灣有少部分的人對於行與列常常產生混淆，其實要記憶行與列的方法非常簡單 只要記住『一列火車』就可以想到是橫向的列。 另外，國小老師規定的國語作業不都是『這個生字寫幾行』嗎？所以行指的就是直行。

9 6.1.1 基本表格的製作 我們先從最簡單的表格開始示範，從這個範例中來學習表格中列與儲存格之間的關係以及<th>（標題儲存格）與<td>（一般儲存格）的差別。 範例6-1： 內容 執行結果

10 6.1.2 表格的屬性列表 表格所使用的標籤共有<table>、<tr>、<td>、<th>、<caption>等等，每個標籤都各自擁有一些屬性，組合起來就可以形成變化多端的表格，各標籤與屬性列表於下，並將於本章各節中詳加介紹。 標籤 附帶屬性 功能說明 <table> border, cellspacing, cellpadding, width, height, align, bgcolor 宣告表格。 <tr> bgcolor, align, valign 宣告表格的列。 <td> width, height, bgcolor, align, valign, colspan, rowspan 宣告列的一般儲存格。 <th> 宣告列的標題儲存格。 <caption> align, valign 宣告表格的標題。 表格各標籤功能列表

11 屬性 屬性值 功能說明 語法 負面 border N個pixels 表格邊框厚度。 6.2.1 cellspacing
表格內框線厚度／儲存格距離。 6.2.2 cellpadding 資料與框線距離。 6.2.3 width pixels或百分比 表格寬度。 6.2.4 height 表格高度。 6.2.5 非標準 align left、center、right 表格位置。 6.2.6 bgcolor 顏色表示法 表格背景顏色。 6.2.7 bordercolor 邊框顏色。 6.2.8 bordercolorlight 亮框線顏色。 bordercolordark 暗框線顏色。 background 圖片路徑及檔名 背景圖片 6.2.9 <table>屬性列表

12 6.1.2 表格的屬性列表 屬性 屬性值 功能說明 語法 負面 align left、center、right 標題對齊方式。 6.5.1
6.1.2 表格的屬性列表 屬性 屬性值 功能說明 語法 負面 align left、center、right 標題對齊方式。 6.5.1 valign top、bottom 標題置於表格上或下方。 6.5.2 非標準 <caption>屬性列表 屬性 屬性值 功能說明 語法 負面 bgcolor 顏色表示法 列的背景顏色。 6.3.1 align left、center、right 列中各儲存格文字左右對齊方式。 6.3.2 valign top、middle（center）、bottom 列中各文字上下對齊方式。 6.3.3 <tr>屬性列表

13 6.1.2 表格的屬性列表 屬性 屬性值 功能說明 語法 負面 width pixels或百分比 儲存格寬度。 6.4.1 height
6.1.2 表格的屬性列表 屬性 屬性值 功能說明 語法 負面 width pixels或百分比 儲存格寬度。 6.4.1 height 儲存格高度。 6.4.2 align left、center、right 儲存格文字左右對齊方式。 6.4.3 valign top、middle（center）、bottom 儲存格文字上下對齊方式。 6.4.4 bgcolor 顏色表示法 儲存格背景顏色。 6.4.5 background 圖片路徑及檔名 儲存格背景圖片。 6.4.6 非標準 colspan 欄位數 儲存格橫向擴展。 6.4.7 rowspan 儲存格縱向擴展。 6.4.8 <td>、<th>屬性列表

14 6.2 深入<table>表格屬性 在本節中，我們將介紹<table>標籤的各個屬性。<table>是表格的宣告，因此，所有在<table>中所宣告的屬性，其作用範圍是整個表格。這些屬性包含有border、bgcolor、width、align、cellspacing、cellpadding等等。 【註】： 當表格與儲存格的屬性值衝突時（例如設定不同的背景顏色），會以最靠近儲存格的屬性為準。

15 6.2.1 <table>－border屬性（表格邊框寬度）
功能：設定表格邊框寬度。 格式： 範例6-2： 內容 執行結果 <table border="N">………………</table>

16 6.2.2 <table>－cellspacing屬性 （儲存格距離／表格內框線寬度）
儲存格間的距離也可以看做是表格內框線寬度，在範例6-2中，我們得知表格中所有儲存格的距離預設值為1，事實上儲存格的距離是可以藉由cellspacing屬性來加以設定的，單位同樣是像素（pixel） 值得注意的是，在範例6-1中，我們並未設定cellspacing屬性，但是預設值1卻不會起作用，這是因為表格外框線的寬度為0的緣故。所以，設定cellspacing屬性只有在border屬性不為0時才會起作用。 標籤屬性：<table>－cellspacing屬性。 功能：設定儲存格距離／表格內框線寬度。 格式： 範例6-3： 內容 執行結果 <table border="N" cellspacing="M">………………</table>

17 6.2.2 <table>－cellspacing屬性 （儲存格距離／表格內框線寬度）
【謬誤】： 許多書都把cellspacing屬性稱為內框線寬度，但從設計時所採用的英文字看來，cellspacing屬性真正的意義應該是儲存格與儲存格間的距離 讀者可以透過6.2.8節中所介紹的bordercolor屬性改變框線顏色，就可以發現，即使將cellspacing值加大也無法使得變色後的內框線變粗。

18 6.2.3 <table>－cellpadding屬性 （資料與框線距離）
cellpadding屬性則是允許設定表格中『每一個儲存格內容與儲存格邊界的距離』。如果讀者細心一點的話，很容易可以發現每一個儲存格內的文字與儲存格邊界根本沒有空隙，這是因為表格預設cellpadding為0的關係，當我們改變這個設定值之後，就可以看出明顯的區別。 標籤屬性：<table>－cellpadding屬性。 功能：設定儲存格內容與儲存格邊界的距離。 格式： 範例6-4： 內容 執行結果 <table cellpadding="N">………………</table>

19 6.2.4 <table>－width屬性 （設定表格寬度）
絕對表示代表的是將表格總寬度以像素表示，不隨瀏覽器寬度而變化，因此當指定寬度大於瀏覽器寬度時，將會出現橫向捲軸。 相對表示則是指定表格寬度佔瀏覽器寬度的百分比，因此，會隨著瀏覽器寬度自動計算表格寬度，例如：當我們指定表格寬度與瀏覽器寬度比為60%（width="60%"），則不論如何改變瀏覽器視窗寬度，表格寬度將始終維持瀏覽器寬度的60%，但唯一的限制是無論如何縮小瀏覽器視窗，仍然必須保持可以顯示表格內容的足夠寬度。 此外，另外一個問題就是儲存格的寬度，儲存格的寬度是依據表格寬度等比例分配，例如直接指定表格寬度或計算後的表格寬度（相對表示法）為400 pixels，而每一列共有8個儲存格，則每個儲存格為50 pixels，以下我們透過範例來說明這兩種表格寬度表示法。

20 6.2.4 <table>－width屬性 （設定表格寬度）
功能：設定表格寬度。 格式： 絕對表示法： 相對表示法： 【註】：N%介於1%~100%，代表表格寬度佔瀏覽器寬度的百分比 範例6-5： 內容 執行結果 <table width="數值（以pixel為單位）" >………………</table> <table width="N%" >………………………………</table>

21 6.2.5 <table>－hieght屬性（設定表格高度）
除了可以設定表格寬度之外，我們也可以設定表格的高度，指定表格高度是透過height屬性，並且同樣也是分為絕對表示與相對表示兩種指定方式。並且當使用絕對表示指定的表格高度比瀏覽器高度還大時，就會出現縱向捲軸。而使用相對表示法時，則必須注意如果網頁中除了有表格之外，尚有其他常常變動的內容，此時最好不要使用相對表示法指定表格高度（見範例6-7）。 標籤屬性：<table>－height屬性。（非HTML/XHTML的標準） 功能：設定表格高度。

22 6.2.5 <table>－hieght屬性（設定表格高度）
格式： 絕對表示法： 相對表示法： 【註】：N%介於1%~100%，代表表格高度佔瀏覽器高度的百分比 範例6-6： 內容 執行結果 範例6-7： <table height="數值（以pixel為單位）" >………………</table> <table height ="N%">………………</table>

23 6.2.6 <table>－align屬性 （設定表格位置）
格式： 屬性align：設定表格對齊方式。 屬性值： left：表格靠左對齊。（與預設值類似） center：表格置中對齊。 right：表格靠右對齊。 範例6-8： 內容 執行結果 <table align="left、center或right" >………………</table>

24 6.2.7 <table>－bgcolor屬性（設定表格背景顏色）
和<body>標籤一樣，我們也可以設定bgcolor屬性來改變表格的背景顏色，背景顏色一經設定後，表格內的所有儲存格的背景顏色都會跟著改變，如果還想要指定某幾個儲存格的背景顏色，則必須設定<td>或<th>的bgcolor屬性。 標籤屬性：<table>－bgcolor屬性。 功能：設定表格背景顏色。 格式： 範例6-9： 內容 執行結果 <table bgcolor="#16進制顏色表示法">………………</table> <table bgcolor="關鍵字顏色表示法">………………</tbale>

25 6.2.8 <table>－bordercolor、bordercolorlight 、bordercolordark屬性（設定表格框線顏色）
標籤屬性：<table>－bordercolor、bordercolorlight 、bordercolordark屬性。（非HTML/XHTML的標準。） 格式： 屬性bordercolor：設定表格框線顏色。 屬性bordercolorlight：設定表格亮框線顏色。（Netscape9瀏覽器不支援。） 屬性bordercolordark：設定表格暗框線顏色。（Netscape9瀏覽器不支援。） 範例6-10： 內容 執行結果 <table bordercolor="顏色表示法" bordercolorlight="顏色表示法" bordercolordark="顏色表示法"> ……………………………… </table>

26 6.2.9 <table>－background屬性 （設定表格背景圖片）
和<body>標籤一樣，我們也可以透過background屬性來設定表格的背景圖片。 標籤屬性：<table>－background屬性。（非HTML/XHTML的標準） 功能：設定表格背景圖片。 格式： 範例6-11： 內容 執行結果 <table backgorund="圖檔路徑/圖檔名稱">………………</table>

27 6.3 深入<tr>（列）的屬性 除了以表格為單位之外，我們也可以將許多屬性直接指定在列的標籤<tr>中，如此一來，就可以只針對某一列來設定相關屬性。

28 6.3.1 <tr>－bgcolor屬性 （列的背景顏色）
和<table>標籤一樣，我們也可以在<tr>標籤中設定bgcolor屬性來改變表格中某一列的背景顏色，如果單列背景顏色與表格顏色衝突時，會以最靠近資料的設定為準，也就是單列的背景顏色。 標籤屬性：<tr>－bgcolor屬性。 功能：設定單一列背景顏色。 格式： 範例6-12： 內容 執行結果 <tr bgcolor="顏色表示法">………………</tr>

29 6.3.2 <tr>－align屬性 （設定單列文字的水平對齊方式）
<tr>標籤的align屬性與<table>標籤的align屬性所造成的效果不同，<table>的align屬性是用來指定整個表格的位置（非表格內的文字對齊方式），而<tr>標籤內的align屬性則是用來指定單一列各儲存格中文字的對齊方式。 標籤屬性：<tr>－align屬性。 格式： 屬性align：設定單一列各儲存格內文字的水平對齊方式。 屬性值： left：文字靠左對齊。 center：文字置中對齊。 right：文字靠右對齊。 範例6-13： 內容 執行結果 <tr align="left、center或right" >………………</tr>

30 6.3.3 <tr>－valign屬性 （設定單列文字的垂直對齊方式）
格式： 屬性valign：設定單一列各儲存格內文字的垂直對齊方式。 屬性值： top：文字向上對齊。 middle或center：文字置中對齊。（預設值） bottom：文字向下對齊。 【註】：雖然預設垂直對齊方式是置中對齊，但是當您指定不存在的屬性值時（例如：valign="ABC"），將會呈現向上對齊的現象。 範例6-14： 內容 執行結果 <tr valign="top、middle（center）或bottom" >………………</tr>

31 6.4 深入<th>、<td>（儲存格）的屬性
在介紹<th>與<td>各個屬性之前，我們再一次把<th>與<td>的特型描述如下： <th>：標題儲存格，儲存格中的文字會以粗體、置中對齊方式呈現。一般最常用在最上列或最左行來使用，以突顯標題。 <td>：一般儲存格，儲存格中的文字將會靠左對齊。 範例6-15： 內容 執行結果

32 6.4.1 <th>、<td>－width屬性（儲存格寬度）
絕對表示：直接指定儲存格寬度的像素數目（pixels）。 相對表示：指定儲存格與表格寬度的百分比，因此，如果要以相對表示法來設定儲存格寬度的話，則同一列儲存格的寬度總和必須為100%。 【註】：我們只需要指定每一直行中任一個儲存格的寬度，該直行中的每一個儲存格就會自動依此寬度顯示。 標籤屬性：<th>、<td>－width屬性。 功能：設定某一個儲存格的寬度。

33 6.4.1 <th>、<td>－width屬性（儲存格寬度）
格式： 【註】：若指定百分比，必須符合單列每一個儲存格寬度總和為100%的規定。 範例6-16： 內容 執行結果 範例6-17： <th width="數值（以pixel為單位） 或 N%">………………</th> 或 <td width="數值（以pixel為單位） 或 N%">………………</td>

34 6.4.2 <th>、<td>－height屬性（儲存格高度）
絕對表示：直接指定儲存格高度的像素數目（pixels）。 相對表示：指定儲存格與表格高度的百分比，同一行儲存格的高度總和必須為100%。 【註】：我們只需要指定每一列中任一個儲存格的高度，該橫列中的每一個儲存格就會自動依此高度顯示。 標籤屬性：<th>、<td>－height屬性。 功能：設定某一個儲存格的高度。

35 6.4.2 <th>、<td>－height屬性（儲存格高度）
格式： 【註】：若指定百分比，必須符合單行每一個儲存格高度總和為100%的規定。 範例6-18： 內容 執行結果 範例6-19： <th height="數值（以pixel為單位） 或 N%">………………</th> 或 <td height="數值（以pixel為單位） 或 N%">………………</td>

36 6.4.3 <th>、<td>－align屬性 （設定儲存格文字的水平對齊方式）
格式： 屬性align：設定各儲存格內文字的水平對齊方式。 屬性值： left：文字靠左對齊。（<td>預設值） center：文字置中對齊。（<th>預設值） right：文字靠右對齊。 範例：見範例6-20。 <th align="left、center或right" >………………</th> 或 <td align="left、center或right" >………………</td>

37 6.4.4 <th>、<td>－valign屬性 （設定儲存格文字的垂直對齊方式）
格式： 屬性valign：設定各儲存格內文字的垂直對齊方式。 屬性值： top：文字向上對齊。 middle或center：文字置中對齊。（預設值） bottom：文字向下對齊。 範例6-20： 內容 執行結果 <th valign="top、middle（center）或bottom" >………………</th> 或 <td valign="top、middle（center）或bottom" >………………</td>

38 6.4.5 <th>、<td>－bgcolor屬性 （儲存格的背景顏色）
<th>、<td>標籤也和<tr>與<table>標籤一樣，我們可以在<th>或<td>標籤中設定bgcolor屬性來改變單一儲存格的背景顏色。 標籤屬性：<th>、<td>－bgcolor屬性。 功能：設定單一儲存格背景顏色。 格式： 範例6-21： 內容 執行結果 <th bgcolor="顏色表示法">………………</th> 或 <td bgcolor="顏色表示法">………………</td>

39 6.4.6 <th>、<td>－background屬性（儲存格的背景圖片）
和<table>標籤一樣，我們也可以在<th>或<td>標籤中設定background屬性來改變單一儲存格的背景圖片。 標籤屬性：<th>、<td>－background屬性。（非HTML/XHTML的標準） 功能：設定單一儲存格背景圖片。 格式： 範例6-22： 內容 執行結果 <th backgorund="圖檔路徑/圖檔名稱">………………</th> 或 <td backgorund="圖檔路徑/圖檔名稱">………………</td>

40 6.4.7 <th>、<td>－colspan屬性 （行的擴展／向右合併儲存格）
在本小節之前的所有範例中，我們所看到的表格都是屬於非常標準的表格，也就是每一行任一儲存格的寬度都相等，每一列任一儲存格的高度也都相等。可是有的時候我們想要的表格並非這種標準格式，例如有時候會需要合併某2個儲存格 此時，我們就必須藉助儲存格的colspan與rowspan兩個屬性來完成儲存格的合併。 首先，我們先介紹colspan屬性，在下一小節中再介紹rowspan屬性。 從字面上來看colspan屬性，所代表的是『行的擴展』，換句話說，一個直行應該如何擴展呢？自然是向左右方來擴展，而一個表格是由上向下、由左向右的順序來繪製，因此，一個直行應該是向右擴展，所以我們也可以把colspan屬性看做是向右合併儲存格。 以下我們透過範例實際說明儲存格向右擴展的效果。

41 6.4.7 <th>、<td>－colspan屬性 （行的擴展／向右合併儲存格）
功能：向右合併儲存格（行的擴展）。 格式： 範例6-23： 內容 執行結果 <th colspan="合併儲存格數目">………………</th> 或 <td colspan="合併儲存格數目">………………</td>

42 6.4.8 <th>、<td>－rowspan屬性 （列的擴展／向下合併儲存格）
功能：向下合併儲存格（列的擴展）。 格式： 範例6-24： 內容 執行結果 <th rowspan="合併儲存格數目">………………</th> 或 <td rowspan="合併儲存格數目">………………</td>

43 6.4.9 <th>、<td>－colspan與rowspan屬性的整合應用
在本節的最後，我們示範一個向右及向下合併儲存格的整合範例，看看儲存格合併可以創造出怎麼樣的表格。 範例6-25： 內容 執行結果

44 6.5 <caption>標籤（表格標題）
許多表格都會有一個標題，標題是用來說明該表格的用途。為了表格的標題，HTML特別設計了<caption>標籤 <caption>表格標題標籤必須和<table>表格標籤一起合用，否則就沒有意義 當然您也可以不使用<caption>而另外想辦法在適當位置加入標題文字（例如本節之前的所有範例） 不過由於<caption>標籤必須放在<table>標籤之內，而顯示時卻會在表格之外，因此當表格位置常常移動時，是非常好用的方法。 除此之外，使用<caption>標籤還可以設定標題與表格的相對位置。 以下，我們從最簡單的預設<caption>開始介紹。

45 6.5 <caption>標籤（表格標題）
標籤：<caption>、</caption>成對標籤。 功能：設定表格的標題。 格式： 範例6-26： 內容 執行結果 <table> <caption>………………</caption> ……………………………………………… </table>

46 6.5.1 <caption>－align屬性（設定表格標題的水平位置）
格式： 屬性align：設定表格標題的水平對齊方式。 屬性值： left：標題靠表格左邊界對齊。 center：標題靠表格中央對齊。（預設值） right：標題靠表格右邊界對齊。 範例6-27： 內容 執行結果 <caption align="left、center或right" >………………</caption>

47 6.5.2 <caption>－valign屬性（設定表格標題的垂直位置）
標籤屬性：<caption>－valign屬性。（非HTML/XHTML的標準） 格式： 屬性valign：設定標題位於表格的上、下方。（Netscape9瀏覽器不支援。） 屬性值： top：標題置於表格上方。（預設值） bottom：標題置於表格下方。 範例6-28： 內容 執行結果 <caption valign="top或bottom" >………………</caption>

48 6.6 表格的整合應用 我們已經介紹完畢所有與表格有關的HTML標籤及屬性，現在可以透過這些標籤及屬性完成更多種表格的應用，在本節中，我們將介紹幾種比較常見的表格進階應用範例，包含有『巢狀式表格』、『用表格來對齊資料』、『表格的描述』等等。

49 6.6.1 巢狀表格 巢狀表格指的是『一個表格中又有其他的表格』，這是因為儲存格是一個基本單位，在儲存格中我們除了可以放入文字之外，也可以放入圖片（下一章中介紹）或另一個表格。當我們在儲存格中插入表格時，就形成了巢狀表格，請看以下的範例。 範例6-29： 內容 執行結果

50 6.6.2 對齊資料 最常見的表格應用就是使用表格來對齊資料，尤其是當資料呈現多層次的排列時，我們還可以用合併儲存格方式或者利用巢狀表格來對齊資料，以下我們使用兩個範例來做資料對齊的示範。 範例6-30： 內容 執行結果 範例6-31：

51 6.6.3 表格描述 有的時候我們會在表格旁邊加上一些說明文字，可是我們常常會發現表格以外的文字不是出現在表格的上方就是出現在表格的下方，而無法出現在表格的左邊或右邊，我們在這裡提供兩個方法來解決這樣的問題。 方法一： 使用<table>的align屬性，將表格設定為浮動表格。（範例6-32） 方法二： 使用巢狀表格，將真的要出現的表格放在一個表格（邊框為0）的某一個儲存格中，其餘的儲存格就可以存放用來描述表格的文字了。（範例6-33） 範例6-32： 內容 執行結果 範例6-33： 請翻閱至18.6節（電子檔），製作網頁DIY。

52 本章習題