经典实用表格

<html>
<head>
<title>经典实用的表格效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
*{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}
    /*经典实用的表格*/
    .tablePattern {
        width: 700px;
        margin: 0px auto;
        font: Georgia 11px;
        font-size: 12px;
        color: #333333;
        text-align: center;
        border-collapse: collapse; /*细线表格代码*/
    }

    .tablePattern td {
        border: 1px solid #999; /*细线表格线条颜色*/
        height: 22px;
    }

    caption {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin: 0 auto;
    }

    tr.t1 td {
        background-color: #fff;
    }

    tr.t2 td {
        background-color: #eee;
    }

    tr.t3 td {
        background-color: #ccc;
    }

    th, tfoot tr td {
        font-weight: bold;
        text-align: center;
        background: #5199D3;
    }

    th {
        line-height: 30px;
        height: 30px;
    }

    tfoot tr td {
        background: #fff;
        line-height: 26px;
        height: 26px;
    }

    thead {
        border: 1px solid #999;
    }

        thead tr td {
            text-align: center;
        }

    #page {
        text-align: center;
        float: right;
    }

        #page a, #page a:visited {
            width: 60px;
            height: 22px;
            line-height: 22px;
            border: 1px black solid;
            display: block;
            float: left;
            margin: 0 3px;
            background: #c9c9c9;
            text-decoration: none;
        }

            #page a:hover {
                background: #c1c1c1;
                text-decoration: none;
            }

    .grayr {
        padding: 2px;
        font-size: 11px;
        background: #fff;
        float: right;
    }

        .grayr a {
            padding: 2px 5px;
            margin: 2px;
            color: #000;
            text-decoration: none;
            border: 1px #c0c0c0 solid;
        }

            .grayr a:hover {
                color: #000;
                border: 1px #2EA2E6 solid;
            }

            .grayr a:active {
                color: #000;
                background: #52B2E9;
            }

        .grayr span.current {
            padding: 2px 5px;
            font-weight: bold;
            margin: 2px;
            color: #303030;
            background: #fff;
            border: 1px #52B2E9 solid;
        }

        .grayr span.disabled {
            padding: 2px 5px;
            margin: 2px;
            color: #797979;
            background: #c1c1c1;
            border: 1px #E5E5E5 solid;
        }

        .grayr a.nextpage {
            background-color: #52B2E9;
        }

</style>
<script type="text/javascript">

function selectAll()
{
    if(this.checked==true) { 
        checkAll('test'); 
    } 
    else { 
        clearAll('test'); 
    }
}
function checkAll(name)
{
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++)
    {
        if((el[i].type=="checkbox") && (el[i].name==name))
        {
            el[i].checked = true;
        }
    }
}
function clearAll(name)
{
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++)
    {
        if((el[i].type=="checkbox") && (el[i].name==name))
        {
            el[i].checked = false;
        }
    }
}

</script>
</head>
<body>
<table class="tablePattern">
  <caption>
  一款经典实用的表格效果 by www.865171.cn
  </caption>
  <thead>
    <tr>
      <th>
        <input onClick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消"/>
      </th>
      <th>昵称</th>
      <th>性别</th>
      <th>年龄</th>
      <th>籍贯</th>
      <th>电话</th>
      <th>邮箱</th>
      <th>QQ</th>
      <th>主页</th>
    </tr>
  </thead>
  <tbody id="tab">
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="a" name="test"/>
      </td>
      <td>免费模板网</td>
      <td>男</td>
      <td>25</td>
      <td>福建省</td>
      <td>12345678910</td>
      <td>215288671@qq.com</td>
      <td>215288671</td>
      <td>http://www.865171.cn</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="9">
        <div class="grayr"><span class="disabled"> < </span><span class="current">1</span><a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a><a href="#?page=2" class="nextpage"> > </a></div>
      </td>
    </tr>
  </tfoot>
</table>
    <script type="text/javascript">

        var Ptr = document.getElementById("tab").getElementsByTagName("tr");
        function $() {
            for (i = 1; i < Ptr.length + 1; i++) {
                Ptr[i - 1].style.backgroundColor = (i % 2 > 0) ? "#fff" : "#D8D8D8";
            }
        }
        window.onload = $;
        for (var i = 0; i < Ptr.length; i++) {
            Ptr[i].onmouseover = function () {
                this.tmpClass = this.className;
                this.style.backgroundColor = "#A1CAFB";

            };
            Ptr[i].onmouseout = function () {
                for (i = 1; i < Ptr.length + 1; i++) {
                    Ptr[i - 1].style.backgroundColor = (i % 2 > 0) ? "#D8D8D8" : "#fff";
                }
            }
        }
    </script>
</body>
</html>
效果如图：
posted @ 2015-02-06 15:39 云奈尔阅读(88) 评论(0) 收藏举报
刷新页面返回顶部
云奈尔

经典实用表格

公告
