專業 HTML 網頁設計

專業專業 HTMLHTML 網頁設網頁設計計

陳錦輝陳錦輝

HTML/DHTML/CSS/JavaScript

P303

22

第六章　表格的應用第六章　表格的應用 6.1 6.1 表格宣告表格宣告 6.26.2 深入深入 <<table>table> 表格屬性表格屬性 6.36.3 深入深入 <<tr>(tr>( 列列 )) 的屬性的屬性 6.4 6.4 深入深入 <<th>th> 、、 <td>(<td>( 儲存格儲存格 )) 的屬性的屬性 6.5 <6.5 <caption>caption> 標籤標籤 (( 表格標題表格標題 )) 6.6 6.6 表格的整合應用表格的整合應用 6.7 6.7 網頁網頁 DIYDIY

33

6.16.1 　表格宣告　表格宣告 HTMLHTML 的表格宣告，最主要是靠的表格宣告，最主要是靠

<<table>table> 、、 <tr><tr> 、、 <td>(<td>( 或或 <<th>)th>) 等等 33 種標籤組合而種標籤組合而成。成。

每個標籤包含各種屬性，藉由這些屬性便可以完成每個標籤包含各種屬性，藉由這些屬性便可以完成表格的種種變化。各標籤用途如下：表格的種種變化。各標籤用途如下： <<table>table> 、、 </table></table> ：：用來宣告一個表格的開頭與結束。用來宣告一個表格的開頭與結束。 <<tr>tr> 、、 </tr></tr> ：：用來宣告表格中某一列的開頭與結束。用來宣告表格中某一列的開頭與結束。 <<td>td> 、、 </td>(</td>( 或或 <<th>th> 、、 </th>)</th>) ：：一列中某一個儲存格的一列中某一個儲存格的

開頭與結束。其中開頭與結束。其中 <<td>td> 稱為一般儲存格稱為一般儲存格 (( 或簡稱儲存格或簡稱儲存格 )) ，，<<th>th> 則稱為標題儲存格。則稱為標題儲存格。

44

<<table>table> 、、 <tr><tr> 、、 <td>(<td>( 或或 <<th>)th>) 的基本格式與示的基本格式與示意圖如下：意圖如下：格式：格式：

<table> <tr>

<td>...</td>.........<td>...</td>

</tr> <tr>

<td>...</td>.........<td>...</td>

</tr> ………………………………………： ………………………………………： <tr>

<td>...</td>.........<td>...</td>

</tr></table>

6.16.1 　表格宣告　表格宣告

55

示意圖：示意圖：

6.16.1 　表格宣告　表格宣告

66

6.1.16.1.1 基本表格的製作基本表格的製作在表格中列與儲存格之間的關係以及在表格中列與儲存格之間的關係以及 <<th>(th>( 標題標題

儲存格儲存格 )) 與與 <<td>(td>( 一般儲存格一般儲存格 )) 的差別。的差別。

範例範例 6-16-1 ：：內容內容執行結果執行結果

77

標籤標籤附帶屬性附帶屬性功能說明功能說明

<<table>table> border, cellspacing, cellpadding, border, cellspacing, cellpadding, width, height, align, bgcolorwidth, height, align, bgcolor 宣告表格宣告表格

<<tr>tr> bgcolor, align, valignbgcolor, align, valign 宣告表格的列宣告表格的列

<<td>td> width, height, bgcolor, align, valign, width, height, bgcolor, align, valign, colspan, rowspancolspan, rowspan

宣告列的一般儲存格宣告列的一般儲存格

<<th>th> 宣告列的標題儲存格宣告列的標題儲存格<<caption>caption> align, valignalign, valign 宣告表格的標題宣告表格的標題

表格各標籤功能列表

6.1.26.1.2 　表格的屬性列表　表格的屬性列表表格所使用的標籤共有表格所使用的標籤共有

