邊框制作 2010-01-17 23:59:12 閱讀81 評論0 字號:大中小 訂閱
表格的嵌套一方面是為使頁面(貼子)的外觀更為漂亮,利用表格嵌套來編輯出復(fù)雜而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格來做精確的編排,或者二者兼而有之。熟練地掌握表格的嵌套技巧并不是很困難的,只要你思路清晰,對表格的整體嵌套構(gòu)架做到心中有數(shù),在實(shí)際編輯時(shí)就不會出亂,發(fā)布出來的作品也就不會只是一堆代碼。
博客教材將從最簡單的表格嵌套開始演示和講解,不會太難的。
兩張表格的嵌套:
【博客教材】歡迎您的光臨
|
|
代碼:
<TR>
<TD>
<TABLE borderColor=#cc9966 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003300 height=200 width="100%" border=8>
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</table>
</td>
</tr>
</tbody>
</Table>
一般來說,只要結(jié)構(gòu)清晰,再多的表格嵌套也是一樣操作的。博客教材再次提示:不管是多少張表格嵌套,一定要注意起始標(biāo)識符的正確性,稍有點(diǎn)錯(cuò)誤,系統(tǒng)會自動幫你更正,但更正的效果或許不是你所需的,而且,一旦錯(cuò)誤太多,系統(tǒng)的自動更正也無能為力
你應(yīng)該可以看得出來,上表中有一個(gè)一級表格(父表格),里面有兩個(gè)二級表格(子表格),二級表格一上一下,位置十分清楚。如果你愿意,你還可以在二級表格里再嵌套次級別的表格。
現(xiàn)在我們來看代碼,每一種顏色的文字代碼一個(gè)表格的完整代碼,注意觀察起始標(biāo)識符號的前后關(guān)系。
<tbody><tr><td>
<table border=5 bordercolor=#ffcc00 width="100%" height=200>
<tbody><tr><td></td></tr></tbody>
</table>
<table border=5 bordercolor=#ffcc00 width="100%" height=200>
<tbody><tr><td></td></tr></tbody>
</table>
</td></tr></tbody>
</table>
這種方式的嵌套可以讓你有更多的創(chuàng)意,比如,上面的二級表格里放置一個(gè)背景圖并用透明Flash動畫來修飾它,下面一個(gè)表格里放置滾動圖文,總之,發(fā)揮你的想象力,充分利用這種格式制作出令人贊嘆的效果來!
表格的嵌套(三)
與上一講的嵌套效果相比,我們可以明顯地看到:上面表格中的兩個(gè)二級表格是并列放在父表里的。如何做到這個(gè)效果呢?
首先,在父表格里,我們用兩次“<td>……</td>”將父表分隔成左右各一半,即父表是一個(gè)有一行兩列的表格。其次,我們在父表的左、右單元格里分別放置一個(gè)表格,就形成了以上效果。請研究以下代碼清單,為了區(qū)分層次,博客教材把每一個(gè)表格的代碼用一種顏色表示,請?zhí)貏e注意父表的代碼:
<TABLE borderColor=#ccffcc width="100%" border=4>
<TBODY>
<TR>
<TD width="50%">
<TABLE borderColor=#666666 height=300 width="100%" border=4>
<TBODY><TR><TD></TD></TR></TBODY>
</TABLE>
</TD>
<TD width="50%">
<TABLE borderColor=#666666 height=300 width="100%" border=4>
<TBODY><TR><TD></TD></TR></TBODY>
</TABLE>
</TD>
</TR></TBODY>
</TABLE>
上述代碼里,博客教材定義了二級表格的高度,在實(shí)際使用中,你可以根據(jù)情況定義或不定義,但要注意兩個(gè)子表格的高度要一致,否則就很難看。此外,表格的border值要不要應(yīng)該根據(jù)實(shí)際需要而定,博客教材之所以定義為4,是為了使效果更加明顯。
表格是HTML文檔里的元素之一,它還可以是容器,因此,表格里甚至是表格的單元格里又有表格是正常的,我們就是充分利用這一特點(diǎn)來裝飾我們的文檔(或貼子)。
第五講的三個(gè)講義專門研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我們都應(yīng)該學(xué)會了。講義里的例子是簡單的,但它們已經(jīng)將表格的嵌套結(jié)構(gòu)展示完畢,在這個(gè)基礎(chǔ)上,我們可以制作出復(fù)雜而美觀的貼子來。所有多層次嵌套及嵌套中的嵌套都是通過一個(gè)又一個(gè)簡單的嵌套來實(shí)現(xiàn)的,這就看你的了 !