代碼入門教程（21）

第 二 章 標 簽 應 用第二十七節 表格標籤應用（3）

本節繼續講解表格標籤的應用。本節講解的內容為：表格中在文章標題的上面設置插圖、在表格中設置背景音樂、在表格中改變滑鼠指針樣式。一、表格中在文章標題的上方設置插圖：撰寫文章時，我們常常會使用邊框。在多重邊框里添加一個圖片，放置到文章標題的上方，會給文章增添不少的色彩。添加的圖片，可以是普通的圖片，也可以是動畫圖片。舉例如下：代碼：<table border="20" cellSpacing="5" borderColor="#acd6ff"cellPadding="0"width_="680" bgColor="#d2e9ff" align="center"><tbody><tr><td><table border="1" cellSpacing="5" borderColor="#8c8c00"cellPadding="0" width_="670" bgColor="#c4e1ff" align="center"><tbody><tr><td><div><img style="margin: 0px 10px 0px 0px;" alt=""src=http://image48.360doc.com/DownloadImg/2012/01/2917/21124595_2.jpg></div<p align="center"><font style="font-size: 24px;" color="#ff0000"><strong>文字處</strong></font></p></td></tr></tbody></table></td></tr></tbody></table>代碼解析：1、這是一個在二重表格中添加了一個圖片的例子。在第二層表格的單元格中，設置了一套塊區標籤，在塊區標籤的<div></div>之間放置了一個圖片標籤 :<img style="margin: 0px 10px 0px 0px;" alt=""src=http://image48.360doc.com/DownloadImg/2012/01/2917/21124595_2.jpg> 。在塊區標籤的下面，設置了一套段落標籤<p></p>,用於輸入文章內容。2、塊區標籤的<div></div>之間的內容，還可以替換為動畫圖片的插入標籤。把輸入「文章內容」處放入下一行的單元格中。例如下面的代碼：<table border="1" cellSpacing="5" borderColor="#8c8c00" cellPadding="0"width_="670" bgColor="#c4e1ff" align="center"><tbody><tr><td><div><embed height="450" type="application/x-shockwave-flash" align="right"width_="670" src="https://www.getit01.com/getimg_360.php?url=http://www.flash1890.com/swf/sucai/chunjie/15.swf"wmode="transparent" quality="high"><embed height="450" type="application/x-shockwave-flash"align="right" width_="670" src="https://www.getit01.com/getimg_360.php?url=http://xt.2000y.net/106939/uploadpic/2009051520213896834.swf"wmode="transparent" quality="high"></div></td></tr><tr><td><p align="center"><font style="font-size: 24px;" color="#ff0000"><strong>文字處</strong></font></p></td></tr></tbody></table>二、在表格中設置背景音樂：把撰寫完畢的文章放入邊框中，會給文章增添不少的色彩。然而我們並不滿足於此，如果再添加個背景音樂，那就更錦上添花了。在表格中給文章添加背景音樂的方法，可以這樣進行：1、在360doc圖書館中，先搜索一個自動播放的播放器，如：http://www.360doc.com/content/12/0514/21/4127803_211045436.shtml，複製其代碼。2、保留多媒體標籤：<embed style="margin: 0px auto 10px; text-align: center; display: block;"height="600" type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer" width_="700"src="https://www.getit01.com/getimg_360.php?url=http://home.202030.com/mp3.swf?user=ahstbzp28&amp;mp3.swf"wmode="transparent" invokeurls="false" quality="high"allowScriptAccess="never" allowNetworking="internal">，把其餘的代碼都「刪除」掉。3、把這個多媒體標籤中的高度與寬度的數值都修改為「0」，這就是「隱藏的播放器」的代碼了。4、把這個隱藏的播放器代碼「粘貼」到表格中任意一套單元格的<td></td>這兩個標籤之間。三、在表格中改變滑鼠指針樣式：把撰寫完畢的文章放入邊框中以後，我們還可以在整個代碼（最後的若干個尾標籤）的後面添加一些特殊的代碼，用以顯示特殊的滑鼠樣式。改變滑鼠指針樣式的代碼舉例如下：代碼1：（小貓咪)<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400007.ani");}</style>代碼2：（小人物）<style>body{CURSOR:url("http://pic.51.comshop/product/sbys/ani/1000400025.ani");}</style>代碼3：（小人物）<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400023.ani");}</style>代碼4：（小人物）<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400018.ani");}</style>代碼5：（小人物）<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400086.ani");}</style>代碼6：（小畫筆）<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400062.ani");}</style>網頁效果舉例：http://www.360doc.com/content/12/1020/06/4127803_242541666.shtml在這篇文章代碼的後面，我添加了「改變滑鼠指針樣式」的代碼：<style>body{CURSOR:url("http://pic.51.com/shop/product/sbys/ani/1000400047.ani");}</style> 當滑鼠指向文章頁面的時候，滑鼠指針會由原來的箭頭圖標變成一個「頭戴小帽的動畫人物」圖標。（很有趣的）作業：1、認真閱讀「代碼解析」，理解在表格（邊框）中設置插圖的方法。製作幾個有插圖的邊框。2、在360圖書館內搜索幾個自動播放的播放器，把它修改為隱藏的播放器。3、試著在表格中設置一個你喜歡的背景音樂。4、試著在表格中設置一個你喜歡的滑鼠指針樣式。

