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

不合时宜的博客

 
 
 

日志

 
 

【转载】表格边框代码应用(4)(5)(6)  

2014-07-13 15:54:49|  分类: 教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

表格边框代码应用(4)

 

表格应用实例(一)

 

    一、单列表格:

代码:

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果:

 

 

    二、双列表格:

代码:

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果:

 

 

          三、四列表格:

代码:

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果:

 

 

       四、首行合并,以下两列:

代码:

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>

<TR><TD align=center colSpan=2>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
</TR>

</TBODY></TABLE>

效果:

 

         

      五、首行合并,以下三列:

代码:

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=3>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%">

<A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%">

<A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%">

<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR>
<TD>

<A href="链接网址" target=_blank>文字</A></TD>
<TD>

<A href="链接网址" target=_blank>文字</A></TD>
<TD>

<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果

 

 

 

表格边框代码应用(5)

 

表格应用实例(二)

 

        当表格中只有一个单元格时,它实际就是一个日志边框。

一、颜色边框:

  1、单色框、透明背景、固定宽度的边框:

代码:

<TABLE borderColor=#0080ff  cellSpacing=5 cellPadding=5 

width=600 align=center border=10>

<TR><TD>日志内容</TD></TR>

</TABLE>

效果:

       说明:边框的高度可随日志内容进行调整。

 

  2、阴影边框、颜色背景、固定宽度的边框:

代码:

<TABLE cellSpacing=5 borderColorDark=#004B97

  cellPadding=5 width=600 align=center

bgColor=#660000 borderColorLight=#62B0FF border=10>

<TR><TD>日志内容</TD></TR>

</TABLE>

效果:

 

 

  3、双色边框、颜色背景、固定宽度的边框:

代码:

<TABLE borderColor=#0080ff  cellSpacing=5 cellPadding=5 

width=600 align=center bgColor=#660000 border=10>

<TR><TD borderColor=#ffffff>日志内容</TD></TR>

</TABLE>

效果:

 

          说明:<TD>标签中多了一个“borderColor=#ffffff”,表示内框线颜色。

                    

 

二、图片边框:

      1、图片边框、颜色背景、固定宽度的边框:

代码:

<TABLE cellSpacing=15  width=600 
background=图片地址>
<TR><TD>

<TABLE width=600 align=center bgColor=#660000>

<TR><TD>日志内容</TD></TR>

</TABLE></TD></TR></TABLE>

效果:

 

 

       2、单层图片边框、颜色细框、颜色背景、最大化宽度的边框:

代码:

<TABLE borderColor=#0080ff cellSpacing=15  width="100%"
background=图片地址 border=2>
<TR><TD>

<TABLE borderColor=#0080ff width="100%" align=center

bgColor=#660000 border=2>

<TR><TD>日志内容</TD></TR>

</TABLE></TD></TR></TABLE>

效果:

 

         

       3、多层图片边框、颜色细框、图片背景、固定宽度的边框:

代码:

<TABLE borderColor=#0080ff cellSpacing=3  cellPadding=5

width=600 align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=30 
cellPadding=5

width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 
 cellPadding=5

width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=10 
cellPadding=5

width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 
 cellPadding=1

width="100%" align=center background=图片地址 border=1>
<TR><TD>
日志内容</TD></TR>

</TABLE></TD></TR></TABLE></TD></TR>

</TABLE></TD></TR></TABLE></TD></TR>

</TABLE>

效果:

 

 

 

 

表格边框代码应用(6)

 

表格应用实例(三)

 

 

代  码

<TABLE borderColor=#ff00000 cellSpacing=5  cellPadding=1

 width=650 align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=20 
cellPadding=1

 width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 
 cellPadding=1

 width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=10 
cellPadding=1

 width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 
 cellPadding=1

 width="100%" align=center background=图片地址 border=1>
<TR><TD>
日志内容</TD></TR>

</TABLE></TD></TR></TABLE></TD></TR>

</TABLE></TD></TR></TABLE></TD></TR>

</TABLE>

 

说明:

更换代码中的图片地址,或相关属数值

可得到风格、色彩各异的日志边框。

 

 

 

 

 表格应用实例(四)

 

 

文  字 

 

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

文字

 

文  字

 

 

说明:

日志边框和表格分别以同样的图片作背景(黑色星空)。 

 

 

 表格应用实例(五)

 

 

文  字 

 

文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字


文字

文字

文字

 

文  字

 

 

表格边框代码应用(4)(5)(6) - 淡淡的薄雾 - 音樂紅茶館 表格边框代码应用(1)(2)(3)表格边框代码应用(4)(5)(6) - 淡淡的薄雾 - 音樂紅茶館
  评论这张
 
阅读(82)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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