??表格的嵌套一方面是為使頁面（貼子）的外觀更為漂亮，利用表格嵌套來編輯出復(fù)雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來做精確的編排，或者二者兼而有之。熟練地掌握表格的嵌套技巧并不是很困難的，只要你思路清晰，對表格的整體嵌套構(gòu)架做到心中有數(shù)，在實(shí)際編輯時就不會出亂，發(fā)布出來的作品也就不會只是一堆代碼。

下面將從最簡單的表格嵌套開始演示和講解，不會太難的。

兩張表格的嵌套：

Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table)

代碼如下（紅色的為第二張表格的代碼）：

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
? ? <tr>
? ? ?<td>Table No.1(Father Table)
? ? ? ?<table border=8 bordercolor=#ccffcc width=100%>
?????<tbody>
??????<tr>
???????<td><br>Table No.2(Son Table)<br></td>
??????</tr>
?????</tbody>
????</table>
? ? ? ? Table No.1(Father Table)
? ? ?</td>
? ? </tr>
</tbody>
</table>

從上面的代碼中，我們看得出來，第二張表格代碼包含在第一張表格代碼中的<td>和</td>里面，這一點(diǎn)一定要弄清楚。不然，終止符不正確或缺少時，由于系統(tǒng)的容錯性不好、自動修正功能不夠智能化等問題，效果將會很糟糕，錯誤太嚴(yán)重的話還會使瀏覽器在運(yùn)算的時候進(jìn)入死循環(huán)而造成機(jī)器當(dāng)機(jī)。

下面是三個表格的嵌套代碼及效果，由于表格里沒有內(nèi)容，所以，黑馬指定了三級表格的高度。代碼中，每一個表格的代碼用一種顏色來區(qū)分。




代碼：

<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
??<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>
HTML之表格篇——表格的嵌套（二）

先來看看以下表格：

?

你應(yīng)該可以看得出來，上表中有一個一級表格（父表格），里面有兩個二級表格（子表格），二級表格一上一下，位置十分清楚。如果你愿意，你還可以在二級表格里再嵌套次級別的表格。

現(xiàn)在我們來看代碼，每一種顏色的文字代碼一個表格的完整代碼，注意觀察起始標(biāo)識符號的前后關(guān)系。

<table border=6 bordercolor=#888888 width="100%">
??<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>
HTML之表格篇——表格的嵌套（三）

與上一講的嵌套效果相比，我們可以明顯地看到：上面表格中的兩個二級表格是并列放在父表里的。如何做到這個效果呢？

首先，在父表格里，我們用兩次“<td>……</td>”將父表分隔成左右各一半，即父表是一個有一行兩列的表格。其次，我們在父表的左、右單元格里分別放置一個表格，就形成了以上效果。請研究以下代碼清單，為了區(qū)分層次，黑馬把每一個表格的代碼用一種顏色表示，請?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ù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的HTML之表格篇——表格的嵌套的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。