2012年12月12日於北京

第 二 章 標 簽 應 用第二十八節 表格標籤應用（4）

本節繼續講解表格標籤的應用。下面講解表格邊框線的設置。表格邊框線的設置包括兩方面的內容：「表格最外圍邊框線的設置」和「表格內部邊框線的設置」。 一、表格最外圍邊框線的設置： 表格的frame 屬性控制著表格最外圍的四條邊框的可見性。 frame 屬性可取的值及含義如下：void ： 默認值。不顯示錶格最外圍的邊框。表達方式： frame=voidbox ： 同時顯示四條邊框。表達方式： frame=box border ：同時顯示四條邊框。表達方式： frame=border above ：只顯示頂部邊框。 表達方式：frame=above below ：只顯示底部邊框。 表達方式：frame=below lhs ：只顯示左側邊框。 表達方式：frame=lhsrhs： 只顯示右側邊框。 表達方式：frame= rhshsides： 只顯示水平方向的兩條邊框。 表達方式：frame=hsidesvsides ：只顯示垂直方面的兩條邊框。 表達方式：frame=vsides 1、普通表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 2、只顯示上邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000"cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="above" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 3、只顯示下邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="below" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 4、只顯示左右邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00" frame="vsides" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 5、只顯示上下邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000"cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="hsides" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 6、只顯示左邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="lhs" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 7、只顯示右邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="rhs" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 8、不顯示任何邊框的表格代碼：<table border="3" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="300" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"frame="void" align="center" height="100"><tbody><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 二、表格內部邊框線的設置： 表格的rules 屬性控制著表格內部邊框的可見性。表格的rules屬性，它有三個值(cols,rows,none)，當rules=cols時，表格會隱藏橫向的分隔線，也就是我們只能看到表格的列；當rules=rows時，就隱藏了縱向的分隔線，也就是我們只能看到表格的行；而當rules=none時，縱向分隔線和橫向分隔線將全部隱藏，我們就只能看到一個表格的外框了。 1、隱藏了橫向分隔線的表格代碼：<table border="3" rules="cols" cellSpacing="0" borderColor="#990000" cellPadding="0" width_="400" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"height="200"><tbody><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 2、隱藏了縱向分隔線的表格代碼：<table border="3" rules="rows" cellSpacing="0" borderColor="#990000"cellPadding="0" width_="400" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"height="200"><tbody><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 3、隱藏了所有內部分隔線的表格代碼：<table border="3" rules="none" cellSpacing="0" borderColor="#990000"cellPadding="0" width_="400" background="http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg" bgColor="#00ff00"height="200"><tbody><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr><tr align="center"><td><div align="center"><font color="#00ffff">a</font></div></td><td><div align="center"><font color="#00ffff">b</font></div></td><td><div align="center"><font color="#00ffff">c</font></div></td></tr></tbody></table> 作業： 1、認識表格的frame 屬性與rules 屬性，並記住它們各自的屬值。 2、學會設置「顯示與隱藏」表格的外部邊框線，學會設置「顯示與隱藏」表格的內部分割線。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)代碼入門教程(14)代碼入門教程(15)代碼入門教程(16)代碼入門教程(17)代碼入門教程(18)代碼入門教程(19)代碼入門教程(20)代碼入門教程(21)代碼入門教程(22)代碼入門教程(23)代碼入門教程(24)

2012年12月12日於北京
推薦閱讀：