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

547217255的博客

 
 
 

日志

 
 

表格应用示例二  

2014-06-14 23:19:00|  分类: 表格应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如果你还没有熟悉到一看代码就明白,你有必要看一下下面的分析。

本例有四层表格的嵌套,总共使用了六张表格。最里层是三张表格上下排列,属表格组合。我们从外往里分析代码。

最外层的表格,我们设置边框值为1并定义其颜色,这样,配合<td>的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距(cellpadding)为20,它恰好形成了帖子外边框。外表的宽度为600个像素,这是根据本页面而设置的,你可以在实际使用时更改。

第二层表格的原理和外层的差不多,只是,我们更改了各元素的颜色,单元格衬距也调小了,cellpadding赋值为10。

第三层表格没有做太多的设置,我们仅令其背景色为白色、单元格衬距为10,这样得出一个白色的边框。

第四层表格有三个上下并列组合的表格。第一个用来放帖子的标题;第二个表格只是用于隔开第一个和第三个表格并令之与第三层白色底的表格连为一体,为此它的border、cellpading和cellspacing都需要设置为0,高度则为10(与第三层表格所形成的边框一致);第三个表格用于放置帖子的内容,故将其单元格间距设置为10(也可设置单元格衬距),以便让文字等内容不至于太靠边。

本例帖子里的代码,黑马采用了缩退方式编写,意在让大家能够清楚的看到不同的代码代表不同层的表格,越缩进的代码越在里层(非表格代码和自动换行的除外)。

这个示例只是展现一种思路,你完全可以在此基础上通过其他手段(如添加表格背景图片、加入动态的图形和Flash影片等)做得更复杂、更精美一些。

<table border=0 cellpadding=20 cellspacing=0 background="yyr/lvsedw.jpg" align=center><tbody><tr><td>

<table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=blue width=84% align=center><tbody><tr><td>

<table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width="100%"><tbody><tr><td>

<table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table background=yyr/lvsedn.jpg width=350><tbody><tr><td>
<p align=center>此处放一幅与标题相关的图片</p>
<p align=center>标 题</p>
<p align=center>分隔图标</p>
<p align=center>【这里是正文,由六幅图和五段诗文组成】</p>
<p align=center>分隔图标</p>
<p align=center>签 名</p>
<p align=center>小图修饰+音乐标签</p>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>

 表格应用示例二 - 547217255 - 547217255的博客

此处放一幅与标题相关的图片

标 题

分隔图标

【这里是正文,由六幅图和五段诗文组成】

分隔图标

签 名

小图修饰+音乐标签

  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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