專業 HTML 網頁設計

P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

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

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

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

6.1　表格宣告 • 示意圖：

6.1.1 基本表格的製作 • 在表格中列與儲存格之間的關係以及<th>(標題儲存格)與<td>(一般儲存格)的差別。 • 範例6-1： • 內容執行結果

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

6.1.2　表格的屬性列表 <table>屬性列表

6.1.2　表格的屬性列表 <tr>屬性列表

6.1.2　表格的屬性列表 <td>、<th>屬性列表

6.1.2　表格的屬性列表 <caption>屬性列表

6.2　深入<table>表格屬性 • <table>是表格的宣告，所有在<table>中所宣告的屬性，其作用範圍是整個表格。 • 屬性包含有border、bgcolor、width、align、cellspacing、cellpadding等等。

6.2.1　<table> - border屬性 • 如果要有一個表格出現在網頁之中，就必須設定border屬性來指定表格邊框的寬度。 • 格式： <table border="N">………………</table>

6.2.2　<table> - cellspacing屬性 • 儲存格間的距離也可以看做是表格內框線寬度，表格中所有儲存格的距離預設值為1，事實上儲存格的距離是可以藉由cellspacing屬性來加以設定的，單位同樣是像素(pixel)。 • 若未設定cellspacing屬性，且預設值1不起作用，這是因為表格外框線的寬度為0的緣故。所以，設定cellspacing屬性只有在border屬性不為0時才會起作用。 • 範例6-3： • 內容執行結果

6.2.3　<table> - cellpadding屬性 • cellpadding屬性則是允許設定表格中『每一個儲存格內容與儲存格邊界的距離』。 • 因為表格預設cellpadding為0的關係，每一個儲存格內的文字與儲存格邊界沒有空隙。 • 範例6-4： • 內容執行結果

6.2.4　<table> - width屬性 • 表格的寬度是可以容納所有資料的最小寬度，且會隨著瀏覽器視窗的寬度而改變表格寬度。 • 可以透過width屬性直接指定表格的寬度，指定方式有絕對表示與相對表示兩種方式。 • 絕對表示代表的是將表格總寬度以像素表示，不隨瀏覽器寬度而變化，因此當指定寬度大於瀏覽器寬度時，將會出現橫向捲軸。 • 相對表示則是指定表格寬度佔瀏覽器寬度的百分比，因此，會隨著瀏覽器寬度自動計算表格寬度。 • 範例6-5： • 內容執行結果

6.2.5　<table> - hieght屬性 • 除了可以設定表格寬度之外，也可以設定表格的高度，指定表格高度是透過height屬性，且同樣也是分為絕對表示與相對表示兩種指定方式。 • 當使用絕對表示指定的表格高度比瀏覽器高度還大時，就會出現縱向捲軸。 • 範例6-6： • 內容執行結果 • 範例6-7： • 內容執行結果

6.2.6　<table> - align屬性 • 當表格寬度小於瀏覽器寬度時，預設表格都是靠左對齊，不過也可以透過align屬性，將表格指定為靠左、置中或靠右對齊。 • 表格預設的靠左對齊與透過屬性指定靠左對齊，對於表格之外的內容(表格之後的內容)會產生位置不同的現象。

6.2.6　<table> - align屬性 • 屬性值： • left：表格靠左對齊。(與預設值類似) • center：表格置中對齊。 • right：表格靠右對齊。 • 範例6-8： • 內容執行結果

6.2.7 <table> - bgcolor屬性 • 和<body>標籤一樣，也可以設定bgcolor屬性來改變表格的背景顏色，背景顏色一經設定後，表格內的所有儲存格的背景顏色都會跟著改變，如果還想要指定某幾個儲存格的背景顏色，則必須設定<td>或<th>的bgcolor屬性。 • 範例6-9： • 內容執行結果

Bordercolor Bordercolorlight bordercolordark 6.2.8<table> - 屬性 • 表格的框線顏色也可以設定，一共可以設定邊框顏色、亮框線顏色、暗框線顏色等3種框線顏色。一般最常使用的是邊框顏色設定(bordercolor屬性)。 • 屬性bordercolor：設定表格框線顏色。 • 屬性bordercolorlight：設定表格亮框線顏色。 • 屬性bordercolordark：設定表格暗框線顏色。 • 範例6-10： • 內容執行結果

6.2.9 <table> - background屬性 • 和<body>標籤一樣，也可以透過background屬性來設定表格的背景圖片。 • 範例6-11： • 內容執行結果

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

6.3.1 <tr> - bgcolor屬性 • 和<table>標籤一樣，也可以在<tr>標籤中設定bgcolor屬性來改變表格中某一列的背景顏色，如果單列背景顏色與表格顏色衝突時，會以最靠近資料的設定為準，也就是單列的背景顏色。 • 範例6-12： • 內容執行結果

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

6.3.3 <tr> - valign屬性 • <tr>的valign屬性則可以用來設定該列各儲存格的文字垂直對齊方式。 • 屬性值： • top：文字向上對齊。 • middle或center：文字置中對齊。(預設值) • bottom：文字向下對齊。 • 範例6-14： • 內容執行結果

