BTC-CS-HTML-01-第3章-HTML表格和框架課件

1、第3章 HTML表格和框架本章目標(biāo)了解表格和框架的定義和作用掌握表格元素和框架元素的使用規(guī)則，以及常用屬性能夠靈活的運(yùn)用表格元素和框架元素開(kāi)發(fā)靜態(tài)網(wǎng)頁(yè)2HTML 表格元素表格是由行和列組成的結(jié)構(gòu)化數(shù)據(jù)集(表格數(shù)據(jù))，通過(guò)在行和列的標(biāo)題之間進(jìn)行視覺(jué)關(guān)聯(lián)的方法，就可以讓信息能夠很簡(jiǎn)單地被解讀出來(lái)。3表格的基本結(jié)構(gòu)每個(gè)表格均有若干行，每行被分割為若干單元格。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。4表格標(biāo)簽表格是通過(guò),等標(biāo)簽來(lái)完成的5標(biāo)簽描述定義表格。定義表格的頁(yè)眉。定義表格的主體。定義表格的頁(yè)腳。定義表格的行。定義表格的表頭。定義表格單元。定義表格標(biāo)題。定義用于表格列的屬性

2、。定義表格列的組。表格標(biāo)簽table標(biāo)簽 標(biāo)簽定義 HTML表格。一個(gè)HTML表格包括 元素，一個(gè)或多個(gè)、以及元素。 元素定義表格行， 元素定義表頭， 元素定義表格單元。常用屬性6屬性值描述borderpixels規(guī)定表格單元是否擁有邊框。cellpaddingpixelsHTML5 不支持。規(guī)定單元邊沿與其內(nèi)容之間的空白。cellspacingpixelsHTML5 不支持。規(guī)定單元格之間的空白。frameVoid、above、below、hsides、lhs、rhs、vsides、box、borderHTML5 不支持。規(guī)定外側(cè)邊框的哪個(gè)部分是可見(jiàn)的。rulesnonegroupsrows

3、colsallHTML5 不支持。規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見(jiàn)的。summarytextHTML5 不支持。規(guī)定表格的摘要。widthpixels%HTML5 不支持。規(guī)定表格的寬度。表格標(biāo)簽table標(biāo)簽7表頭1表頭2內(nèi)容1內(nèi)容2表格標(biāo)簽table標(biāo)簽復(fù)雜表格包含了、 以及 元素8表格的標(biāo)題表頭1表頭2表頭3內(nèi)容1內(nèi)容2內(nèi)容3腳注1腳注2腳注2表格標(biāo)簽tr標(biāo)簽 標(biāo)簽定義HTML表格中的行。tr元素包含一個(gè)或多個(gè)th或td元素。屬性9屬性值描述alignRight、left、center、justify、char定義表格行的內(nèi)容對(duì)齊方式。bgcolorrgb(x,x,x)#xxxxxxcolo

4、rname不贊成使用。請(qǐng)使用樣式取而代之。規(guī)定表格行的背景顏色。charcharacter規(guī)定根據(jù)哪個(gè)字符來(lái)進(jìn)行文本對(duì)齊。charoffnumber規(guī)定第一個(gè)對(duì)齊字符的偏移量。valignTop、middle、bottom、baseline規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式。表格標(biāo)簽th標(biāo)簽和td標(biāo)簽 標(biāo)簽定義表格內(nèi)的表頭單元格， 標(biāo)簽定義HTML表格中的標(biāo)準(zhǔn)單元格。屬性10屬性值描述abbrtext規(guī)定單元格中內(nèi)容的縮寫(xiě)版本。alignLeft、right、center、justify、char規(guī)定單元格內(nèi)容的水平對(duì)齊方式。axiscategory_name對(duì)單元格進(jìn)行分類(lèi)。bgcolorrgb

5、(x,x,x)#xxxxxxcolorname不推薦使用。請(qǐng)使用樣式替代它。規(guī)定表格單元格的背景顏色。charcharacter規(guī)定根據(jù)哪個(gè)字符來(lái)進(jìn)行內(nèi)容的對(duì)齊。charoffnumber規(guī)定對(duì)齊字符的偏移量。colspannumber設(shè)置單元格可橫跨的列數(shù)。headersidrefs由空格分隔的表頭單元格 ID 列表，為數(shù)據(jù)單元格提供表頭信息。heightpixels%不推薦使用。請(qǐng)使用樣式替代它。規(guī)定表格單元格的高度。nowrapnowrap不推薦使用。請(qǐng)使用樣式取而代之。規(guī)定單元格中的內(nèi)容是否折行。rowspannumber規(guī)定單元格可橫跨的行數(shù)。scopeCol、colgroup、ro