<<table>table> 、、 <tr><tr> 、、 <td><td> 、、 <th><th> 、、 <caption><caption> 等等，等等，每個標籤都各自擁有一些屬性，組合起來就可以每個標籤都各自擁有一些屬性，組合起來就可以形成變化多端的表格，各標籤與屬性列表於下：形成變化多端的表格，各標籤與屬性列表於下：

88

6.1.26.1.2 　表格的屬性列表　表格的屬性列表屬性屬性屬性值屬性值功能說明功能說明語法語法負面負面

borderborder NN 個個 pixelspixels 表格邊框厚度表格邊框厚度 6.2.16.2.1

cellspacingcellspacing NN 個個 pixelspixels 表格內框線厚度表格內框線厚度 // 儲存格距儲存格距離離 6.2.26.2.2

cellpaddingcellpadding NN 個個 pixelspixels 資料與框線距離資料與框線距離 6.2.36.2.3

widthwidth pixelspixels 或百分比或百分比表格寬度表格寬度 6.2.46.2.4

heightheight pixelspixels 或百分比或百分比表格高度表格高度 6.2.56.2.5 非標準非標準

alignalign leftleft 、、 centercenter 、、 rigrightht 表格位置表格位置 6.2.66.2.6

bgcolorbgcolor 顏色表示法顏色表示法表格背景顏色表格背景顏色 6.2.76.2.7 負面負面bordercolorbordercolor 顏色表示法顏色表示法邊框顏色邊框顏色

6.2.86.2.8 非標準非標準bordercolorlightbordercolorlight 顏色表示法顏色表示法亮框線顏色亮框線顏色bordercolordarkbordercolordark 顏色表示法顏色表示法暗框線顏色暗框線顏色backgroundbackground 圖片路徑及檔名圖片路徑及檔名背景圖片背景圖片 6.2.96.2.9 非標準非標準

<table>屬性列表

99

屬性屬性屬性值屬性值功能說明功能說明語法語法負面負面bgcolorbgcolor 顏色表示法顏色表示法列的背景顏色列的背景顏色 6.3.16.3.1 負面負面

alignalign leftleft 、、 centercenter 、、 rigrightht 列中各儲存格文字左右對齊方式列中各儲存格文字左右對齊方式 6.3.26.3.2

valignvalign toptop 、、 middle(centemiddle(center)r) 、、 bottombottom 列中各文字上下對齊方式列中各文字上下對齊方式 6.3.36.3.3

<tr>屬性列表

6.1.26.1.2 　表格的屬性列表　表格的屬性列表

1010


屬性屬性屬性值屬性值功能說明功能說明語法語法負面負面widthwidth pixelspixels 或百分比或百分比儲存格寬度儲存格寬度 6.4.16.4.1 負面負面heightheight pixelspixels 或百分比或百分比儲存格高度儲存格高度 6.4.26.4.2 負面負面alignalign leftleft 、、 centercenter 、、 rightright 儲存格文字左右對齊方式儲存格文字左右對齊方式 6.4.36.4.3

valignvalign toptop 、、 middle(center)middle(center)、、 bottombottom 儲存格文字上下對齊方式儲存格文字上下對齊方式 6.4.46.4.4

bgcolorbgcolor 顏色表示法顏色表示法儲存格背景顏色儲存格背景顏色 6.4.56.4.5 負面負面backgroundbackground 圖片路徑及檔名圖片路徑及檔名儲存格背景圖片儲存格背景圖片 6.4.66.4.6 非標準非標準colspancolspan 欄位數欄位數儲存格橫向擴展儲存格橫向擴展 6.4.76.4.7

rowspanrowspan 欄位數欄位數儲存格縱向擴展儲存格縱向擴展 6.4.86.4.8

<td> 、 <th>屬性列表

1111

屬性屬性屬性值屬性值功能說明功能說明語法語法負面負面

alignalign leftleft 、、 centercenter 、、 rigrightht 標題對齊方式標題對齊方式 6.5.16.5.1 負面負面

valignvalign toptop 、、 bottombottom 標題置於表格上或下方標題置於表格上或下方 6.5.26.5.2 非標準非標準<caption>屬性列表


1212

