1、靜態網站設計網絡技術系：李毓麗.運用表格制造表格添加或刪除行和列格式化表格為表格添加題注嵌套表格. 表格在網頁中除了作為一個顯示對象以外，還有一個重要的作用就是用于排版頁面內容制造表格.表格標志標 記 描 述在HTML文檔中創始一個表格在表格中創建一行在一行中創建一個單元格在一行中創建一個標題單元格為表格創建題注.根本語法 與標志不同的地方是之間的內容會加粗且默許居中顯示，而之間的內容那么不加粗且默許居左顯示.表格例如 示例代碼.表格中每一行運用一個表示；行中的每一列運用一個或表示添加或刪除行和列可以分別經過添加或刪除行和列標志來實現添加或刪除行和列.添加或刪除行和列實現方法添加新行 可以經過

2、插入額外的 和 標志來添加新的一行在表內創建新列 可以經過對每一行添加 或 標志在表格中創建新的列刪除表中的行和列 可以經過刪除包圍指定行和列的 標志和 標志來刪除表格中的列和行.表格的格式化包括以下一些內容：為表格添加邊框及設置邊框粗細及邊框顏色為表格添加背景圖像或背景顏色指定表格的對齊方式設置表格的寬度、高度設置表格單元格內容與邊框的間距及單元格之間的間距指定行、列的背景圖像或背景顏色指定行、列內容的對齊方式設置行、列的邊框顏色設置行、列的寬度和高度單元格的跨行和跨列設置格式化表格.表格屬性屬 性 描 述border設置表格邊框寬度，單位為像素（默認不顯示邊框），設置border=0將取消

3、邊框width設置表格寬度，單位為像素或瀏覽器窗口的百分比height設置表格高度，單位為像素或瀏覽器窗口的百分比Bordercolor、bordercolordark、bordercolorlight設置表格邊框顏色/亮邊框顏色（左上邊框顏色）/暗邊框顏色（右下邊框顏色）bgcolor設置表格的背景顏色background設置表格的背景圖像cellspacing設置相鄰單元格之間的間距cellpadding設置單元格邊框與內容的間距align設置表格的水平對齊（默認左對齊）.表格標志屬性設置語法 .表格標志屬性例如 例如代碼.行標志屬性屬 性 描 述align設置行中各單元格內容的水平對齊方

4、式（默認左對齊）valign行中各單元格內容內容的垂直對齊方式（默認居中對齊bgcolor設置行的背景顏色background設置行的背景圖像bordercolor設置行的邊框顏色bordercolorlight設置行的亮邊框顏色（右下邊框顏色）bordercolordark設置行的暗邊框顏色（左下邊框顏色）.行標志屬性設置語法.行標志屬性例如 示例代碼.、標志屬性屬 性 描 述align設置單元格內容的水平對齊方式（td的默認左對齊，th的默認居中對齊）valign設置單元格內容的垂直對齊（默認居中對齊）bgcolor設置單元格的背景顏色background設置單元格的背景圖像borderc

5、olor設置單元格的邊框顏色bordercolorlight設置單元格的亮邊框顏色（右下邊框顏色）bordercolordark設置單元格的暗邊框顏色（左上邊框顏色）width 設置單元格的寬度，單位為像素或表格寬度的百分比height 設置單元格的高度rowspan設置單元格的跨行操作colspan設置單元格的跨列操作nowrap當文本的寬度超過單元格寬度時，不允許文本在單元格內換行。所有文本在一行內顯示.單元格寬度屬性解釋假設沒有設置單元格寬度，那么閱讀器將會根據單元格中的內容來自動調整單元格的寬度假設設置了單元格寬度，但沒有設置nowarp屬性，那么單元格中的內容在超出了單元格寬度設置允

6、許的情況下自動對文本進展換行顯示假設設置了單元格寬度，但同時又設置了nowarp屬性，那么此時，單元格寬度設置不起作用，一切文本將在一行內顯示.單元格標志屬性設置語法.單元格標志屬性例如示例代碼.表格各標志屬性設置的本卷須知表格標志中的bordercolorlight、bordercolordark顏色顯示的位置正好跟行標志及單元格標志中的這兩個屬性相反 內層的邊框顏色設置會和外層的邊框顏色混合成另一種顏色同時設置背景顏色和背景圖像時，背景顏色將被背景圖像覆蓋掉只需較新版的閱讀器才支持背景顏色和背景圖像的設置，不支持背景圖像的設置的閱讀器會顯示閱讀器的默許背景顏色來替代圖像.背景圖像屬性設置的