6、w、rowgroup定義將表頭數(shù)據(jù)與單元數(shù)據(jù)相關(guān)聯(lián)的方法。valignTop、middle、bottom、Baseline規(guī)定單元格內(nèi)容的垂直排列方式。widthpixels %不推薦使用。請(qǐng)使用樣式取而代之。規(guī)定表格單元格的寬度。表格標(biāo)簽th標(biāo)簽和td標(biāo)簽跨多列的語(yǔ)法： 跨多行的語(yǔ)法： 11 項(xiàng)目名稱計(jì)劃投入實(shí)際投入 計(jì)劃用時(shí)計(jì)劃完成日期實(shí)際用時(shí)完成日期 項(xiàng)目一5個(gè)月2009/10/167個(gè)月2009/12/30 項(xiàng)目二3個(gè)月2010/6/104個(gè)月2010/7/20 HTML框架框架的作用是把瀏覽器窗口分割成幾個(gè)獨(dú)立的小窗口，每個(gè)小窗口可以顯示不同頁(yè)面的內(nèi)容，這樣就可以同時(shí)瀏覽若干個(gè)網(wǎng)頁(yè)。

7、兩種：一種為普通框架；另一種為內(nèi)嵌框架。12框架標(biāo)簽框架相關(guān)標(biāo)簽13標(biāo)簽描述定義一個(gè)框架集，框架集是若干框架的集合，利用框架集可以定義框架結(jié)構(gòu)，實(shí)現(xiàn)分割瀏覽器窗口的功能。定義 frameset 中的一個(gè)特定的窗口（框架）。noframes 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位于 frameset 元素內(nèi)部。定義內(nèi)聯(lián)的子窗口（框架）框架標(biāo)簽frameset和frame標(biāo)簽14框架標(biāo)簽frameset和frame標(biāo)簽frameset標(biāo)簽有一個(gè)必需的屬性： rows或cols定義了文檔窗口中框架或嵌套的框架集的行或列的大小及數(shù)目。15屬性值描述colspixels%*定義

8、框架集中列的數(shù)目和尺寸。rowspixels%*定義框架集中列的數(shù)目和尺寸?？蚣軜?biāo)簽frameset和frame標(biāo)簽frame標(biāo)簽屬性16屬性值描述frameborder0無(wú)邊框。1有邊框（默認(rèn)值）。規(guī)定是否顯示框架周?chē)倪吙颉３鲇趯?shí)用性方面的原因，最好不用設(shè)置該屬性，請(qǐng)使用 CSS 來(lái)應(yīng)用邊框樣式和顏色。marginheightpixels規(guī)定框架內(nèi)容與框架的上方和下方之間的高度，以像素計(jì)。marginwidthpixels規(guī)定框架內(nèi)容與框架的左側(cè)和右側(cè)之間的高度，以像素計(jì)。namename規(guī)定框架的名稱。用于在 JavaScript 中引用元素，或者作為鏈接的目標(biāo)。noresizenore

9、size規(guī)定無(wú)法調(diào)整框架的大小。scrollingyes始終顯示滾動(dòng)條（即使不需要）。no從不顯示滾動(dòng)條（即使需要）。auto在需要的時(shí)候顯示滾動(dòng)條。規(guī)定是否在框架中顯示滾動(dòng)條。默認(rèn)地，如果內(nèi)容大于框架，就會(huì)出現(xiàn)滾動(dòng)條。srcURL規(guī)定在框架中顯示的文檔的 URL?？蚣軜?biāo)簽frameset和frame標(biāo)簽17 Your browser does not handle frames! 內(nèi)聯(lián)框架通過(guò)內(nèi)聯(lián)框架可以實(shí)現(xiàn)在網(wǎng)頁(yè)中“插入”網(wǎng)頁(yè)使用iframe標(biāo)簽來(lái)表示，iframe是inner frame的簡(jiǎn)寫(xiě)。18內(nèi)聯(lián)框架frame與iframe功能基本相同區(qū)別iframe比f(wàn)rame具有更多的靈活性。

10、frame是整個(gè)頁(yè)面的框架，iframe是內(nèi)嵌的網(wǎng)頁(yè)元素iframe可以在同一個(gè)頁(yè)面中多次顯示同一內(nèi)容，而不必重復(fù)這段內(nèi)容的代碼。19內(nèi)聯(lián)框架iframe常用屬性20屬性值描述frameborder0無(wú)邊框。1有邊框（默認(rèn)值）。規(guī)定是否顯示框架周?chē)倪吙?。出于?shí)用性方面的原因，最好不用設(shè)置該屬性，請(qǐng)使用 CSS 來(lái)應(yīng)用邊框樣式和顏色。marginheightpixels規(guī)定 iframe 的頂部和底部的空白邊距，以像素計(jì)。marginwidthpixels規(guī)定 iframe 的左邊和右邊的空白邊距，以像素計(jì)。namename規(guī)定iframe的名稱。用于在 JavaScript 中引用元素，或者作為鏈接的目標(biāo)。scrollingyes始終顯示滾動(dòng)條（即使不需要）。no從不顯示滾動(dòng)條（即使需要）。auto在需要的時(shí)候顯示滾動(dòng)條。規(guī)定是否在iframe中顯示滾動(dòng)條。默認(rèn)地，如果內(nèi)容大于框架，就會(huì)出現(xiàn)滾動(dòng)條。srcURL規(guī)定在iframe中顯示的文檔的 URL。heightpixels以像素計(jì)的高度值（比如 100px）。%以包含元素百分比計(jì)的高度值（比如 20%）。規(guī)定 iframe 的高度。widthpixels以像素計(jì)的高度值（比如 100px）。