2023年12月6日發(作者：離職申請格式)
HTML表格邊框制作教程
作者：靈子
表格以
| Hello Table |
效果如下：
Hello Table
表格邊框的修飾
上一講我們講到border屬性，border即為邊框，除了有粗細的數值定義以外，還有其他的屬性哦。我們先來看看亮邊框的顏色和暗邊框的顏色設置。亮邊框記作bordercolorlight，暗邊框記作bordercolordark。它們的數值可以用red、green、blue等表達，也可以用#11ee00這樣的方式來表達，比如：bordercolorlight=red，bordercolorlight=#808000。請看下面的表格：
以上表格的全部代碼清單如下：
| Hello Table |
上表中，左、上邊框是亮邊框，右、下邊框為暗邊框。怎么樣？這么一修飾就好看多了吧？
邊框顏色方面還有一個屬性：bordercolor。當同時設置了暗、亮邊框的顏色，bordercolor的顏色設置是多余的，這一點應該注意。現在我們用bordercolor來設置一下表格邊框，看看有什么效果：
Hello Table
代碼清單：
| Hello Table |
上面我們學習的有關表格邊框顏色的設置，下面繼續跟我學習表格邊框其他方面的知識。
內容不多了，還講兩個表格邊框的屬性：一是邊框線（cellpadding）粗細和邊框空白處的大小，取值范圍從0開始，用正整數。下面是代碼和表格效果：
| Hello Table 邊框線:2 ，邊框空白處:8 |
Hello Table 邊框線:2 ，邊框空白處:8
表格背景的修飾
默認情況下，HTML網頁里表格的背景色是白色的。這顯然不總是符合我們的要求，我們通常會設置各種背景顏色，以配合網頁或貼子主題。
設置表格的背景色很簡單，給其bgcolor屬性賦值即可，寫作bgcolor=數值，其數值取值方式和上一講講到的邊框顏色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor屬性應該放置在表格初始符<>當中。下面舉個實例，先是代碼，后是效果：
|
背景色：bgcolor=#CCCC00
暗邊框顏色：#008000
亮邊框顏色：#008060
|
[注一：代碼中用上了設置字體對齊方式，在
來定義左對齊，這種方式的定義無需終止標識符，而定義字體的那句則需要在結束字體定義處有終止標識符號。]
[注二：細心的朋友可能已經發現，表格代碼里多了一組
……，這是怎么回事呢？又是什么意思呢？在純粹的HTML表格里本來可以不要這個的，但論壇有論壇的語法規范，它用來定義表格體，如果沒有，系統也會自動在
除了使用背景色，我們還可以使用圖片來修飾表格背景，應該說，用圖片來修飾表格的外觀會更漂亮得多。不過應該注意，用來作表格背景圖的文件不要太大，太大了打開網頁速度較慢，圖片的尺寸方面，要么是有規則圖案的小圖片，要么就是和表格大小相一致的，否則做出的表格也不會有理想的外觀效果。下面我們在上面表格的基礎上，用這幅圖來作表格的背景圖片：
-500)=-500;" border=0>
代碼及效果如下：
代碼(紅色那句就是加背景圖的語法，放在
|
背景色：bgcolor=#CCCC00
暗邊框顏色：#008000
亮邊框顏色：#008060
|
效果：
表格內容的編輯
由于本講涉及到一些編輯排版、字體修飾等語法，黑馬先來簡單介紹一下這些常用到的語法格式。
：強制換行，效果等價于在Design模式下的組合鍵 Shift+Enter。
…：字體加粗，與…效果一致。
…：下劃線。
…：斜體字。
：對齊方式，值取left，right，center。
下面黑馬以一個實例代碼和效果來演示如何在表格中編排內容。先來看看效果：
快樂的奔兒照片之一
-500)=-500;">
作于二○○六年二月五日
代碼清單：
| 快樂的奔兒照片之一
src="/admin/../../admin/uploadpic/"> 快樂的奔兒照片之二
黑馬制作于二○○四年四月二十八日 |
表格的嵌套一方面是為使頁面（貼子）的外觀更為漂亮，利用表格嵌套來編輯出復雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來做精確的編排，或者二者兼而有之。熟練地掌握表格的嵌套技巧并不是很困難的，只要你思路清晰，對表格的整體嵌套構架做到心中有數，在實際編輯時就不會出亂，發布出來的作品也就不會只是一堆代碼。
現從最簡單的表格嵌套開始演示和講解，不會太難的。
兩張表格的嵌套：
代碼如下（紅色的為第二張表格的代碼）：
| Table No.1(Father Table)
Table No.1(Father Table)
|
從上面的代碼中，我們看得出來，第二張表格代碼包含在第一張表格代碼中的
下面是三個表格的嵌套代碼及效果，由于表格里沒有內容，所以，黑馬指定了三級表格的高度。代碼中，每一個表格的代碼用一種顏色來區分。
代碼：
|
|
一般來說，只要結構清晰，再多的表格嵌套也是一樣操作的。再次提示：不管是多少張表格嵌套，一定要注意起始標識符的正確性，稍有點錯誤，系統會自動幫你更正，但更正的效果或許不是你所需的，而且，一旦錯誤太多，系統的自動更正也無能為力。
先來看看以下表格：
你應該可以看得出來，上表中有一個一級表格（父表格），里面有兩個二級表格（子表格），二級表格一上一下，位置十分清楚。如果你愿意，你還可以在二級表格里再嵌套次級別的表格。
現在我們來看代碼，每一種顏色的文字代碼一個表格的完整代碼，注意觀察起始標識符號的前后關系。
|
|
這種方式的嵌套可以讓你有更多的創意，比如，上面的二級表格里放置一個背景圖并用透明Flash動畫來修飾它，下面一個表格里放置滾動圖文，總之，發揮你的想象力，充分利用這種格式制作出令人贊嘆的效果來！
與上一講的嵌套效果相比，我們可以明顯地看到：上面表格中的兩個二級表格是并列放在父表里的。如何做到這個效果呢？
首先，在父表格里，我們用兩次“
|
|
|
上述代碼里，定義了二級表格的高度，在實際使用中，你可以根據情況定義或不定義，但要注意兩個子表格的高度要一致，否則就很難看。此外，表格的border值要不要應該根據實際需要而定，之所以定義為4，是為了使效果更加明顯。
表格是HTML文檔里的元素之一，它還可以是容器，因此，表格里甚至是表格的單元格里又有表格是正常的，我們就是充分利用這一特點來裝飾我們的文檔（或貼子）。
第五講的三個講義專門研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我們都應該學會了。講義里的例子是簡單的，但它們已經將表格的嵌套結構展示完畢，在這個基礎上，我們可以制作出復雜而美觀的貼子來。所有多層次嵌套及嵌套中的嵌套都是通過一個又一個簡單的嵌套來實現的，這就看你的了。
表格應用
在這里向大家演示《蛋殼藝術》的制作過程。《蛋殼藝術》曾在貼圖天下發布，這里，為了便于講解，帖子代碼與原來的帖子有所區別。
以下代碼得出帖子的總體框架。思路是，先制作一張父表，這張父表頭尾部分有帖子標題及簽名，標題的下方和簽名的上方各加一條分隔線(語法：
| 蛋殼藝術 黑馬制作 |
蛋殼藝術
靈子制作
以上第一步得出的效果已經差不多了，接下來要做的是在兩個分隔符的中間加上核心內容。我曾想用的方式把蛋殼圖片一一放上去，考慮到這樣做會使帖子很長，就想到用marquee語句令圖片自下而上滾動；又考慮到img語句得出的圖片觀賞者可以用鼠標滾輪控制圖片大小——這樣對帖子的整體效果是有一定的影響的——，因此，想把圖片一張一張地以表格的背景圖的形式體現出來。
下面是核心部分的代碼，放置在上面代碼的兩個
整體效果如下：
接著放置背景音樂，帖子的制作就算完成了。
《蛋殼藝術》是一個很簡單的帖子。請記住：復雜是簡單的組合。只要你會很多簡單的東西，你就可以做出復雜的效果。
表格應用篇(二)
本講要點：
一、給表格添加背景圖片；
二、給表格添加背景特效。
細心的朋友一打開本節講義應該立刻發現：本講有大小不同但分布均勻的花朵，這是怎么回事呢？原來，這是用了一個寬度為100%的表格，邊框、邊距、單元格間距都設置為0，所以大家在這里看不到表框。其語法如下：
仔細看一下上面的代碼，大家不難發現，給表格插入背景圖片的語句是放在
上面的代碼效果如下：
可能有的朋友會說，這與用發圖沒區別呀！呵呵，有的，你試試看能不能用鼠標滾輪調整圖片的大小。不行吧？注意：這張圖是以背景圖片的形式顯示出來的，而不是以img形式發布的。由于表格的border及單元格邊距和間距設置為0，所以看不到表格的邊框和其他表格特征，但它確實是一張包含背景圖片的表格！
同時也請朋友們注意
| 和 | 之間。比如，我們在上面的表格代碼里插入一段套用Flash影片的代碼，將使得效果與上表有明顯的區別。代碼和效果如下：
| |
小結：通過本節的學習，我們掌握了如何給表格加背景圖并給表格加個透明的Flash動畫效果。在此基礎上，通過表格的里外嵌套和多個Flash透明效果，必要時再加上修飾合理的優美的文字，你的貼子就非常精彩了。
HTML之表格應用篇(三)
充分利用表格的單元格能夠做出一些意想不到的效果。事實上，表格的組成元素中，可視部分的核心元素就是單元格，它由表線規范起來，成為一個個可裝載各種內容的容器。在一個表格里，作為容器的單元格可以是多個的，也可以只是一個。此前我們所講的表格嵌套，基本上是由一個父表格加上若干個并列關系或從屬關系的子表格組合而成，而這次，我們將討論一個含有多個單元格的表格的實現方法以及單元格里與其他表格的嵌套問題。
在HTML語法中，單元格由是這樣實現的：
以上語法不能獨立使用，它們必須放在
我們先來看看一個簡單的多單元格的表格實例：
這個是3×3的表格，即，有9個單元格的表格。完整代碼如下：
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
你會說：這有什么？這只不過是一個普普通通的表格。呵呵，是的，它是一個普通的表格，而且很簡單。但還是請你看看下面表格的效果，它只是在上面表格的 基礎上做了些更改：
你可能又會說：這也沒什么呀！不過是把border等值設置為0，把單元格的高度和單元格的顏色改變了而已。
是的。但是，如果我把第五個單元格
從上面表格中應該可以看出：我們是在第5個單元格里再嵌套一個帶有背景圖的表格，這才是本節的核心內容。全部代碼如下：
|
| |||
小結：
一、本講介紹用HTML制作多單元格的表格，表格中的每一行由
二、在
表格的并列組合
這一講我們來討論表格的并列組合。所謂并列組合，就是表與表之間的關系不是從屬關系，亦即，它們不是嵌套在一起的，而是以并排或上下的形式組合在一起。為了容易規范以并列關系組合起來的表格整體，我們把這些組合起來的表格放在一個表格里面，因此，本講依然與表格的嵌套有關，只是，表格的嵌套不再是本講的主要內容。
三個并排起來的表格并不難以實現。以下的三個表格實例是緊密并排在一塊的，它們都是子表格，換句話說，它們是放在一張父表里。請研究一下表格效果與代碼：
|
|
上面的表格實例應該說是一目了然的。表一和表三分別位于左邊和右邊，它們只是一個非常簡單的表格；表二有兩個高度不一致的單元格，位于表一和表三之間。這三個表格以典型的并排關系組合在一起，它們作為套在一個父表里的子表格，其相互間的關系是并列的而不是從屬的(不過它們一起從屬于其所在的父表格)。表格代碼的易讀性也很理想，只有兩個地方需要說明：一是，表二第二個單元格的高度設置為118，這是因為，表二的邊框我們設置為1，既然表里有兩個單元格，單元格的邊框占用兩個單位(即2)，那么，從整齊角度出發，這個單元格的高度需要減去2。事實上，寬度也應該這么計算的，雖然代碼中并未做相應處理；二是，三個表格我們都用了align=left來規定位置，而不是我們想當然的一個用left，一個用center，另一個用right。原因很簡單：讓它們緊密靠在一起。
以上講的是讓幾個表格并排在一起的組合方法。下面講一講上下排列的組合方法。
我們以上面的表格實例當作一個表格單位(事實上它們是套在一張表格里面的，我們這樣看待它是未嘗不可的)，在它的下面再放置一張寬度和它一致的表格，從而組合成一個相對復雜的實例。為了便于觀察，我們先來看看即將使用的表格式樣：
這不是一個復雜的表格，我們在上一講已經熟悉它了。現在我們要做的是把這張表格與上面的組合表格整合起來。整合操作也不復雜，需要注意的是，我們需要有整體概念，隨時隨地地把任意一個組合體看成一個整體，而一個整體在某時它又只是一個組合體的成員。——呵呵，抽象吧？不要緊，關鍵是操作。
先看代碼：
|
代碼總是枯燥的，讀著讀著我們會頭暈。但是，要想深入研究，我們不得不讀代碼。代碼與實效結合起來，閱讀起來會容易一些：
我們已經知道，表格可以有背景圖，表格的單元格也可以有背景圖，那么，如果我們制作或找到合適的圖片，分別用作表一、表二單元格1、表三、表四單元格1表四單元格3、表四單元格4、表四單元格5和表四單元格6的背景，再將所有表格的border等值取值為0，然后在表二單元格2和表四單元格2放置其他內容，得出的組合效果就相當完美，你甚至不能看出它是一個表格組合。看看——
本講主要講述表格的并列組合。在網頁制作中，表格經常用于整體布局之用，它們就是以并列+嵌套的方式組合起來的，制作帖子也大量使用表格的并列+嵌套 形式的組合。通過觀察表格組合的實例和分析代碼，相信大家會慢慢熟悉和掌握表格的組合與嵌套的高級應用。
特效代碼——
|
本文發布于:2023-12-06 16:30:17，感謝您對本站的認可！
本文鏈接：http://www.newhan.cn/zhishi/a/1701851417237653.html
版權聲明：本站內容均來自互聯網，僅供演示用，請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系，我們將在24小時內刪除。
本文word下載地址：HTML表格邊框制作教程.doc
本文 PDF 下載地址：HTML表格邊框制作教程.pdf
| 留言與評論（共有 0 條評論） |
