站 内 搜 索
热门教程推荐

  您当前位置：中国素材首页 >> 网页教程 >> DHTML/HTML/CSS >> 表格美化-虚线边框表格
 
表格美化-虚线边框表格
中国素材网 www.sucai86.com 2006-3-6 9:51:21 浏览次数:

1.样式一

虚线边框表格



代码如下：

<style type="text/css">
<!--
.a {FONT-SIZE: 12px; COLOR: #91002f; LINE-HEIGHT: 18px; FONT-FAMILY: "宋体"
}
.b {BORDER-RIGHT: #FF9933 1px dotted; BORDER-TOP: #FF9933 1px dotted; BORDER-LEFT: #FF9933 1px dotted; BORDER-BOTTOM: #FF9933 1px dotted
}
.style1 {color: #FF9933}
-->
</style>
<TABLE cellSpacing=0 cellPadding=0 width=381 align=center border=0>

<TR>
<TD class=b height=23>
<DIV align=center class=a style1>虚线边框表格</DIV></TD>
</TR>

</TABLE>

说明：可以通过修改px的值，来改变虚线边框的样式。

2px
虚线边框表格



3px
虚线边框表格



4px
虚线边框表格



5px
虚线边框表格



6px
虚线边框表格



7px
虚线边框表格




2.样式二

虚线边框表格





代码如下：

<style type="text/css">
<!--
.a {FONT-SIZE: 12px; COLOR: #91002f; LINE-HEIGHT: 18px; FONT-FAMILY: "宋体"
}
.b {BORDER-RIGHT: #FF9933 3px ; BORDER-TOP: #FF9933 3px dotted; BORDER-LEFT: #FF9933 3px ; BORDER-BOTTOM: #FF9933 3px dotted
}
.style1 {color: #FF9933}
-->
</style>
<TABLE width=381 height="53" border=0 align=center cellPadding=0 cellSpacing=0>

<TR>
<TD class=b height=23>
<DIV align=center class=a style1>虚线边框表格</DIV></TD>
</TR>
</TABLE>