6.26.2 　深入　深入 <<table>table> 表格屬性表格屬性 <<table>table> 是表格的宣告，所有在是表格的宣告，所有在 <<table>table> 中所宣告中所宣告

的屬性，其作用範圍是整個表格。的屬性，其作用範圍是整個表格。

屬性包含有屬性包含有borderborder 、、 bgcolorbgcolor 、、 widthwidth 、、 alignalign 、、 cellspacingcellspacing、、 cellpaddingcellpadding 等等。等等。

1313

<table border="N">………………</table>

6.2.16.2.1 　　 <<table> - bordertable> - border 屬性屬性如果要有一個表格出現在網頁之中，就必須設定如果要有一個表格出現在網頁之中，就必須設定

borderborder 屬性來指定表格邊框的寬度。屬性來指定表格邊框的寬度。格式：格式：

1414

6.2.26.2.2 　　 <<table> - cellspacingtable> - cellspacing 屬屬性性

儲存格間的距離也可以看做是表格內框線寬度，儲存格間的距離也可以看做是表格內框線寬度，表格中所有儲存格的距離預設值為表格中所有儲存格的距離預設值為 11 ，事實上儲，事實上儲存格的距離是可以藉由存格的距離是可以藉由 cellspacingcellspacing 屬性來加以設屬性來加以設定的，單位同樣是像素定的，單位同樣是像素 (pixel)(pixel) 。。

若未設定若未設定 cellspacingcellspacing 屬性，且預設值屬性，且預設值 11 不起作用，不起作用，這是因為表格外框線的寬度為這是因為表格外框線的寬度為 00 的緣故。所以，的緣故。所以，設定設定 cellspacingcellspacing 屬性只有在屬性只有在 borderborder 屬性不為屬性不為 00時才會起作用。時才會起作用。


1515

6.2.36.2.3 　　 <<table> - cellpaddingtable> - cellpadding 屬屬性性

cellpaddingcellpadding 屬性則是允許設定表格中『每一個儲屬性則是允許設定表格中『每一個儲存格內容與儲存格邊界的距離』。存格內容與儲存格邊界的距離』。

因為表格預設因為表格預設 cellpaddingcellpadding 為為 00 的關係，每一個儲的關係，每一個儲存格內的文字與儲存格邊界沒有空隙。存格內的文字與儲存格邊界沒有空隙。


1616

6.2.46.2.4 　　 <<table> - widthtable> - width 屬性屬性表格的寬度是可以容納所有資料的最小寬度，且表格的寬度是可以容納所有資料的最小寬度，且

會隨著瀏覽器視窗的寬度而改變表格寬度。會隨著瀏覽器視窗的寬度而改變表格寬度。

可以透過可以透過 widthwidth 屬性直接指定表格的寬度，指定屬性直接指定表格的寬度，指定方式有絕對表示與相對表示兩種方式。方式有絕對表示與相對表示兩種方式。絕對表示代表的是將表格總寬度以像素表示，不隨瀏絕對表示代表的是將表格總寬度以像素表示，不隨瀏

覽器寬度而變化，因此當指定寬度大於瀏覽器寬度時，覽器寬度而變化，因此當指定寬度大於瀏覽器寬度時，將會出現橫向捲軸。將會出現橫向捲軸。

相對表示則是指定表格寬度佔瀏覽器寬度的百分比，相對表示則是指定表格寬度佔瀏覽器寬度的百分比，因此，會隨著瀏覽器寬度自動計算表格寬度。因此，會隨著瀏覽器寬度自動計算表格寬度。


1717

6.2.56.2.5 　　 <<table> - hieghttable> - hieght 屬性屬性除了可以設定表格寬度之外，也可以設定表格的除了可以設定表格寬度之外，也可以設定表格的

高度，指定表格高度是透過高度，指定表格高度是透過 heightheight 屬性，且同樣屬性，且同樣也是分為絕對表示與相對表示兩種指定方式。也是分為絕對表示與相對表示兩種指定方式。

