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

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

兩張表格的嵌套：

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>里面，這一點一定要弄清楚。不然，終止符不正確或缺少時，由于系統的容錯性不好、自動修正功能不夠智能化等問題，效果將會很糟糕，錯誤太嚴重的話還會使瀏覽器在運算的時候進入死循環而造成機器當機。

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




代碼：

<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之表格篇——表格的嵌套（二）

先來看看以下表格：

?

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

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

<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>”將父表分隔成左右各一半，即父表是一個有一行兩列的表格。其次，我們在父表的左、右單元格里分別放置一個表格，就形成了以上效果。請研究以下代碼清單，為了區分層次，黑馬把每一個表格的代碼用一種顏色表示，請特別注意父表的代碼：

<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>

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。