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

水帘洞主

腾飞的骏马

 
 
 

日志

 
 

【转载】木纹素材制作表格技巧  

2012-12-29 18:22:07|  分类: 表格制作导航 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自幽谷星尘《木纹素材制作表格技巧》

 

 

 

木纹素材制作表格技巧
编辑制作:幽谷星尘

  木纹素材制作表格技巧 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

 

一、背景图及代码

木纹素材制作表格技巧 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

(一)背景图代码:

<TABLE style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #808080 1px solid;

BORDER-LEFT: #808080 1px solid; WIDTH: 852px; BORDER-BOTTOM: #000000

1px solid; HEIGHT: 72px" cellSpacing=10 align=center background=http://img6.bimg.126.net/photo/KavxsBR7I2Lf8KU6ztdYeA=

=/1701516234216804104.jpg border=1>

(二)代码诠释:

1、<TABLE> 【表示属性为表格】

2、<style="BORDER-RIGHT: #000000 1px solid; >【表示表格(背景图)右边框颜色】

3、<BORDER-TOP: #808080 1px solid; >【表示表格(背景图)上边框颜色】

4、<BORDER-LEFT: #808080 1px solid; >【表示表格(背景图)左边框颜色】

5、<BORDER-BOTTOM: #000000 1px solid;> 【表示表格(背景图)下边框颜色】

6、<WIDTH: 852px; >【表示表格的绝对宽度】

7、<HEIGHT: 72px" >【表示表格的绝对高度】

8、<cellSpacing=10 >【表示表格线的厚度】

9、<align=center >【表示表格的文字是居中】

10、<background=http//:……>【表示表格的背景图片外部链接地址】

11、<border=1>【表示表格边框的厚度。注:不同的浏览器对数值的显示效果是不同的】

 

二、一行一列表格效果图:

 

(一)代码:

就是在背景图代码的基础上添加表格代码

<TABLE style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #808080 1px solid;

BORDER-LEFT: #808080 1px solid; WIDTH: 852px; BORDER-BOTTOM: #000000

1px solid; HEIGHT: 72px" cellSpacing=10 align=center background=http://img6.bimg.126.net/photo/KavxsBR7I2Lf8KU6ztdYeA=

=/1701516234216804104.jpg border=1>

<TBODY>
<TR align=middle>
<TD borderColorLight=#000000

background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>


(二)代码诠释:

1、<TR align=middle>【表示行或者换行】
2、<borderColorLight=#000000>【表格向光部分颜色(左边和上边)】

3、<background=http://……>【图片地址外表链接控制令】

4、borderColorDark=#808080>【表格背光部分颜色(右边和下边)】

5、 <TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD> 【完整的一个单元格代码】


 

三、两列表格效果图:

 

 

代码:
<TABLE style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #808080 1px solid;

BORDER-LEFT: #808080 1px solid; WIDTH: 852px; BORDER-BOTTOM: #000000 1px solid;

HEIGHT: 72px" cellSpacing=10 align=center

background=http://img6.bimg.126.net/photo/KavxsBR7I2Lf8KU6ztdYeA=

=/1701516234216804104.jpg border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>【第一个单元格】
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>【第二个单元格】

 </TR></TBODY></TABLE>

就是在第一个单元格代码的基础上再添加一个单元格代码,以此类推,添加结果

单元格代码,表格的属性就是几列

四、添加一列同时添加一行效果图:

 

 

代码:
<TABLE style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #808080 1px solid;

BORDER-LEFT: #808080 1px solid; WIDTH: 852px; BORDER-BOTTOM: #000000 1px solid;

HEIGHT: 72px" cellSpacing=10 align=center

background=http://img6.bimg.126.net/photo/KavxsBR7I2Lf8KU6ztdYeA=

=/1701516234216804104.jpg border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD></TR>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>

</TR></TBODY></TABLE>

五、多列多行表格效果图

代码:


<TABLE style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #808080 1px solid;

BORDER-LEFT: #808080 1px solid; WIDTH: 852px; BORDER-BOTTOM: #000000 1px solid;

HEIGHT: 72px" cellSpacing=10 align=center background=http://img6.bimg.126.net/photo/KavxsBR7I2Lf8KU6ztdYeA=

=/1701516234216804104.jpg border=1>
<TBODY>
<TR align=middle>【另起一行】
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD>
<TD borderColorLight=#000000 background=http://img396.ph.126.net/mDaAp0r22c2N2dyyfXpoHg=

=/1089308159871175510.jpg borderColorDark=#808080></TD></TR>

【上面绿色部分为五个单元格(列)构成完整一行的代码】如果想给表格添加行数,

就添加一组这样的代码,添加几组这样的代码,表格的属性就是几行

添加行代码

……

……

</TR></TBODY></TABLE>

 

 七、运用举例:

 

美女如云(6.13更新) - 色郎 - 美人窝 美女如云(6.13更新) - 色郎 - 美人窝 美女如云(6.15晚更新) - 色郎 - 美人窝 美女如云(6.16更新) - 色郎 - 美人窝

韩国第一模特 

诱惑写真 

 天使平野绫

 丽人张娜拉

美女如云(6.18更新) - 色郎 - 美人窝

美女如云(6.20更新) - 色郎 - 美人窝

美女如云(6.21更新) - 色郎 - 美人窝

美女如云(6.21更新) - 色郎 - 美人窝

性感纹身

 仙姐刘亦菲

 青春蔡卓妍

 梨花带雨

美女如云(6.21更新) - 色郎 - 美人窝

美女如云(6.21更新) - 色郎 - 美人窝

美女如云(6.21更新) - 色郎 - 美人窝

美女如云(6.14晚更新) - 色郎 - 美人窝

 乖乖女

 纯女夏川纯

 西女的魅力

 -林心如

 

 

 

 

页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

您欣赏幽谷星尘的博文0 页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 秒啦!

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

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

幽谷星尘家园欢迎你

 


 

  
 
 
 
 
 
 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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