當使用絕對表示指定的表格高度比瀏覽器高度還當使用絕對表示指定的表格高度比瀏覽器高度還大時，就會出現縱向捲軸。大時，就會出現縱向捲軸。



1818

6.2.66.2.6 　　 <table> - align<table> - align 屬性屬性當表格寬度小於瀏覽器寬度時，預設表格都是靠當表格寬度小於瀏覽器寬度時，預設表格都是靠

左對齊，不過也可以透過左對齊，不過也可以透過 alignalign 屬性，將表格指定屬性，將表格指定為靠左、置中或靠右對齊。為靠左、置中或靠右對齊。

表格預設的靠左對齊與透過屬性指定靠左對齊，表格預設的靠左對齊與透過屬性指定靠左對齊，對於表格之外的內容對於表格之外的內容 (( 表格之後的內容表格之後的內容 )) 會產生位會產生位置不同的現象。置不同的現象。

1919

6.2.66.2.6 　　 <table> - align<table> - align 屬性屬性屬性值：屬性值：

leftleft ：：表格靠左對齊。表格靠左對齊。 (( 與預設值類似與預設值類似 )) centercenter ：：表格置中對齊。表格置中對齊。 rightright ：：表格靠右對齊。表格靠右對齊。

範例範例 6-86-8 ：：內容執行結果內容執行結果

2020

6.2.76.2.7 <<table> - bgcolortable> - bgcolor 屬性屬性和和 <<body>body> 標籤一樣，也可以設定標籤一樣，也可以設定 bgcolorbgcolor 屬性來屬性來

改變表格的背景顏色，背景顏色一經設定後，表改變表格的背景顏色，背景顏色一經設定後，表格內的所有儲存格的背景顏色都會跟著改變，如格內的所有儲存格的背景顏色都會跟著改變，如果還想要指定某幾個儲存格的背景顏色，則必須果還想要指定某幾個儲存格的背景顏色，則必須設定設定 <<td>td> 或或 <<th>th> 的的 bgcolorbgcolor 屬性。屬性。


2121

6.2.86.2.8 　　 <table> -<table> - 屬性屬性BordercolorBordercolorBordercolorlightBordercolorlightbordercolordarkbordercolordark

表格的框線顏色也可以設定，一共可以設定邊框表格的框線顏色也可以設定，一共可以設定邊框顏色、亮框線顏色、暗框線顏色等顏色、亮框線顏色、暗框線顏色等 33 種框線顏色。種框線顏色。一般最常使用的是邊框顏色設定一般最常使用的是邊框顏色設定 (bordercolor(bordercolor 屬屬性性 )) 。。屬性屬性 bordercolorbordercolor ：：設定表格框線顏色。設定表格框線顏色。屬性屬性 bordercolorlightbordercolorlight ：：設定表格亮框線顏色。設定表格亮框線顏色。屬性屬性 bordercolordarkbordercolordark ：：設定表格暗框線顏色。設定表格暗框線顏色。


2222

6.2.96.2.9 <<table> - backgroundtable> - background 屬性屬性和和 <<body>body> 標籤一樣，也可以透過標籤一樣，也可以透過 backgroundbackground 屬屬

性來設定表格的背景圖片。性來設定表格的背景圖片。


2323

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

6.36.3 　深入　深入 <<tr>(tr>( 列列 )) 的屬性的屬性

2424

6.3.16.3.1 <<tr> - bgcolortr> - bgcolor 屬性屬性和和 <<table>table> 標籤一樣，也可以在標籤一樣，也可以在 <<tr>tr> 標籤中設定標籤中設定

bgcolorbgcolor 屬性來改變表格中某一列的背景顏色，如屬性來改變表格中某一列的背景顏色，如果單列背景顏色與表格顏色衝突時，會以最靠近果單列背景顏色與表格顏色衝突時，會以最靠近資料的設定為準，也就是單列的背景顏色。資料的設定為準，也就是單列的背景顏色。


2525

6.3.26.3.2 <<tr> - aligntr> - align 屬性屬性 <<tr>tr> 標籤的標籤的 alignalign 屬性與屬性與 <<table>table> 標籤的標籤的 alignalign 屬屬

