登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

套嵌表格的制作技巧  

2011-09-10 08:13:40|  分类: 表格制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 


●江苏省博友链接专区

●上海市博友链接专区

●北京市博友链接专区

●广东省博友链接专区

●黑龙江博友链接专区

●湖北省博友链接专区

●江西省博友链接专区

●河北省博友链接专区

●辽宁省博友链接专区

●吉林市博友链接专区

●安徽省博友链接专区

●浙江省博友链接专区

●云南省博友链接专区

●贵州省博友链接专区

●新疆博友链接专区

●山东省博友链接专区

●山西省博友链接专区

●湖南省博友链接专区

●河南省博友链接专区

●陕西省博友链接专区

●福建省博友链接专区

●天津市博友链接专区

●内蒙古博友链接专区

●广西省博友链接专区

●重庆市博友链接专区

●海外兵团博友链接专区

●香港博友链接专区

●海南省博友链接专区

●甘肃省博友链接专区

●台湾省博友链接专区

●西藏博友链接专区

●宁夏博友链接专区

●未分组博友链接专区

 
套嵌表格的制作技巧
套嵌表格的制作技巧 - 幽谷星尘 - 人无癖不可与交,以其无深情也。  收集转编:幽谷星尘套嵌表格的制作技巧 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 

       所有日志 进入留言 加我博友 我的相册 进入主页

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

欢迎您的光临


欢迎您的光临

欢迎您的光临

 

 

 

 

 

 

 

代码如下(红色的为第二张表格的代码):
<table border=8 bordercolor=#0099cc width=100%>
<tbody>
<tr>
<td>【Good fun】欢迎您的光临
<table border=8 bordercolor=#ccffcc width=100%>
<tbody>
<tr>
<td><br>【Good fun】欢迎您的光临
<br></td>
</tr>
</tbody>
</table>【Good fun】欢迎您的光临
</td>
</tr>
</tbody>
</table>

     从上面的代码中,我们看得出来,第二张表格代码包含在第一张表格代码中的<td>和</td>里面,这一点一定要弄清楚。不然,终止符不正确或缺少时,由于系统的容错性不好、自动修正功能不够智能化等问题,效果将会很糟糕,错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。
    下面是三个表格的嵌套代码及效果,由于表格里没有内容,所以,Good fun指定了三级表格的高度。代码中,每一个表格的代码用一种颜色来区分。

 

 

代码:

<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>
    上述代码里,Good fun定义了二级表格的高度,在实际使用中,你可以根据情况定义或不定义,但要注意两个子表格的高度要一致,否则就很难看。此外,表格的border值要不要应该根据实际需要而定,博客教材之所以定义为4,是为了使效果更加明显。
     表格是HTML文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。
    第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了 ! 
 
绿色边框 - Good fun - Good fun博客
 

主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

您欣赏幽谷星尘的博文0 主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 秒啦!

谢谢您的光临,并请留下宝贵意见!

 
欢迎光临幽谷星尘家园
欢迎光临幽谷星尘家园
 
 

幽谷星尘家园欢迎你

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

                                                           各省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 1、 江苏省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。  2、上海市博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。  3、北京市博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 4、 广东省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 5、 黑龙江省博友链接专区

 excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 6、湖北省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 7、江西省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。  8、河北省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 9、辽宁省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 10、吉林省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 11、安徽省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 12、浙江省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 13、云南省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 14、贵州博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 15、新疆博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 16、山东省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 17、山西博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 18、湖南省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 19、河南省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 20、陕西省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 21、福建省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 22、天津博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 23、内蒙博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 24、广西博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 25、重庆博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 26、海外兵团连接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 27四川博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 28、香港博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 29、海南省博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 30、甘肃博友连接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 31、台湾博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 32、宁夏博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 33、西藏博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 34、无址博友链接专区

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 35、

excel动画教程 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 36、

 

主宰空间的命脉和财富【博友榜】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。点击更多精彩

 

  评论这张
 
阅读(692)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018