7、規那么選擇根本上不傳達信息的小巧而精致的圖像選擇帶有較少外形、方式或顏色的簡單圖像 選擇可以突出文檔意圖的圖像在盡能夠多的閱讀器中查看帶有表格背景圖像的HTML文檔，確保跨閱讀器的兼容性.背景顏色屬性設置的規那么假設文本顏色是深色的，應該選擇淡色作為背景顏色假設文本顏色是淡色的，應該選擇深色作為背景顏色選擇在美學角度來看令人愉快的顏色假設表述的主題是快節拍或激動人心的，應該選擇明快的顏色假設表述的是慢節拍和基調憂郁的內容，應該選擇暗淡的顏色一直選擇216 種無抖動顏色之一.表格題注作用：概括表格的內容提供關于表格內容的一些信息根本語法 語法解釋 標志之間的就是表格的標題，這個標志必需在標志對之

8、內運用為表格添加題注.標志對齊屬性屬 性 描 述align設置水平對齊方式，取值：left/center/right，默認取centervalign設置垂直對齊方式，取值：top/bottom，默認取top.表格題注設置例如 示例代碼.在網頁中，排版通常需求經過表格的嵌套來完成表格的嵌套是指在一個表格的單元格中插入另一個表格嵌套表格.表格嵌套設置例如示例代碼.在網頁排版中運用嵌套表格的緣由有二：一是利于簡化表格制造：網頁的排版有時會很復雜，在外部需求有一個表格控制總體規劃，假設這時一些內部排版的細節也經過總表格來實現，容易引起行高列寬等的沖突，給表格制造帶來困難二是提高閱讀器呼應速度：閱讀器在

9、解析網頁的時候，是將整個表格的構造下載終了之后才顯示表格，假設不運用嵌套，表格非常復雜，表格下載耗時相對長，閱讀者要等很長時間才干看到網頁的內容.小 結制造表格時需求同時運用或標志對表格的內容必需放置在或之間每一行必需運用一個標志對行中的一切列都必需放置在標志對之間經過表格、行及單元格標志的屬性，可以對表格進展格式化，如設置顯示邊框、邊框寬度、邊框顏色等.在排版網頁時通常需求嵌套表格，所謂表格的嵌套，是指在一個表格的單元格中插入另一個表格小 結.思索題1. 在顯示表格邊框，應如何設置？2. 如何設置表格的寬度、高度、對齊方式、邊框顏色、單元格間距及單元格邊距？ 3. 如何設置單元格的對齊方式、

10、背景顏色、背景圖像?4. 在網頁排版時，應如何嵌套表格?.運用框架構造框架概述框架構造組成標志框架集標志框架標志不支持框架標志浮動框架框架與鏈接.框架概述HTML 框架允許在閱讀器中同時顯示多個HTML文檔多個頁面可以同時在同一閱讀器可獨立滾動的窗口中顯示用來把閱讀器窗口分成幾個獨立的部分每一部分可以分別包含一個單獨的HTML 文檔借助于框架分割閱讀器窗口可以顯著改良外觀和可用性.框架的特征可以程度或垂直分割垂直框架具有垂直邊框程度框架具有程度邊框也可以在框架中嵌套框架在定義框架間的交互之前必需先設定規劃.運用框架的優點使網頁內容看起來更美觀減少了網站的下載時間提高了網站的可用性導航部分依然可

11、見，由于內容在單獨的框架中改動框架允許開發者將內容與導航和構造元素分別有助于輕松、快速地更新內容.運用框架的缺陷老版本的閱讀器不支持框架開發者需求創建并組織多個文件來充實頁面，使站點創建更復雜框架構造的Web 站點不允許訪問者在一個框架構造的文檔中為頁面參與書簽框架構造的Web 站點會添加效力器負載，導致過多的文檔懇求框架構造的Web 站點會使搜索引擎產生問題在框架構造的Web 站點中很難跟蹤一個頁面.創建框架確定要創建的框架大小創建框架集文檔，確定各框架的位置和特性指定框架和其中的內容格式化框架預先為在非框架構造的閱讀器中顯示框架做好預備 留意：運用框架構造時，HTML文檔中不能出現標志對，