性所造成的效果不同，性所造成的效果不同， <<table>table> 的的 alignalign 屬性是用屬性是用來指定整個表格的位置來指定整個表格的位置 (( 非表格內的文字對齊方非表格內的文字對齊方式式 )) ，而，而 <<tr>tr> 標籤內的標籤內的 alignalign 屬性則是用來指定單屬性則是用來指定單一列各儲存格中文字的對齊方式。一列各儲存格中文字的對齊方式。屬性值：屬性值：

leftleft ：：文字靠左對齊。文字靠左對齊。 centercenter ：：文字置中對齊。文字置中對齊。 rightright ：：文字靠右對齊。文字靠右對齊。


2626

<<tr>tr> 的的 valignvalign 屬性則可以用來設定該列各儲存格屬性則可以用來設定該列各儲存格的文字垂直對齊方式。的文字垂直對齊方式。屬性值：屬性值：

toptop ：：文字向上對齊。文字向上對齊。 middlemiddle 或或 centercenter ：：文字置中對齊。文字置中對齊。 (( 預設值預設值 )) bottombottom ：：文字向下對齊。文字向下對齊。


6.3.36.3.3 <<tr> - valigntr> - valign 屬性屬性

2727

6.46.4 　深入　深入 <<th>th> 、、 <td><td> 的屬性的屬性除了以表格或列為單位之外，也可以將許多屬性除了以表格或列為單位之外，也可以將許多屬性

直接指定在儲存格的標籤直接指定在儲存格的標籤 <<th>th> 或或 <<td>td> 之中，如之中，如此一來，就可以只針對某一個儲存格設定相關的此一來，就可以只針對某一個儲存格設定相關的屬性。屬性。


2828

6.4.16.4.1 <<th>th> 、、 <td> - width<td> - width 屬性屬性透過透過 widthwidth 屬性可以直接指定儲存格的寬度，指屬性可以直接指定儲存格的寬度，指

定方式可以分為絕對表示與相對表示等兩種，分定方式可以分為絕對表示與相對表示等兩種，分別敘述如下：別敘述如下：絕對表示：直接指定儲存格寬度的像素數目絕對表示：直接指定儲存格寬度的像素數目 (pixels)(pixels) 。。相對表示：指定儲存格與表格寬度的百分比，因此，相對表示：指定儲存格與表格寬度的百分比，因此，

如果要以相對表示法來設定儲存格寬度的話，則同一如果要以相對表示法來設定儲存格寬度的話，則同一列儲存格的寬度總和必須為列儲存格的寬度總和必須為 100%100% 。。



2929

透過透過 heightheight 屬性可以直接指定儲存格的高度，指定方屬性可以直接指定儲存格的高度，指定方式也是可以分為絕對表示與相對表示等兩種，分別敘式也是可以分為絕對表示與相對表示等兩種，分別敘述如下：述如下：絕對表示：直接指定儲存格高度的像素數目絕對表示：直接指定儲存格高度的像素數目 (pixels)(pixels) 。。相對表示：指定儲存格與表格高度的百分比，同一行儲存格相對表示：指定儲存格與表格高度的百分比，同一行儲存格

的高度總和必須為的高度總和必須為 100%100% 。。



6.4.26.4.2 <<th>th> 、、 <td> - height<td> - height 屬屬性性

3030

單獨透過單獨透過 <<th>th> 或或 <<td>td> 的的 alignalign 屬性可以設定每個屬性可以設定每個儲存格文字的水平對齊方式。儲存格文字的水平對齊方式。屬性值：屬性值：

leftleft ：：文字靠左對齊。文字靠左對齊。 (<td>(<td> 預設值預設值 )) centercenter ：：文字置中對齊。文字置中對齊。 (<th>(<th> 預設值預設值 )) rightright ：：文字靠右對齊。文字靠右對齊。

範例：範例：內容內容執行結果執行結果

6.4.36.4.3 <<th>th> 、、 <td> - align<td> - align 屬性屬性

3131