6.4　深入<th>、<td>的屬性 • 除了以表格或列為單位之外，也可以將許多屬性直接指定在儲存格的標籤<th>或<td>之中，如此一來，就可以只針對某一個儲存格設定相關的屬性。 • 範例6-15： • 內容執行結果

6.4.1 <th>、<td> - width屬性 • 透過width屬性可以直接指定儲存格的寬度，指定方式可以分為絕對表示與相對表示等兩種，分別敘述如下： • 絕對表示：直接指定儲存格寬度的像素數目(pixels)。 • 相對表示：指定儲存格與表格寬度的百分比，因此，如果要以相對表示法來設定儲存格寬度的話，則同一列儲存格的寬度總和必須為100%。 • 範例6-16： • 內容執行結果 • 範例6-17： • 內容執行結果

6.4.2 <th>、<td> - height屬性 • 透過height屬性可以直接指定儲存格的高度，指定方式也是可以分為絕對表示與相對表示等兩種，分別敘述如下： • 絕對表示：直接指定儲存格高度的像素數目(pixels)。 • 相對表示：指定儲存格與表格高度的百分比，同一行儲存格的高度總和必須為100%。 • 範例6-18： • 內容執行結果 • 範例6-19： • 內容執行結果

6.4.3 <th>、<td> - align屬性 • 單獨透過<th>或<td>的align屬性可以設定每個儲存格文字的水平對齊方式。 • 屬性值： • left：文字靠左對齊。(<td>預設值) • center：文字置中對齊。(<th>預設值) • right：文字靠右對齊。 • 範例： • 內容執行結果

6.4.4 <th>、<td> - valign屬性 • 單獨透過<th>或<td>的valign屬性可以設定每個儲存格文字的垂直對齊方式。 • 屬性值： • top：文字向上對齊。 • middle或center：文字置中對齊。(預設值) • bottom：文字向下對齊。 • 範例6-20： • 內容執行結果

6.4.5 <th>、<td> - bgcolor屬性 • <th>、<td>標籤也和<tr>與<table>標籤一樣，可以在<th>或<td>標籤中設定bgcolor屬性來改變單一儲存格的背景顏色。 • 範例6-21： • 內容執行結果

6.4.6　<th>、<td> - background屬性 • 和<table>標籤一樣，也可以在<th>或<td>標籤中設定background屬性來改變單一儲存格的背景圖片。 • 範例6-22： • 內容執行結果

6.4.7 <th>、<td> - colspan屬性 • 如果有的時候想要的表格並非標準格式，例如有時候會需要合併某2個儲存格，此時，就必須藉助儲存格的colspan與rowspan兩個屬性來完成儲存格的合併。 • 從字面上來看colspan屬性，所代表的是『行的擴展』，而一個表格是由上向下、由左向右的順序來繪製，因此，一個直行應該是向右擴展，所以也可以把colspan屬性看做是向右合併儲存格。 • 範例6-23： • 內容執行結果

6.4.8 <th>、<td> - rowspan屬性 • 除了向右合併儲存格之外，也可以透過rowspan屬性向下合併儲存格。 • 範例6-24： • 內容執行結果

6.4.9 <th>、<td> - 屬性的整合應用 Colspan rowspan • 向右及向下合併儲存格的整合。 • 範例6-25： • 內容執行結果

6.5　<caption>標籤 • 為了表格的標題，HTML特別設計了<caption>標籤，<caption>表格標題標籤必須和<table>表格標籤一起合用，當然也可以不使用<caption>而另外想辦法在適當位置加入標題文字。 • 由於<caption>標籤必須放在<table>標籤之內，而顯示時卻在表格之外，因此當表格位置常移動時，是非常好用的方法。另外，使用<caption>標籤還可以設定標題與表格的相對位置。 • 範例6-26： • 內容執行結果

6.5.1 <caption> - align屬性 • 透過align屬性，可以設定標題相對於表格的水平對齊方式為靠左、置中或靠右對齊。 • 屬性值： • left：標題靠表格左邊界對齊。 • center：標題靠表格中央對齊。(預設值) • right：標題靠表格右邊界對齊。 • 範例6-27： • 內容執行結果

6.5.2　<caption> - valign屬性 • 除了可以設定標題的水平對齊方式之外，還可以透過valign屬性設定標題要放在表格的上方或下方。 • 屬性值： • top：標題置於表格上方。(預設值) • bottom：標題置於表格下方。 • 範例6-28： • 內容執行結果

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

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

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

6.6.3 表格描述 • 有時候會在表格旁邊加一些說明文字，可是常會發現表格以外的文字不是出現在表格的上方就是下方，而無法出現在表格的左邊或右邊，解決這樣的問題兩個方法如下： • (1)用<table>的align屬性，將表格設定為浮動表格。(範例6-32) • (2)使用巢狀表格，將真的要出現的表格放在一個表格(邊框為0)的某一個儲存格中，其餘的儲存格就可以存放用來描述表格的文字了。(範例6-33) • 範例6-32： • 內容執行結果 • 範例6-33： • 內容執行結果

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

本章習題

專業 HTML 網頁設計