HTML表格邊框de制作(free).doc

HTML表格邊框制作教程（free）作者：靈子表格以和分別作起始標(biāo)識(shí)符。其中，里有一些必要的參數(shù)，為容易理解起見(jiàn)，在這里只介紹本節(jié)用到的參數(shù)，其他的參數(shù)今后將陸續(xù)提到。border參數(shù)定義表格邊框的粗細(xì)，記為border=數(shù)值，數(shù)值取0，1，2，3等整數(shù)。width是我們要定義的參數(shù)，它規(guī)定表格的寬度，數(shù)值通常用100%，記作width=100%，值得注意的是，如果不設(shè)置width值，表格將根據(jù)單元格里的內(nèi)容自動(dòng)定義寬度。height參數(shù)規(guī)范表格的高度，通?？梢圆辉O(shè)置，而是讓內(nèi)容的多少讓系統(tǒng)自行設(shè)定。和之下，還需要由兩個(gè)成對(duì)的標(biāo)識(shí)符號(hào)定義表格的行、列，它們分別是，tr標(biāo)識(shí)符定義表中的行，td標(biāo)識(shí)符定義數(shù)據(jù)表元，即每行中的每一列。要包含在里面。此外，論壇要求在下有（表體），它也是成對(duì)出現(xiàn)，包含.。一張完整的表格全部語(yǔ)法如下： Hello Table效果如下： Hello Table表格邊框的修飾上一講我們講到border屬性，border即為邊框，除了有粗細(xì)的數(shù)值定義以外，還有其他的屬性哦。我們先來(lái)看看亮邊框的顏色和暗邊框的顏色設(shè)置。亮邊框記作bordercolorlight，暗邊框記作bordercolordark。它們的數(shù)值可以用red、green、blue等表達(dá)，也可以用#11ee00這樣的方式來(lái)表達(dá)，比如：bordercolorlight=red，bordercolorlight=#808000。請(qǐng)看下面的表格：以上表格的全部代碼清單如下： Hello Table 上表中，左、上邊框是亮邊框，右、下邊框?yàn)榘颠吙?。怎么樣？這么一修飾就好看多了吧？邊框顏色方面還有一個(gè)屬性：bordercolor。當(dāng)同時(shí)設(shè)置了暗、亮邊框的顏色，bordercolor的顏色設(shè)置是多余的，這一點(diǎn)應(yīng)該注意。現(xiàn)在我們用bordercolor來(lái)設(shè)置一下表格邊框，看看有什么效果：Hello Table代碼清單： Hello Table上面我們學(xué)習(xí)的有關(guān)表格邊框顏色的設(shè)置，下面繼續(xù)跟我學(xué)習(xí)表格邊框其他方面的知識(shí)。內(nèi)容不多了，還講兩個(gè)表格邊框的屬性：一是邊框線（cellpadding）粗細(xì)和邊框空白處的大小，取值范圍從0開(kāi)始，用正整數(shù)。下面是代碼和表格效果： Hello Table 邊框線:2 ，邊框空白處:8 Hello Table 邊框線:2 ，邊框空白處:8表格背景的修飾默認(rèn)情況下，HTML網(wǎng)頁(yè)里表格的背景色是白色的。這顯然不總是符合我們的要求，我們通常會(huì)設(shè)置各種背景顏色，以配合網(wǎng)頁(yè)或貼子主題。設(shè)置表格的背景色很簡(jiǎn)單，給其bgcolor屬性賦值即可，寫(xiě)作bgcolor=數(shù)值，其數(shù)值取值方式和上一講講到的邊框顏色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor屬性應(yīng)該放置在表格初始符當(dāng)中。下面舉個(gè)實(shí)例，先是代碼，后是效果：背景色：bgcolor=#CCCC00暗邊框顏色：#008000亮邊框顏色：#008060 注一：代碼中用上了設(shè)置字體對(duì)齊方式，在和之間用來(lái)定義左對(duì)齊，這種方式的定義無(wú)需終止標(biāo)識(shí)符，而定義字體的那句則需要在結(jié)束字體定義處有終止標(biāo)識(shí)符號(hào)。注二：細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)，表格代碼里多了一組，這是怎么回事呢？又是什么意思呢？在純粹的HTML表格里本來(lái)可以不要這個(gè)的，但論壇有論壇的語(yǔ)法規(guī)范，它用來(lái)定義表格體，如果沒(méi)有，系統(tǒng)也會(huì)自動(dòng)在和之間加上，且它要把包含在里面。今后在論壇里制作表格應(yīng)該養(yǎng)成加和的習(xí)慣。除了使用背景色，我們還可以使用圖片來(lái)修飾表格背景，應(yīng)該說(shuō)，用圖片來(lái)修飾表格的外觀會(huì)更漂亮得多。不過(guò)應(yīng)該注意，用來(lái)作表格背景圖的文件不要太大，太大了打開(kāi)網(wǎng)頁(yè)速度較慢，圖片的尺寸方面，要么是有規(guī)則圖案的小圖片，要么就是和表格大小相一致的，否則做出的表格也不會(huì)有理想的外觀效果。下面我們?cè)谏厦姹砀竦幕A(chǔ)上，用這幅圖來(lái)作表格的背景圖片：screen.width-500)this.style.width=screen.width-500; border=0代碼及效果如下：代碼(紅色那句就是加背景圖的語(yǔ)法，放在當(dāng)中合適的位置即可)：背景色：bgcolor=#CCCC00暗邊框顏色：#008000亮邊框顏色：#008060 效果：表格內(nèi)容的編輯由于本講涉及到一些編輯排版、字體修飾等語(yǔ)法，黑馬先來(lái)簡(jiǎn)單介紹一下這些常用到的語(yǔ)法格式。：強(qiáng)制換行，效果等價(jià)于在Design模式下的組合鍵 Shift+Enter。：段落標(biāo)志。等價(jià)于敲一次回車(chē)鍵。：字體加粗，與效果一致。：下劃線。：斜體字。：對(duì)齊方式，值取left，right，center。下面黑馬以一個(gè)實(shí)例代碼和效果來(lái)演示如何在表格中編排內(nèi)容。先來(lái)看看效果：快樂(lè)的奔兒照片之一screen.width-500)this.style.width=screen.width-500;作于二六年二月五日代碼清單：快樂(lè)的奔兒照片之一快樂(lè)的奔兒照片之二黑馬制作于二四年四月二十八日表格的嵌套一方面是為使頁(yè)面（貼子）的外觀更為漂亮，利用表格嵌套來(lái)編輯出復(fù)雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來(lái)做精確的編排，或者二者兼而有之。熟練地掌握表格的嵌套技巧并不是很困難的，只要你思路清晰，對(duì)表格的整體嵌套構(gòu)架做到心中有數(shù)，在實(shí)際編輯時(shí)就不會(huì)出亂，發(fā)布出來(lái)的作品也就不會(huì)只是一堆代碼?，F(xiàn)從最簡(jiǎn)單的表格嵌套開(kāi)始演示和講解，不會(huì)太難的。兩張表格的嵌套：代碼如下（紅色的為第二張表格的代碼）： Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table) 從上面的代碼中，我們看得出來(lái)，第二張表格代碼包含在第一張表格代碼中的和里面，這一點(diǎn)一定要弄清楚。不然，終止符不正確或缺少時(shí)，由于系統(tǒng)的容錯(cuò)性不好、自動(dòng)修正功能不夠智能化等問(wèn)題，效果將會(huì)很糟糕，錯(cuò)誤太嚴(yán)重的話還會(huì)使瀏覽器在運(yùn)算的時(shí)候進(jìn)入死循環(huán)而造成機(jī)器當(dāng)機(jī)。下面是三個(gè)表格的嵌套代碼及效果，由于表格里沒(méi)有內(nèi)容，所以，黑馬指定了三級(jí)表格的高度。代碼中，每一個(gè)表格的代碼用一種顏色來(lái)區(qū)分。代碼： 一般來(lái)說(shuō)，只要結(jié)構(gòu)清晰，再多的表格嵌套也是一樣操作的。再次提示：不管是多少?gòu)埍砀袂短?，一定要注意起始?biāo)識(shí)符的正確性，稍有點(diǎn)錯(cuò)誤，系統(tǒng)會(huì)自動(dòng)幫你更正，但更正的效果或許不是你所需的，而且，一旦錯(cuò)誤太多，系統(tǒng)的自動(dòng)更正也無(wú)能為力。先來(lái)看看以下表格：你應(yīng)該可以看得出來(lái)，上表中有一個(gè)一級(jí)表格（父表格），里面有兩個(gè)二級(jí)表格（子表格），二級(jí)表格一上一下，位置十分清楚。如果你愿意，你還可以在二級(jí)表格里再嵌套次級(jí)別的表格?，F(xiàn)在我們來(lái)看代碼，每一種顏色的文字代碼一個(gè)表格的完整代碼，注意觀察起始標(biāo)識(shí)符號(hào)的前后關(guān)系。 這種方式的嵌套可以讓你有更多的創(chuàng)意，比如，上面的二級(jí)表格里放置一個(gè)背景圖并用透明Flash動(dòng)畫(huà)來(lái)修飾它，下面一個(gè)表格里放置滾動(dòng)圖文，總之，發(fā)揮你的想象力，充分利用這種格式制作出令人贊嘆的效果來(lái)！與上一講的嵌套效果相比，我們可以明顯地看到：上面表格中的兩個(gè)二級(jí)表格是并列放在父表里的。如何做到這個(gè)效果呢？首先，在父表格里，我們用兩次“”將父表分隔成左右各一半，即父表是一個(gè)有一行兩列的表格。其次，我們?cè)诟副淼淖?、右單元格里分別放置一個(gè)表格，就形成了以上效果。請(qǐng)研究以下代碼清單，為了區(qū)分層次，把每一個(gè)表格的代碼用一種顏色表示，請(qǐng)?zhí)貏e注意父表的代碼： 上述代碼里，定義了二級(jí)表格的高度，在實(shí)際使用中，你可以根據(jù)情況定義或不定義，但要注意兩個(gè)子表格的高度要一致，否則就很難看。此外，表格的border值要不要應(yīng)該根據(jù)實(shí)際需要而定，之所以定義為4，是為了使效果更加明顯。表格是HTML文檔里的元素之一，它還可以是容器，因此，表格里甚至是表格的單元格里又有表格是正常的，我們就是充分利用這一特點(diǎn)來(lái)裝飾我們的文檔（或貼子）。第五講的三個(gè)講義專(zhuān)門(mén)研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我們都應(yīng)該學(xué)會(huì)了。講義里的例子是簡(jiǎn)單的，但它們已經(jīng)將表格的嵌套結(jié)構(gòu)展示完畢，在這個(gè)基礎(chǔ)上，我們可以制作出復(fù)雜而美觀的貼子來(lái)。所有多層次嵌套及嵌套中的嵌套都是通過(guò)一個(gè)又一個(gè)簡(jiǎn)單的嵌套來(lái)實(shí)現(xiàn)的，這就看你的了。表格應(yīng)用在這里向大家演示蛋殼藝術(shù)的制作過(guò)程。蛋殼藝術(shù)曾在貼圖天下發(fā)布，這里，為了便于講解，帖子代碼與原來(lái)的帖子有所區(qū)別。以下代碼得出帖子的總體框架。思路是，先制作一張父表，這張父表頭尾部分有帖子標(biāo)題及簽名，標(biāo)題的下方和簽名的上方各加一條分隔線(語(yǔ)法：)。蛋殼藝術(shù)黑馬制作蛋殼藝術(shù)靈子制作以上第一步得出的效果已經(jīng)差不多了，接下來(lái)要做的是在兩個(gè)分隔符的中間加上核心內(nèi)容。我曾想用的方式把蛋殼圖片一一放上去，考慮到這樣做會(huì)使帖子很長(zhǎng)，就想到用marquee語(yǔ)句令圖片自下而上滾動(dòng)；又考慮到img語(yǔ)句得出的圖片觀賞者可以用鼠標(biāo)滾輪控制圖片大小這樣對(duì)帖子的整體效果是有一定的影響的，因此，想把圖片一張一張地以表格的背景圖的形式體現(xiàn)出來(lái)。下面是核心部分的代碼，放置在上面代碼的兩個(gè)之間：整體效果如下：接著放置背景音樂(lè)，帖子的制作就算完成了。蛋殼藝術(shù)是一個(gè)很簡(jiǎn)單的帖子。請(qǐng)記?。簭?fù)雜是簡(jiǎn)單的組合。只要你會(huì)很多簡(jiǎn)單的東西，你就可以做出復(fù)雜的效果。表格應(yīng)用篇(二)本講要點(diǎn)：一、給表格添加背景圖片；二、給表格添加背景特效。細(xì)心的朋友一打開(kāi)本節(jié)講義應(yīng)該立刻發(fā)現(xiàn)：本講有大小不同但分布均勻的花朵，這是怎么回事呢？原來(lái)，這是用了一個(gè)寬度為100%的表格，邊框、邊距、單元格間距都設(shè)置為0，所以大家在這里看不到表框。其語(yǔ)法如下：仔細(xì)看一下上面的代碼，大家不難發(fā)現(xiàn)，給表格插入背景圖片的語(yǔ)句是放在之內(nèi)的，語(yǔ)法為：background=圖片地址此句放在里面的什么地方事實(shí)上不重要（雖然系統(tǒng)對(duì)其位置是有要求的），系統(tǒng)會(huì)自動(dòng)調(diào)整，只要放在里面就行。在表格里放置背景圖片就這么簡(jiǎn)單，相信你已經(jīng)學(xué)會(huì)了。當(dāng)然，你應(yīng)該根據(jù)需要選擇好圖片，一般來(lái)說(shuō)，背景圖片的寬度與高度要么在500以內(nèi)，要么就很小很小，且注意設(shè)置表格的寬度。這里黑馬想提示大家的是，當(dāng)你選擇的背景圖片寬度接近500時(shí)，表格的寬度則應(yīng)該設(shè)置為圖片的寬度；如果背景圖片很小很小，則根據(jù)你的需要設(shè)置表格的寬度為500以內(nèi)。另外，當(dāng)表格的邊框、單元格的間距和邊距都設(shè)有實(shí)值時(shí)，它們的值也要考慮好，因?yàn)椋?00600的顯示分辨率下，論壇的帖子可視部分的寬度最多500個(gè)象素，寬度表格的寬度加上各種元素的寬度加起來(lái)不應(yīng)該超過(guò)500。單擊以下這幅圖，IE會(huì)開(kāi)啟另一個(gè)頁(yè)面打開(kāi)它，請(qǐng)右擊圖片選屬性，查看一下圖片的寬度和高度，確定退出。/uploadFile/2004/06/12/4YsmnraMFM194935lili056.jpg是的，這張圖片的尺寸為450338，那么，我們的表格也應(yīng)該是這個(gè)尺寸，即寬為450，高為338，請(qǐng)看下面代碼：上面的代碼效果如下：可能有的朋友會(huì)說(shuō)，這與用發(fā)圖沒(méi)區(qū)別呀！呵呵，有的，你試試看能不能用鼠標(biāo)滾輪調(diào)整圖片的大小。不行吧？注意：這張圖是以背景圖片的形式顯示出來(lái)的，而不是以img形式發(fā)布的。由于表格的border及單元格邊距和間距設(shè)置為0，所以看不到表格的邊框和其他表格特征，但它確實(shí)是一張包含背景圖片的表格！同時(shí)也請(qǐng)朋友們注意內(nèi)的align=center一句，它的作用是使表格居中，這是令表格居中的最簡(jiǎn)單的方法。為什么給表格加個(gè)背景圖而不是直接用IMG發(fā)圖呢？原因很簡(jiǎn)單：我們要給這張圖片加一個(gè)特效。這個(gè)特效不能加在用IMG方式所發(fā)的圖片之上，因?yàn)橛肐MG方式發(fā)的圖片是作為一個(gè)占用空間的元素出現(xiàn)的，而表格的背景圖則不同，它“寄生”于表格，相當(dāng)于表格的底色，我們可以在這個(gè)底色之上放其他的東西，比如文字、Flash影片等等。我們這里所說(shuō)的特效指的是在一個(gè)有背景圖片的表格上以透明方式套用Flash影片。所用的Flash影片其底色是純色的，通過(guò)透明處理，影片只顯示動(dòng)畫(huà)部分，底色則屏蔽掉。語(yǔ)法不算太復(fù)雜，格式如下（紅色部分為用戶填寫(xiě)的內(nèi)容）：這個(gè)語(yǔ)句放在和之間。比如，我們?cè)谏厦娴谋砀翊a里插入一段套用Flash影片的代碼，將使得效果與上表有明顯的區(qū)別。代碼和效果如下：小結(jié)：通過(guò)本節(jié)的學(xué)習(xí)，我們掌握了如何給表格加背景圖并給表格加個(gè)透明的Flash動(dòng)畫(huà)效果。在此基礎(chǔ)上，通過(guò)表格的里外嵌套和多個(gè)Flash透明效果，必要時(shí)再加上修飾合理的優(yōu)美的文字，你的貼子就非常精彩了。HTML之表格應(yīng)用篇(三) 充分利用表格的單元格能夠做出一些意想不到的效果。事實(shí)上，表格的組成元素中，可視部分的核心元素就是單元格，它由表線規(guī)范起來(lái)，成為一個(gè)個(gè)可裝載各種內(nèi)容的容器。在一個(gè)表格里，作為容器的單元格可以是多個(gè)的，也可以只是一個(gè)。此前我們所講的表格嵌套，基本上是由一個(gè)父表格加上若干個(gè)并列關(guān)系或從屬關(guān)系的子表格組合而成，而這次，我們將討論一個(gè)含有多個(gè)單元格的表格的實(shí)現(xiàn)方法以及單元格里與其他表格的嵌套問(wèn)題。在HTML語(yǔ)法中，單元格由是這樣實(shí)現(xiàn)的：要加載的內(nèi)容以上語(yǔ)法不能獨(dú)立使用，它們必須放在和之間。和之間可以有多個(gè)即多個(gè)單元格，和之間又可以有多個(gè).構(gòu)成一行中的單元格。單元格里又可以加載各種合法的內(nèi)容。比如，我們可以在上面的“要加載的內(nèi)容”里加上另外的表格(子表格)，就形成了表格的高級(jí)嵌套，組合出相對(duì)復(fù)雜的效果。我們先來(lái)看看一個(gè)簡(jiǎn)單的多單元格的表格實(shí)例：這個(gè)是33的表格，即，有9個(gè)單元格的表格。完整代碼如下：1 2 3 4 5 6 7 8 9 你會(huì)說(shuō)：這有什么？這只不過(guò)是一個(gè)普普通通的表格。呵呵，是的，它是一個(gè)普通的表格，而且很簡(jiǎn)單。但還是請(qǐng)你看看下面表格的效果，它只是在上面表格的基礎(chǔ)上做了些更改：你可能又會(huì)說(shuō)：這也沒(méi)什么呀！不過(guò)是把border等值設(shè)置為0，把單元格的高度和單元格的顏色改變了而已。是的。但是，如果我把第五個(gè)單元格里的bgcolor=改為background=，再加載相應(yīng)內(nèi)容，它的外觀就大為不同了 從上面表格中應(yīng)該可以看出：我們是在第5個(gè)單元格里再嵌套一個(gè)帶有背景圖的表格，這才是本節(jié)的核心內(nèi)容。全部代碼如下： 小結(jié)：一、本講介紹用HTML制作多單元格的表格，表格中的每一行由.組成，.里用.構(gòu)成單元格，有多少個(gè).，一行里就有多少列，有多少個(gè).，表格就有多少行。二、在.的省略號(hào)部分，我們可以加載所需內(nèi)容，當(dāng)我們加載一個(gè)完整的.語(yǔ)法時(shí)，我們實(shí)際上是在一個(gè)單元格里嵌套了一張表格。 表格的并列組合這一講我們來(lái)討論表格的并列組合。所謂并列組合，就是表與表之間的關(guān)系不是從屬關(guān)系，亦即，它們不是嵌套在一起的，而是以并排或上下的形式組合在一起。為了容易規(guī)范以并列關(guān)系組合起來(lái)的表格整體，我們把這些組合起來(lái)的表格放在一個(gè)表格里面，因此，本講依然與表格的嵌套有關(guān)，只是，表格的嵌套不再是本講的主要內(nèi)容。三個(gè)并排起來(lái)的表格并不難以實(shí)現(xiàn)。以下的三個(gè)表格實(shí)例是緊密并排在一塊的，它們都是子表格，換句話說(shuō)，它們是放在一張父表里。請(qǐng)研究一下表格效果與代碼： 表一表二(單元格1)表二(單元格2)表三 上面的表格實(shí)例應(yīng)該說(shuō)是一目了然的。表一和表三分別位于左邊和右邊，它們只是一個(gè)非常簡(jiǎn)單的表格；表二有兩個(gè)高度不一致的單元格，位于表一和表三之間。這三個(gè)表格以典型的并排關(guān)系組合在一起，它們作為套在一個(gè)父表里的子表格，其相互間的關(guān)系是并列的而不是從屬的(不過(guò)它們一起從屬于其所在的父表格)。表格代碼的易讀性也很理想，只有兩個(gè)地方需要說(shuō)明：一是，表二第二個(gè)單元格的高度設(shè)置為118，這是因?yàn)?，表二的邊框我們?cè)O(shè)置為1，既然表里有兩個(gè)單元格，單元格的邊框占用兩個(gè)單位(即2)，那么，從整齊角度出發(fā)，這個(gè)單元格的高度需要減去2。事實(shí)上，寬度也應(yīng)該這么計(jì)算的，雖然代碼中并未做相應(yīng)處理；二是，三個(gè)表格我們都用了align=left來(lái)規(guī)定位置，而不是我們想當(dāng)然的一個(gè)用left，一個(gè)用center，