|
|
本節(jié)舉一個表格嵌套的示例向大家展示帖子的制作過程。以下是本示例的參考代碼，這些代碼得出的是本示例的整體外觀效果，內容需要你自己往里添加，我添加的是此說明和本示例的代碼，純文字。
<table border=1 bordercolor=#363636 cellpadding=20 cellspacing=0 bgcolor=#dd6969 align=center width=600><tr><td bordercolor=#ff0000>
<table border=1 bordercolor=#696969 cellpadding=10 cellspacing=0 bgcolor=#aa1212 width="100%"><tr><td bordercolor=#aa1212>
<table border=0 cellpadding=10 cellspacing=0 bgcolor=#ffffff width="100%"><tr><td>
<table border=0 cellpadding=10 cellspacing=0 bgcolor=#dd6969 width="100%" height=40 align=center><tr><td>
<p align=center><font face=黑體 size=4 color=#ffcc00>標 題</font></p>
</td></tr></table>
<table border=0 cellpadding=0 cellspacing=0 width="100%" height=10 bgcolor=#ffffff><tr><td></td></tr></table>
<table border=0 cellpadding=0 cellspacing=10 bgcolor=#393939 width="100%" height=450 align=center><tr><td valign=top>
<p><font color=#ffffff>內容</font></p>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table> | | | |
如果你還沒有熟悉到一看代碼就明白，你有必要看一下下面的分析。
本例有四層表格的嵌套，總共使用了六張表格。最里層是三張表格上下排列，屬表格組合。我們從外往里分析代碼。
最外層的表格，我們設置邊框值為1并定義其顏色，這樣，配合<td>的邊框顏色能夠起到外邊緣呈現(xiàn)出立體的感覺。外表的單元格襯距（cellpadding）為20，它恰好形成了帖子外邊框。外表的寬度為600個像素，這是根據(jù)本頁面而設置的，你可以在實際使用時更改。
第二層表格的原理和外層的差不多，只是，我們更改了各元素的顏色，單元格襯距也調小了，cellpadding賦值為10。
第三層表格沒有做太多的設置，我們僅令其背景色為白色、單元格襯距為10，這樣得出一個白色的邊框。
第四層表格有三個上下并列組合的表格。第一個用來放帖子的標題；第二個表格只是用于隔開第一個和第三個表格并令之與第三層白色底的表格連為一體，為此它的border、cellpading和cellspacing都需要設置為0，高度則為10（與第三層表格所形成的邊框一致）；第三個表格用于放置帖子的內容，故將其單元格間距設置為10（也可設置單元格襯距），以便讓文字等內容不至于太靠邊。
本例帖子里的代碼，黑馬采用了縮退方式編寫，意在讓大家能夠清楚的看到不同的代碼代表不同層的表格，越縮進的代碼越在里層（非表格代碼和自動換行的除外）。
這個示例只是展現(xiàn)一種思路，你完全可以在此基礎上通過其他手段（如添加表格背景圖片、加入動態(tài)的圖形和Flash影片等）做得更復雜、更精美一些。
|
