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

美好宁静之光

美好的回忆从这里开始......

 
 
 

日志

 
 

不同边框的表格样式及代码  

2010-02-03 19:40:28|  分类: 博客制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 

在圈子里看不出效果,请点击查看原文欣赏1.

单实线边框表格

 

代码:

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>

<TR>

<TD>

<DIV align=center>单实线边框表格</DIV></TD>

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

 

2.

 

虚线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99ff66 1px dashed; BORDER-TOP: #99ff66 1px dashed; BORDER-LEFT: #99ff66 1px dashed; BORDER-BOTTOM: #99ff66 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>

<TR>

<TD>

<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

3.

 

点线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 2px dotted; BORDER-TOP: #99FF66 2px dotted; BORDER-LEFT: #99FF66 2px dotted; BORDER-BOTTOM: #99FF66 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2>

<TBODY>

<TR>

<TD>

<DIV align=center>点线边框表格</DIV></TD>

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

4.

 

双实线边框表格

 

代码:

<TABLE borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=3>

<TBODY>

<TR>

<TD>

<DIV align=center>双实线边框表格</DIV></TD>

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

5.

 

槽线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 10px groove; BORDER-TOP: #99FF66 10px groove; BORDER-LEFT: #99FF66 10px groove; BORDER-BOTTOM: #99FF66 10px groove; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>槽线边框表格</DIV></TD>

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

6.

 

脊线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 10px ridge; BORDER-TOP: #99FF66 10px ridge; BORDER-LEFT: #99FF66 10px ridge; BORDER-BOTTOM: #99FF66 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>脊线边框表格</DIV></TD>

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

7.

 

内凹效果边框

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 10px inset; BORDER-TOP: #99FF66 10px inset; BORDER-LEFT: #99FF66 10px inset; BORDER-BOTTOM: #99FF66 10px inset; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>内凹效果边框</DIV></TD>

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

8.

 

外凸效果边框

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 10px outset; BORDER-TOP: #99FF66 10px outset; BORDER-LEFT: #99FF66 10px outset; BORDER-BOTTOM: #99FF66 10px outset; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>外凸效果边框</DIV></TD>

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

9.

 

内虚外实边框

 

代码:

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#99FF66 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>

<TR>

<TD style="BORDER-RIGHT: #99FF66 2px dashed; BORDER-TOP: #99FF66  2px dashed; BACKGROUND: #99FF66; BORDER-LEFT: #99FF66 2px dashed; BORDER-BOTTOM: #ffffff 2px dashed">

<DIV align=center>内虚外实边框</DIV></TD>

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

10.

外虚内实边框

 

代码:

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#99ff66 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>

<TR>

<TD style="BORDER-RIGHT: #99ff66 2px solid; BORDER-TOP: #99ff66 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #99ff66 2px solid">

<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

11.

 

无边框表格

 

代码:

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99ff66 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>

<TBODY>

<TR>

<TD>

<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

附:表格常用属性

border:表格的边框宽度。如border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

       cellspacing:表格中各单元格的间距。属性值为数字。当表格只有一个单元格时,则表示该单元格与表格边框的距离。

       cellpadding:单元格内容与单元格边框之间的距离,属性值是数字。

       width:表格的宽度。属性值为像素和百分比两种。

       height:表格的高度。取值方法同width。

       bgcolor:表格的背景颜色。属性值为各种颜色代码。

       background:表格的背景图案。属性值为有效的图片地址。

       bordercolor:表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。

       bordercolorlight:亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。

       bordercolordark:暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。

       align:表格的对齐方式。属性值为left(左对齐,默认)、center(居中)以及right(右对齐)。

       colspan:定义合并表格的列数。属性值是数字。

       rowspan定义合并表格的行数,属性值是数字。

width=250(宽度值)

height=350(高度值)

 制作好友链接及图像移动 - 快乐天使 - 快乐天使

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

历史上的今天

评论

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

页脚

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