1、本章內容本章內容6.1 6.1 表格概述表格概述6.2 6.2 表格的標題與表頭表格的標題與表頭6.3 6.3 表格的行與單元格表格的行與單元格6.4 6.4 頁面實例頁面實例利用表格進行排版利用表格進行排版6.1 表格概述表格概述6.1.1 6.1.1 表格語法表格語法6.1.2 6.1.2 表格屬性表格屬性6.1.3 6.1.3 表格結構表格結構6.1.4 6.1.4 表格嵌套表格嵌套表格作用表格作用表格是用于排列內容的表格是用于排列內容的最佳方式之一最佳方式之一，之前絕大多數的，之前絕大多數的HTML頁面都頁面都是使用表格進行排版的。是使用表格進行排版的。HTML表格是表格是由行和列構成

2、的柵格由行和列構成的柵格。這些行和列構成一個個單元，在。這些行和列構成一個個單元，在其中可以放置文本或圖形。其中可以放置文本或圖形。表格有兩個作用：第一，可以用可讀的格式顯示復雜的數控，傳統上，表格有兩個作用：第一，可以用可讀的格式顯示復雜的數控，傳統上，表格化的信息比段落描述更有效；第二，可以用表格把復雜設計元素表格化的信息比段落描述更有效；第二，可以用表格把復雜設計元素放進放進Web頁面中。頁面中。表格標簽表格標簽標簽標簽描述描述表格標簽表格標簽行標簽行標簽單元格標簽單元格標簽6.1.1 表格語法表格語法 定義表格定義表格定義行定義行定義單元格定義單元格定義表頭定義表頭練習練習：設計設計2

3、 2行行4 4列的表格（列的表格（基本表格基本表格.html.html）語法解釋語法解釋表格標簽表格標簽：標簽用于標識一個表格組件。標簽用于標識一個表格組件。一個表格組件，是由數個橫行一個表格組件，是由數個橫行、單元格、單元格所組成。所組成。表格行標簽表格行標簽：標簽用于定義表格的一行。在一組標簽用于定義表格的一行。在一組標簽內可建立一行表格，也可以包含數組由標簽內可建立一行表格，也可以包含數組由標簽所定義的單元格。標簽所定義的單元格。單元格標簽單元格標簽：標簽用于定義表格的單元格，一組標簽用于定義表格的單元格，一組標簽將建立一個單元格。標簽將建立一個單元格。使用使用標簽時，必須將其放在標簽時

4、，必須將其放在標標簽內簽內。表頭單元格表頭單元格標簽標簽 ，定義表格內的表頭單元格。，定義表格內的表頭單元格。 th 元素內元素內部的文本通常會呈現為居中的粗體文本，而部的文本通常會呈現為居中的粗體文本，而 td 元素內的文本通常是左元素內的文本通常是左對齊的普通文本。對齊的普通文本。6.1.2 表格屬性表格屬性 一旦建立表格，就可以加入各種格式選項來改變其總體外觀。通常一旦建立表格，就可以加入各種格式選項來改變其總體外觀。通常來說，可以對表格加入以下一些選項。來說，可以對表格加入以下一些選項。加入邊框。加入邊框。加入背景顏色和圖形加入背景顏色和圖形調整單元格間隔和填充的程度。調整單元格間隔和

5、填充的程度。調整單元格對齊方式。調整單元格對齊方式。調整單元格尺寸。調整單元格尺寸。指定表格對齊方式。指定表格對齊方式。屬性屬性描述描述width寬度寬度height高度高度bgcolor背景顏色背景顏色background背景圖片背景圖片cellspacing單元格間距單元格間距cellpadding單元格邊距單元格邊距align排列方式排列方式frame邊框樣式邊框樣式rules內部邊框樣式內部邊框樣式border邊框粗細邊框粗細bordercolor邊框顏色（邊框顏色（IE）bordercolorlight亮邊框顏色（亮邊框顏色（IE）bordercolordark暗邊框顏色（暗邊框顏色

6、（IE）、邊框、邊框基本語法：基本語法：語法解釋：邊框是表格項目周圍的直線，用于分開行、列和單元格。語法解釋：邊框是表格項目周圍的直線，用于分開行、列和單元格。缺省情況下，大部分瀏覽器顯示無邊框表格，但有邊框的表格更可讀缺省情況下，大部分瀏覽器顯示無邊框表格，但有邊框的表格更可讀也更美觀。通過也更美觀。通過border屬性可以屬性可以定義邊框線的寬度定義邊框線的寬度，單位為像素。，單位為像素。2、邊框顏色、邊框顏色基本語法：基本語法：語法解釋：語法解釋：為表格設定不同的邊框顏色為表格設定不同的邊框顏色。定義顏色的時候，可以使用。定義顏色的時候，可以使用英文顏色名稱或十六進制顏色值。英文顏色名稱