單獨透過單獨透過 <<th>th> 或或 <<td>td> 的的 valignvalign 屬性可以設定每屬性可以設定每個儲存格文字的垂直對齊方式。個儲存格文字的垂直對齊方式。屬性值：屬性值：

toptop ：：文字向上對齊。文字向上對齊。 middlemiddle 或或 centercenter ：：文字置中對齊。文字置中對齊。 (( 預設值預設值 )) bottombottom ：：文字向下對齊。文字向下對齊。


6.4.46.4.4 <<th>th> 、、 <td> - valign<td> - valign 屬屬性性

3232

6.4.56.4.5 <<th>th> 、、 <td> - bgcolor<td> - bgcolor 屬性屬性 <<th>th> 、、 <td><td> 標籤也和標籤也和 <<tr>tr> 與與 <<table>table> 標籤一樣，標籤一樣，

可以在可以在 <<th>th> 或或 <<td>td> 標籤中設定標籤中設定 bgcolorbgcolor 屬性來屬性來改變單一儲存格的背景顏色。改變單一儲存格的背景顏色。


3333

6.4.66.4.6 　　 <<th>th> 、、 <td> - background<td> - background屬性屬性

和和 <<table>table> 標籤一樣，也可以在標籤一樣，也可以在 <<th>th> 或或 <<td>td> 標標籤中設定籤中設定 backgroundbackground 屬性來改變單一儲存格的屬性來改變單一儲存格的背景圖片。背景圖片。


3434

6.4.76.4.7 <<th>th> 、、 <td> - colspan<td> - colspan 屬性屬性如果有的時候想要的表格並非標準格式，例如有如果有的時候想要的表格並非標準格式，例如有

時候會需要合併某時候會需要合併某 22 個儲存格，此時，就必須藉個儲存格，此時，就必須藉助儲存格的助儲存格的 colspancolspan 與與 rowspanrowspan 兩個屬性來完成兩個屬性來完成儲存格的合併。儲存格的合併。

從字面上來看從字面上來看 colspancolspan 屬性，所代表的是『行的屬性，所代表的是『行的擴展』，而一個表格是由上向下、由左向右的順擴展』，而一個表格是由上向下、由左向右的順序來繪製，因此，一個直行應該是向右擴展，所序來繪製，因此，一個直行應該是向右擴展，所以也可以把以也可以把 colspancolspan 屬性看做是向右合併儲存格。屬性看做是向右合併儲存格。


3535

6.4.86.4.8 <<th>th> 、、 <td> - rowspan<td> - rowspan 屬性屬性除了向右合併儲存格之外，也可以透過除了向右合併儲存格之外，也可以透過 rowspanrowspan

屬性向下合併儲存格。屬性向下合併儲存格。


3636

向右及向下合併儲存格的整合。向右及向下合併儲存格的整合。


6.4.96.4.9 <<th>th> 、、 <td> - <td> - 屬性的整合應用屬性的整合應用ColspanColspanrowspanrowspan

3737

6.56.5 　　 <caption><caption> 標籤標籤為了表格的標題，為了表格的標題， HTMLHTML 特別設計了特別設計了 <<caption>caption>

標籤，標籤， <<caption>caption> 表格標題標籤必須和表格標題標籤必須和 <<table>table>表格標籤一起合用，當然也可以不使用表格標籤一起合用，當然也可以不使用 <<caption>caption>而另外想辦法在適當位置加入標題文字。而另外想辦法在適當位置加入標題文字。

由於由於 <<caption>caption> 標籤必須放在標籤必須放在 <<table>table> 標籤之內，標籤之內，而顯示時卻在表格之外，因此當表格位置常移動而顯示時卻在表格之外，因此當表格位置常移動時，是非常好用的方法。另外，使用時，是非常好用的方法。另外，使用 <<caption>caption>標籤還可以設定標題與表格的相對位置。標籤還可以設定標題與表格的相對位置。


3838

透過透過 alignalign 屬性，可以設定標題相對於表格的水平屬性，可以設定標題相對於表格的水平對齊方式為靠左、置中或靠右對齊。對齊方式為靠左、置中或靠右對齊。屬性值：屬性值：

