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

Good fun网易博客

图片文字素材库,时尚音乐,生活百科,精品博客

 
 
 

日志

 
 

教你怎样制作表格镶嵌  

2009-05-24 16:19:51|  分类: 博客制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

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

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


两张表格的嵌套:

【Good fun】欢迎您的光临

【Good fun】欢迎您的光临
【Good fun】欢迎您的光临

 

代码如下(红色的为第二张表格的代码):

<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 - .
相关文章
什么是代码及代码怎么用?
博客制作基础篇(一)
搏客制作高级篇
妙用起伏飞翔代码所产生的特殊效果
文字图片的链接必须学
给照片加上像框及几款精美相框
怎样为博客浏览器背景换上自己喜欢的图片
几款新颖的天气预报及添加方法
各类导航代码
特效图片合成代码
30多款访客停留计时器及代码
网易博客代码(QQ类)
精美日志边框【十七】
会动的顶区背景图


教你怎样制作表格镶嵌 - Good fun - .
  评论这张
 
阅读(4467)| 评论(21)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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