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

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