表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的,只要你思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。
博客教材将从最简单的表格嵌套开始演示和讲解,不会太难的。
两张表格的嵌套:
【博客教材】欢迎您的光临
|
|
代码:
<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>
一般来说,只要结构清晰,再多的表格嵌套也是一样操作的。博客教材再次提示:不管是多少张表格嵌套,一定要注意起始标识符的正确性,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力
你应该可以看得出来,上表中有一个一级表格(父表格),里面有两个二级表格(子表格),二级表格一上一下,位置十分清楚。如果你愿意,你还可以在二级表格里再嵌套次级别的表格。
现在我们来看代码,每一种颜色的文字代码一个表格的完整代码,注意观察起始标识符号的前后关系。
<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>
这种方式的嵌套可以让你有更多的创意,比如,上面的二级表格里放置一个背景图并用透明Flash动画来修饰它,下面一个表格里放置滚动图文,总之,发挥你的想象力,充分利用这种格式制作出令人赞叹的效果来!
表格的嵌套(三)
与上一讲的嵌套效果相比,我们可以明显地看到:上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢?
首先,在父表格里,我们用两次“<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>
上述代码里,博客教材定义了二级表格的高度,在实际使用中,你可以根据情况定义或不定义,但要注意两个子表格的高度要一致,否则就很难看。此外,表格的border值要不要应该根据实际需要而定,博客教材之所以定义为4,是为了使效果更加明显。
表格是HTML文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。
第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了 !
评论