HTML表格、框架-使用大全

1、靜態(tài)網(wǎng)站設(shè)計(jì)網(wǎng)絡(luò)技術(shù)系：李毓麗.運(yùn)用表格制造表格添加或刪除行和列格式化表格為表格添加題注嵌套表格. 表格在網(wǎng)頁(yè)中除了作為一個(gè)顯示對(duì)象以外，還有一個(gè)重要的作用就是用于排版頁(yè)面內(nèi)容制造表格.表格標(biāo)志標(biāo) 記 描 述在HTML文檔中創(chuàng)始一個(gè)表格在表格中創(chuàng)建一行在一行中創(chuàng)建一個(gè)單元格在一行中創(chuàng)建一個(gè)標(biāo)題單元格為表格創(chuàng)建題注.根本語(yǔ)法 與標(biāo)志不同的地方是之間的內(nèi)容會(huì)加粗且默許居中顯示，而之間的內(nèi)容那么不加粗且默許居左顯示.表格例如 示例代碼.表格中每一行運(yùn)用一個(gè)表示；行中的每一列運(yùn)用一個(gè)或表示添加或刪除行和列可以分別經(jīng)過添加或刪除行和列標(biāo)志來(lái)實(shí)現(xiàn)添加或刪除行和列.添加或刪除行和列實(shí)現(xiàn)方法添加新行 可以經(jīng)過

2、插入額外的 和 標(biāo)志來(lái)添加新的一行在表內(nèi)創(chuàng)建新列 可以經(jīng)過對(duì)每一行添加 或 標(biāo)志在表格中創(chuàng)建新的列刪除表中的行和列 可以經(jīng)過刪除包圍指定行和列的 標(biāo)志和 標(biāo)志來(lái)刪除表格中的列和行.表格的格式化包括以下一些內(nèi)容：為表格添加邊框及設(shè)置邊框粗細(xì)及邊框顏色為表格添加背景圖像或背景顏色指定表格的對(duì)齊方式設(shè)置表格的寬度、高度設(shè)置表格單元格內(nèi)容與邊框的間距及單元格之間的間距指定行、列的背景圖像或背景顏色指定行、列內(nèi)容的對(duì)齊方式設(shè)置行、列的邊框顏色設(shè)置行、列的寬度和高度單元格的跨行和跨列設(shè)置格式化表格.表格屬性屬 性 描 述border設(shè)置表格邊框?qū)挾龋瑔挝粸橄袼兀J(rèn)不顯示邊框），設(shè)置border=0將取消

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

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

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

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

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

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

9、解析網(wǎng)頁(yè)的時(shí)候，是將整個(gè)表格的構(gòu)造下載終了之后才顯示表格，假設(shè)不運(yùn)用嵌套，表格非常復(fù)雜，表格下載耗時(shí)相對(duì)長(zhǎng)，閱讀者要等很長(zhǎng)時(shí)間才干看到網(wǎng)頁(yè)的內(nèi)容.小 結(jié)制造表格時(shí)需求同時(shí)運(yùn)用或標(biāo)志對(duì)表格的內(nèi)容必需放置在或之間每一行必需運(yùn)用一個(gè)標(biāo)志對(duì)行中的一切列都必需放置在標(biāo)志對(duì)之間經(jīng)過表格、行及單元格標(biāo)志的屬性，可以對(duì)表格進(jìn)展格式化，如設(shè)置顯示邊框、邊框?qū)挾取⑦吙蝾伾?在排版網(wǎng)頁(yè)時(shí)通常需求嵌套表格，所謂表格的嵌套，是指在一個(gè)表格的單元格中插入另一個(gè)表格小 結(jié).思索題1. 在顯示表格邊框，應(yīng)如何設(shè)置？2. 如何設(shè)置表格的寬度、高度、對(duì)齊方式、邊框顏色、單元格間距及單元格邊距？ 3. 如何設(shè)置單元格的對(duì)齊方式、

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

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

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

13、alue定義各個(gè)框架的大小，單位可以是像素，也可以是百分比；value的個(gè)數(shù)決議了標(biāo)志的個(gè)數(shù)，即窗口的個(gè)數(shù)，而value的值那么決議了相應(yīng)窗口的大小.上下分割例如 . 嵌套分割根本語(yǔ)法 .嵌套分割例如 .嵌套分割例如結(jié)果.對(duì)框架邊框的格式化屬 性 屬性值描 述bordern設(shè)置所有框架邊框?qū)挾龋藢傩员仨毢蚮rameborder一起使用才有效bordercolor以RGB顏色值或顏色英文名設(shè)置所有框架邊框顏色framespacingn設(shè)置所有框架邊框?qū)挾?，此屬性必須和frameborder一起使用才有效FrameBorder0所有框架都不顯示邊框（用于IE瀏覽器）1所有框架都顯示邊框（用于IE

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

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

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

17、屬性，與普通框架同noresize設(shè)置浮動(dòng)框架尺寸調(diào)整屬性，與普通框架同bordercolor設(shè)置浮動(dòng)框架邊框顏色，與普通框架同marginheightn浮動(dòng)框架邊框與頁(yè)內(nèi)容上下間距，與普通框架同marginwidthn浮動(dòng)框架邊框與頁(yè)內(nèi)容左右間距，與普通框架同.浮動(dòng)框例如 .框架與鏈接框架的一個(gè)重要目的是在不同的框架中顯示不同的頁(yè)面，經(jīng)過鏈接目的窗口的設(shè)置可實(shí)現(xiàn)這一目的詳細(xì)實(shí)現(xiàn)方法：將框架的框架名屬性值作為超鏈接的target的屬性值.普通框架與鏈接例如例如.浮動(dòng)框架與鏈接例如效果浮動(dòng)框架與鏈接例如.小 結(jié)框架的作用是將閱讀器窗口分割成假設(shè)干個(gè)區(qū)域，每個(gè)區(qū)域可分別顯示不同的頁(yè)面框架對(duì)閱讀器窗口的分割方式有：左右分割、上下分割和嵌套分割框架的組成標(biāo)志有和運(yùn)用框架構(gòu)造時(shí)，HTML文檔中不能出現(xiàn)。需求由替代.窗口分割方