7、或十六進制顏色值。3、亮邊框顏色、亮邊框顏色基本語法：基本語法：語法解釋：在語法解釋：在表格中表格中可以單獨定義可以單獨定義左上邊框左上邊框的顏色，這兩個位置的邊的顏色，這兩個位置的邊框色稱之為亮邊框顏色。定義顏色的時候，可以使用英文顏色名稱或框色稱之為亮邊框顏色。定義顏色的時候，可以使用英文顏色名稱或十六進制顏色值表現。十六進制顏色值表現。4、暗邊框顏色、暗邊框顏色基本語法：基本語法：語法解釋：在表格中也可以定義單元格中語法解釋：在表格中也可以定義單元格中右下邊框右下邊框的顏色，這兩個位的顏色，這兩個位置的邊框色稱之為暗邊框顏色。定義顏色的時候，可以使用英文顏色置的邊框色稱之為暗邊框顏色。定

8、義顏色的時候，可以使用英文顏色名稱或十六進制顏色值。名稱或十六進制顏色值。5、寬度和高度、寬度和高度基本語法：基本語法：語法解釋：通過語法解釋：通過width屬性定義表格的寬度屬性定義表格的寬度，height屬性定義表格的高屬性定義表格的高度度，單位為像素或百分比單位為像素或百分比。如果是百分比，則可分為兩種情況：如果。如果是百分比，則可分為兩種情況：如果不是嵌套表格，那么百分比是相對于瀏覽器窗口而言；如果是嵌套表不是嵌套表格，那么百分比是相對于瀏覽器窗口而言；如果是嵌套表格，則百分比是相對于嵌套表格所在的單元格寬度。格，則百分比是相對于嵌套表格所在的單元格寬度。6、背景顏色、背景顏色基本語法

9、：基本語法： 語法解釋：除了指定邊框顏色外，還可以指定表格背景顯示特定的顏語法解釋：除了指定邊框顏色外，還可以指定表格背景顯示特定的顏色或圖形。利用背景顏色和圖形能改進表格外觀，使表格顯得更美觀，色或圖形。利用背景顏色和圖形能改進表格外觀，使表格顯得更美觀，如放置公司徽標和增加文本與圖形顏色的對比度。通過如放置公司徽標和增加文本與圖形顏色的對比度。通過bgcolor屬性，屬性，可以設定表格的背景顏色可以設定表格的背景顏色。定義顏色的時候，可以使用英文顏色名稱。定義顏色的時候，可以使用英文顏色名稱或十六進制顏色值表現。或十六進制顏色值表現。7、背景圖片、背景圖片基本語法：基本語法：語法解釋：為表

10、格設置背景圖像，可以使用任何的語法解釋：為表格設置背景圖像，可以使用任何的GIF或者或者JPEG格式格式圖片文件。定義背景圖像時，需要輸入圖片文件的完整路徑或者相對圖片文件。定義背景圖像時，需要輸入圖片文件的完整路徑或者相對路徑。路徑。表格背景圖形是平鋪的，即在屏幕上不斷重復，直到填滿整個表格背景圖形是平鋪的，即在屏幕上不斷重復，直到填滿整個表格表格。8、單元格間距、單元格間距基本語法：基本語法： 語法解釋：表格的單元格之間，可以設定一定的間距，這樣會語法解釋：表格的單元格之間，可以設定一定的間距，這樣會使表格使表格顯得不過于緊湊顯得不過于緊湊。單元格的間距以像素為單位。單元格的間距以像素為單

11、位。9、單元格邊距、單元格邊距基本語法：基本語法： 語法解釋：設置單元格邊距，指的是語法解釋：設置單元格邊距，指的是單元格內容和邊框之間的距離單元格內容和邊框之間的距離。單元格的邊距以像素為單位。單元格的邊距以像素為單位。10、表格排列、表格排列基本語法：基本語法： 語法解釋：在水平方向上，可以設定表格的排列對齊方式，分別有居語法解釋：在水平方向上，可以設定表格的排列對齊方式，分別有居左、居中和居右左、居中和居右3種。種。left為居左，為居左，center為居中，為居中，right為居右為居右。11、表格外邊框的顯示狀態、表格外邊框的顯示狀態基本語法：基本語法： 語法解釋：使用語法解釋：使用

12、frame屬性可以控制表格屬性可以控制表格外邊框外邊框的樣式類型，取值表如下：的樣式類型，取值表如下：值值描述描述值值描述描述box顯示邊框顯示邊框lhs顯示左邊框顯示左邊框void不顯示邊框不顯示邊框rhs顯示右邊框顯示右邊框above顯示上邊框顯示上邊框hsides顯示上下邊框顯示上下邊框below顯示下邊框顯示下邊框vsides顯示左右邊框顯示左右邊框12、表格內邊框樣式、表格內邊框樣式基本語法：基本語法：語法解釋：通過語法解釋：通過rules屬性可以控制表格內部邊框的樣式。屬性可以控制表格內部邊框的樣式。值值描述描述all顯示所有的內部邊框顯示所有的內部邊框cols僅顯示列邊框僅顯示列

