分享

教您制作表格嵌套

 昵称4247575 2011-01-09

教您制作表格嵌套

边框制作 2010-01-17 23:59:12 阅读81 评论0   字号: 订阅

 

引用蓝天教您制作表格嵌套

 

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

博客教材将从最简单的表格嵌套开始演示和讲解,不会太难的。

两张表格的嵌套:

【博客教材】欢迎您的光临

【博客教材】欢迎您的光临
【博客教材】欢迎您的光临
代码如下(绿色的为第二张表格的代码):

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
<tr>
<td>【博客教材】欢迎您的光临
<table border=8 bordercolor=#ccffcc width=100%>
<tbody>
<tr>
<td><br>【博客教材】欢迎您的光临
<br></td>
</tr>
</tbody>
</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>

一般来说,只要结构清晰,再多的表格嵌套也是一样操作的。博客教材再次提示:不管是多少张表格嵌套,一定要注意起始标识符的正确性,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力

 

 

表格的嵌套(二)

先来看看以下表格:

 

 

 


你应该可以看得出来,上表中有一个一级表格(父表格),里面有两个二级表格(子表格),二级表格一上一下,位置十分清楚。如果你愿意,你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码,每一种颜色的文字代码一个表格的完整代码,注意观察起始标识符号的前后关系。

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


这种方式的嵌套可以让你有更多的创意,比如,上面的二级表格里放置一个背景图并用透明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文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。

第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了 !

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多