12、此時需求由替代.框架構造組成標志框架集標志：主要是定義閱讀器窗口的分割方式，以及各分割窗口框架的大小框架標志：定義各分割窗口中顯示的內容，并能對各分割窗口進展格式化.框架集標志框架分割窗口方式：左右程度分割上下垂直分割嵌套分割：閱讀器窗口既存在左右分割，又存在上下分割 .左右分割根本語法 .語法解釋 cols屬性決議了窗口的分割方式為左右分割；“value定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數決議了標志的個數，即窗口的個數，而value的值那么決議了相應窗口的大小.左右分割例如 .上下分割根本語法: . .語法解釋 rows屬性決議了窗口的分割方式為上下分割；“v

13、alue定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數決議了標志的個數，即窗口的個數，而value的值那么決議了相應窗口的大小.上下分割例如 . 嵌套分割根本語法 .嵌套分割例如 .嵌套分割例如結果.對框架邊框的格式化屬 性 屬性值描 述bordern設置所有框架邊框寬度，此屬性必須和frameborder一起使用才有效bordercolor以RGB顏色值或顏色英文名設置所有框架邊框顏色framespacingn設置所有框架邊框寬度，此屬性必須和frameborder一起使用才有效FrameBorder0所有框架都不顯示邊框（用于IE瀏覽器）1所有框架都顯示邊框（用于IE

14、瀏覽器），默認為1yes所有框架都顯示邊框（用于Navigate瀏覽器）no所有框架都不顯示邊框（用于Navigate瀏覽器.框架標志根本語法 . .語法解釋 src屬性用于設置在框架窗口中顯示的內容來自的文件；name屬性用于標志框架稱號，以便于其他對象對它的援用，如作為鏈接的一個目的窗口框架標志.標志屬性設置例如 .屬 性 屬性值描 述SrcURL設置在框架中顯示的文件的路徑Name設置Frame 名稱，以便于其它對象對它的引用FrameBorder0不顯示邊框（用于IE瀏覽器）1顯示邊框（用于IE瀏覽器），默認為1yes顯示邊框（用于Navigate瀏覽器）no不顯示邊框（用于Navig

15、ate瀏覽器）Scrollingyes顯示滾動條no不顯示滾動條auto根據頁面的長度自動判斷是否顯示滾動條，默認自動Noresize設置框架能否改變大小Marginwidthn以像素為單位，設置框架邊框與頁面內容的左右頁邊距Marginheightn以像素為單位，設置框架邊框與頁面內容的上下的頁邊距bordercolor以RGB顏色值或顏色英文名設置框架邊框顏色標志屬性.框架屬性闡明運用框架的屬性，可設置框架顯示的內容以及對框架進展格式化對框架的格式化包括更改邊框、調整頁邊距和指定顏色以及由訪問者對它的運用實行控制標志屬性. 框架綜合例如 框架綜合例如代碼.浮動框架浮動框架是一種特殊的框架頁

16、面，其作為HTML文檔的一部分，就象圖像一樣出如今HTML文檔中。浮動框架允許將一個HTML文檔插入到另一個HTML文檔內部的某個區域。運用浮動框架時必需設置該框架的大小，即框架的高度和寬度.根本語法 浮動框架. 語法解釋參見下表屬 性 屬性值描 述srcURL設置浮動框架中顯示頁面源文件的路徑widthn設置浮動框的寬度heightn設置浮動框的高度name設置浮動框的名稱，以便于其他對象引用它align設置浮動框相對于瀏覽器窗口的對齊方式frameborder設置浮動框架顯示狀態，與普通框架同framespacing設置浮動框架邊框寬度，與普通框架同scrolling設置浮動框架滾動條顯示

17、屬性，與普通框架同noresize設置浮動框架尺寸調整屬性，與普通框架同bordercolor設置浮動框架邊框顏色，與普通框架同marginheightn浮動框架邊框與頁內容上下間距，與普通框架同marginwidthn浮動框架邊框與頁內容左右間距，與普通框架同.浮動框例如 .框架與鏈接框架的一個重要目的是在不同的框架中顯示不同的頁面，經過鏈接目的窗口的設置可實現這一目的詳細實現方法：將框架的框架名屬性值作為超鏈接的target的屬性值.普通框架與鏈接例如例如.浮動框架與鏈接例如效果浮動框架與鏈接例如.小 結框架的作用是將閱讀器窗口分割成假設干個區域，每個區域可分別顯示不同的頁面框架對閱讀器窗口的分割方式有：左右分割、上下分割和嵌套分割框架的組成標志有和運用框架構造時，HTML文檔中不能出現。需求由替代.窗口分割方