王力猛的博客

-=☆开发手记☆=-

老王ID：wallimn
共29681次访问，排名3622(1)好友1人，关注者5人
写过一些软件，VC、Delphi、Java都会一些，Oracle数据库也懂一点。这几年一直在同这些东西打交道。
wallimn的文章
原创 45 篇
翻译 0 篇
转载 7 篇
评论 71 篇
wallimn的公告
　　我是一名编程爱好者，在此记录一些我编程过程中遇到的问题及解决方法，希望对遇到类似问题的朋友有所帮助。
　　欢迎有共同爱好的朋友联系交流。
邮件：
wallimn@yahoo.cn
QQ：
54871876
MSN：
wallimn@hotmail.com
网络硬盘：
http://wallimn.ys168.com
最近评论
fromnpu：需要一个omdt的安装程序，邮箱asheng200325@qq.com，先行谢谢楼主了！
nino：牛,我顶,今天我也遇到这个问题~谢谢~
dongzheng：那个WORD签名插件在保存关闭之后再打开，好像插件就不透明了啊
dongzheng：老王，那个WORD
wallimn：实际情况下，图章是要盖住下面的文字的。
文章分类
收藏
    相册
    个人相册
    友情链拉
    我的博客2
    我的网络硬盘
    我老婆的博客
    存档
    订阅我的博客
    XML聚合  FeedSky
    订阅到鲜果
    订阅到Google
    订阅到抓虾
    订阅到BlogLines
    订阅到Yahoo
    订阅到GouGou
    订阅到飞鸽
    订阅到Rojo
    订阅到newsgator
    订阅到netvibes

    原创 漂亮的表格样式(使用CSS样式表控制表格样式)收藏

    新一篇: 我的老婆很聪明（连载中......）

     

     

    依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。

    WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。

    现在使用介绍使用CSS样式表来控制、美化表格的方法。

     

    表格外观

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>精美的表格样式</title>
    <style type="text/css">
    <!--
    body,table    {
        font-size    :12px;
    }
    table    {
        table-layout    :fixed;
        empty-cells    :show; 
        border-collapse    : collapse;
        margin    :0 auto;
    }
    td    {
        height    :20px;
    }
    h1,h2,h3    {
        font-size    :12px;
        margin    :0;
        padding    :0;
    }

    .title     { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
        .title h1     { line-height: 31px; text-align:center;  background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
            .title th, .title td     { border: 1px solid #CAD9EA; padding: 5px; }


    /*这个是借鉴一个论坛的样式*/
    table.t1    {
        border    :1px solid #cad9ea;
        color    :#666;
    }
    table.t1 th     {
        background-image    : url(th_bg1.gif);
        background-repeat    ::repeat-x;
        height    :30px;
    }
    table.t1 td,table.t1 th    {
        border    :1px solid #cad9ea;
        padding    :0 1em 0;
    }
    table.t1 tr.a1    {
        background-color    :#f5fafe;
    }



    table.t2    {
        border    :1px solid #9db3c5;
        color    :#666;
    }
    table.t2 th     {
        background-image    : url(th_bg2.gif);
        background-repeat    ::repeat-x;
        height    :30px;
        color    :#fff;
    }
    table.t2 td    {
        border    :1px dotted #cad9ea;
        padding    :0 2px 0;
    }
    table.t2 th    {
        border    :1px solid #a7d1fd;
        padding    :0 2px 0;
    }
    table.t2 tr.a1    {
        background-color    :#e8f3fd;
    }



    table.t3    {
        border    :1px solid #fc58a6;
        color    :#720337;
    }
    table.t3 th     {
        background-image    : url(th_bg3.gif);
        background-repeat    ::repeat-x;
        height    :30px;
        color    :#35031b;
    }
    table.t3 td    {
        border    :1px dashed #feb8d9;
        padding    :0 1.5em 0;
    }
    table.t3 th    {
        border    :1px solid #b9f9dc;
        padding    :0 2px 0;
    }
    table.t3 tr.a1    {
        background-color    :#fbd8e8;
    }

    -->
    </style>
    <script type="text/javascript">
            function ApplyStyle(s){
            document.getElementById(    "mytab").className=s.innerText;
        }
    </script>
    </head>

    <body>
    <div class="title">
            <h1>大家好，CSS与表格的结合示例</h1>
            <table><tr><td>
            点击链接切换样式：    <a href="javascript:;" onclick="ApplyStyle(this)">t1</a>
                <a href="javascript:;" onclick="ApplyStyle(this)">t2</a>
                <a href="javascript:;" onclick="ApplyStyle(this)">t3</a>
            </td></tr></table>
    </div>
    <table width="90%" id="mytab"  border="1" class="t1">
          <thead>
            <th width="10%">网名</th>
            <th width="30%">博客</th>
            <th width="20%">电邮</th>
            <th width="30%">网络硬盘</th>
            <th width="10%">QQ</th>
          </thead>
          <tr class="a1">
            <td>wallimn</td>
            <td>http://blog.csdn.net/wallimn</td>
            <td>wallimn@tom.com</td>
            <td>http://wallimn.ys168.com</td>
            <td>54871876</td>
          </tr>
          <tr>
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
          <tr class="a1">
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
          <tr>
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
          <tr class="a1">
            <td>wallimn</td>
            <td>http://blog.csdn.net/wallimn</td>
            <td>wallimn@tom.com</td>
            <td>http://wallimn.ys168.com</td>
            <td>54871876</td>
          </tr>
          <tr>
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
          <tr class="a1">
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
          <tr>
            <td>长三江</td>
            <td>村在</td>
            <td>北京天安门</td>
            <td>东四十条</td>
            <td>21345678</td>
          </tr>
    </table>

    </body>
    </html>

    可以到我的网络硬盘下载源码：http://wallimn.ys168.com

    发表于 @ 2008年03月24日 13:35:00|评论(loading...)|编辑

    旧一篇: 在TOMCAT中，以jndi方式操作clob字段时，类型转换异常的对策

    评论：没有评论。
    发表评论  


    登录
    Csdn Blog version 3.1a
    Copyright © wallimn