13、邊框groups顯示介于行列間的邊框顯示介于行列間的邊框none不顯示內部邊框不顯示內部邊框rows僅顯示行邊框僅顯示行邊框表格屬性表格屬性.htm6.1.3表格結構表格結構為了在源代碼中清楚地為了在源代碼中清楚地區分表格結構區分表格結構，HTML語言中規定了語言中規定了，三個標簽，分別對應于表格的三個標簽，分別對應于表格的表首表首、表主體表主體和和表尾表尾。這種劃分方式稱為：這種劃分方式稱為：行分組行分組1、表格表首、表格表首基本語法：基本語法： 語法解釋：語法解釋：align代表水平對齊，其中代表水平對齊，其中left為居左，為居左，center為居中，為居中，right為為居右。居右。v

14、align代表垂直對齊代表垂直對齊，其中，其中top為居上，為居上，middle為居中，為居中，bottom為為居下。居下。2、表格表主體、表格表主體基本語法：基本語法： 語法解釋：語法解釋：align代表水平對齊，其中代表水平對齊，其中left為居左，為居左，center為居中，為居中，right為居右。為居右。valign代表垂直對齊，其中代表垂直對齊，其中top為居上，為居上，middle為居中，為居中，bottom為居下。為居下。3、表格表尾、表格表尾基本語法：基本語法： 語法解釋：語法解釋：align代表水平對齊，其中代表水平對齊，其中left為居左，為居左，center為居中，為居

15、中，right為居右。為居右。Valign代表垂直對齊，其中代表垂直對齊，其中top為居上，為居上，middle為居中，為居中，bottom為居下。為居下。4 、表格、表格列分組列分組標簽標簽實現表格實現表格列分組列分組，為單標簽。，為單標簽。語法格式：語法格式： 語法解釋：語法解釋： span定義該組控制的列數，默認值為定義該組控制的列數，默認值為1； align定義改組定義改組文字的對齊方式。文字的對齊方式。6.1.4表格嵌套表格嵌套表格嵌套表格嵌套.html6.2 表格的標題與表頭表格的標題與表頭6.2.1 6.2.1 表格標題表格標題6.2.2 6.2.2 表格表頭表格表頭6.2.1

16、表格標題表格標題標題是表格的說明性文字，標題是表格的說明性文字，通常出現在表格上方通常出現在表格上方，其用途有，其用途有:（1）總結表格內容。）總結表格內容。（2）提供表格內容的簡明信息。）提供表格內容的簡明信息。通過通過標簽可以直接添加表格的標題，而且還可以控制標題文字的排標簽可以直接添加表格的標題，而且還可以控制標題文字的排列屬性。列屬性。基本語法：基本語法：語法解釋：語法解釋：align屬性設定標題文字的水平對齊方式，其中屬性設定標題文字的水平對齊方式，其中left為居左，為居左，center為居中，為居中，right為居右。表格的標題可以為居右。表格的標題可以放在表格的上方或者下放在表

17、格的上方或者下方方，這可以通過，這可以通過valign屬性進行調整。默認的表格標題放在表格上方。屬性進行調整。默認的表格標題放在表格上方。Top為居上，為居上，bottom為居底。為居底。6.2.2 表格表頭表格表頭表格表頭是通常指表格的第一行，其中的文字可以實現居中并且加粗表格表頭是通常指表格的第一行，其中的文字可以實現居中并且加粗顯示，標簽為：顯示，標簽為：。基本語法：基本語法： 語法解釋：使用語法解釋：使用標簽替代標簽替代標簽，唯一不同就是標簽中的標簽，唯一不同就是標簽中的內容內容居中加粗顯示居中加粗顯示。6.3 表格的行與單元格表格的行與單元格6.3.1 6.3.1 表格的行表格的行6

18、.3.2 6.3.2 表格的單元格表格的單元格6.3.1 表格的行表格的行表格的行標簽為表格的行標簽為，標簽的屬性和標簽的屬性和標簽的屬性非常相似，標簽的屬性非常相似，主要用于設定表格中某一行的屬性，如下表所示：主要用于設定表格中某一行的屬性，如下表所示：屬性屬性描述描述align整整行內容的水平對齊，行內容的水平對齊， left/center/rightvalign整行內容的垂直對齊，整行內容的垂直對齊， top/middle/bottombgcolor整整行的背景顏色行的背景顏色bordercolor整整行的邊框顏色行的邊框顏色bordercolorlight行的亮邊框顏色行的亮邊框顏色（右、下）（右、下）bordercolordark行的暗邊框顏色行的暗邊框顏色（左、上）（左、上）6.3.2 表格的單元格表格的單元格標簽的屬性和標簽的屬性和標簽的屬性也非常相似，主要用于設定表格中某一標簽的屬性也非常相似，主要用于設定表格中某一單元格的屬性單元格的屬性,如下表所示：如下表所示：屬性屬性描述描述align單元格內容的水平對齊單元格內容的水平對齊valign單元格內容的垂直對齊單元格內容的垂直對齊bgcolor單元格的背景顏色單元格的背景顏色background單元格的背景圖像單元格的背景圖像屬性屬性描述描述bordercolor單元格的