HTML之表格篇——表格的嵌套

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。

下面将从最简单的表格嵌套开始演示和讲解，不会太难的。

两张表格的嵌套：

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>

更多相关文章

随机推荐