leftleft ：：標題靠表格左邊界對齊。標題靠表格左邊界對齊。 centercenter ：：標題靠表格中央對齊。標題靠表格中央對齊。 (( 預設值預設值 )) rightright ：：標題靠表格右邊界對齊。標題靠表格右邊界對齊。


6.5.16.5.1 <<caption> - aligncaption> - align 屬性屬性

3939

除了可以設定標題的水平對齊方式之外，還可以除了可以設定標題的水平對齊方式之外，還可以透過透過 valignvalign 屬性設定標題要放在表格的上方或下屬性設定標題要放在表格的上方或下方。方。屬性值：屬性值：

toptop ：：標題置於表格上方。標題置於表格上方。 (( 預設值預設值 )) bottombottom ：：標題置於表格下方。標題置於表格下方。


6.5.26.5.2 　　 <<caption> - valigncaption> - valign 屬性屬性

4040

6.66.6 　表格的整合應用　表格的整合應用已經介紹完畢所有與表格有關的已經介紹完畢所有與表格有關的 HTMLHTML 標籤及屬標籤及屬

性。現在可以透過這些標籤及屬性完成更多種表性。現在可以透過這些標籤及屬性完成更多種表格的應用。格的應用。

在本節中，介紹幾種比較常見的表格進階應用範在本節中，介紹幾種比較常見的表格進階應用範例，包含有『巢狀式表格』、『用表格來對齊資例，包含有『巢狀式表格』、『用表格來對齊資料』、『表格的描述』等等。料』、『表格的描述』等等。

4141

6.6.16.6.1 巢狀表格巢狀表格巢狀表格指的是『一個表格中又有其他的表格』，巢狀表格指的是『一個表格中又有其他的表格』，

這是因為儲存格是一個基本單位，在儲存格中除這是因為儲存格是一個基本單位，在儲存格中除了可以放入文字之外，也可以放入圖片或另一個了可以放入文字之外，也可以放入圖片或另一個表格。表格。

當在儲存格中插入表格時，就形成了巢狀表格。當在儲存格中插入表格時，就形成了巢狀表格。


4242

6.6.26.6.2 對齊資料對齊資料最常見的表格應用就是使用表格來對齊資料，尤最常見的表格應用就是使用表格來對齊資料，尤

其是當資料呈現多層次的排列時，還可以用合併其是當資料呈現多層次的排列時，還可以用合併儲存格方式或者利用巢狀表格來對齊資料。儲存格方式或者利用巢狀表格來對齊資料。



4343

6.6.36.6.3 表格描述表格描述有時候會在表格旁邊加一些說明文字，可是常會有時候會在表格旁邊加一些說明文字，可是常會發現表格以外的文字不是出現在表格的上方就是發現表格以外的文字不是出現在表格的上方就是下方，而無法出現在表格的左邊或右邊，解決這下方，而無法出現在表格的左邊或右邊，解決這樣的問題兩個方法如下：樣的問題兩個方法如下： (1)(1) 用用 <<table>table> 的的 alignalign 屬性，將表格設定為浮動表格。屬性，將表格設定為浮動表格。

(( 範例範例 6-326-32)) (2)(2) 使用巢狀表格，將真的要出現的表格放在一個表格使用巢狀表格，將真的要出現的表格放在一個表格

(( 邊框為邊框為 00)) 的某一個儲存格中，其餘的儲存格就可以存的某一個儲存格中，其餘的儲存格就可以存放用來描述表格的文字了。放用來描述表格的文字了。 (( 範例範例 6-336-33))



4444

6.76.7 　網頁　網頁 DIYDIY

請翻閱至請翻閱至 18.618.6 節，在節，在 18.618.6 節中，將表格加入節中，將表格加入DIYDIY 網頁中，並且利用表可來排列整齊的資料。網頁中，並且利用表可來排列整齊的資料。

4545

本章習題本章習題

Documents

專業 HTML 網頁設計