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>
html表格元素<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论