加载中…
正文 字体大小:

好看的表格样式

(2012-04-19 09:24:32)
标签:

表格样式

分类: 表格样式•表格之家

VML代码实现的圆角表格
 好看的表格样式

源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)  }
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect>
</body>
</html>
==================================================================================================
VML代码实现的文字环绕圆角表格

好看的表格样式


源码如下:

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML) }
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px">
<v:path  textpathok="true"  />
      <v:textpath  on="true"  string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"  />
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect>
</body>
</html>

==================================================================================================

表格边框显示外阴影

 

www.jbcyz.com

 

 

 

 

 

源码如下:


<table  align=center  width=200  height=100  bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
  <tr>
    <td><center>www.jbcyz.com</td>
  </tr>
</table>

==================================================================================================
虚线边框表格


好看的表格样式

源码如下:
<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="tb"><center>www.jbcyz.com</td>
  </tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">
==================================================================================================

分类型表格

 

好看的表格样式

 

源码如下:
<fieldset>
<legend>item</legend>
content
</fieldset>

==================================================================================================

立体表格

 

好看的表格样式

源码如下:

<table  border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef>
  <tr bgcolor=#cccccc>
    <td>jibaicao.tmall.com</td>
    <td>jibaicao.tmall.com</td>
    <td>jibaicao.tmall.com</td>
  </tr>
  <tr bgcolor=#cccccc>
    <td>jibaicao.tmall.com</td>
    <td>jibaicao.tmall.com</td>
    <td>jibaicao.tmall.com</td>
  </tr>
</table>
<center>

表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

     

--table 7--

     

--table 8--

     

--table 9--

按下面的代码修改原<table****>中的参数
--table 7--
border="1" cellspacing="0" cellpadding="0"
        bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#40A4EE"
 

<!--table -->
border="1" cellspacing="2" cellpadding="0"
        bgcolor="#40A4EE"
<!--table -->
border="1" bordercolor="#FFFFFF"
        bordercolorlight="#000000" bgcolor="#40A4EE"

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

       

    验证码: 请点击后输入验证码 收听验证码

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有