漂亮的表格样式(使用CSS样式表控制表格样式)

根据WEB2.0风格,设计了几个表格样式,我希望你喜欢。


WEB2.0推广使用div开放式布局。但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择。


本节将介绍如何使用现在CSS样式表来控制、的方法。

漂亮的表格样式(使用CSS样式表控制表格样式)



漂亮的表格样式(使用CSS样式表控制表格样式)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
漂亮的表格样式(使用CSS样式表控制表格样式)<html xmlns="http://www.w3.org/1999/xhtml">
漂亮的表格样式(使用CSS样式表控制表格样式)<head>
漂亮的表格样式(使用CSS样式表控制表格样式)<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
漂亮的表格样式(使用CSS样式表控制表格样式)<title>精美的表格样式</title>
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)<style type="text/css">...
漂亮的表格样式(使用CSS样式表控制表格样式)<!--
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)body,table{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    font-size:12px;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    table-layout:fixed;
漂亮的表格样式(使用CSS样式表控制表格样式)    empty-cells:show; 
漂亮的表格样式(使用CSS样式表控制表格样式)    border-collapse: collapse;
漂亮的表格样式(使用CSS样式表控制表格样式)    margin:0 auto;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)td{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    height:20px;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)h1,h2,h3{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    font-size:12px;
漂亮的表格样式(使用CSS样式表控制表格样式)    margin:0;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式).title {...}{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)    .title h1 {...}{ line-height: 31px; text-align:center;  background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)        .title th, .title td {...}{ border: 1px solid #CAD9EA; padding: 5px; }
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)/**//*这个是借鉴一个论坛的样式*/
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t1{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #cad9ea;
漂亮的表格样式(使用CSS样式表控制表格样式)    color:#666;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t1 th {...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-image: url(th_bg1.gif);
漂亮的表格样式(使用CSS样式表控制表格样式)    background-repeat::repeat-x;
漂亮的表格样式(使用CSS样式表控制表格样式)    height:30px;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t1 td,table.t1 th{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #cad9ea;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0 1em 0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t1 tr.a1{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-color:#f5fafe;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t2{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #9db3c5;
漂亮的表格样式(使用CSS样式表控制表格样式)    color:#666;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t2 th {...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-image: url(th_bg2.gif);
漂亮的表格样式(使用CSS样式表控制表格样式)    background-repeat::repeat-x;
漂亮的表格样式(使用CSS样式表控制表格样式)    height:30px;
漂亮的表格样式(使用CSS样式表控制表格样式)    color:#fff;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t2 td{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px dotted #cad9ea;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0 2px 0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t2 th{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #a7d1fd;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0 2px 0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t2 tr.a1{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-color:#e8f3fd;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t3{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #fc58a6;
漂亮的表格样式(使用CSS样式表控制表格样式)    color:#720337;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t3 th {...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-image: url(th_bg3.gif);
漂亮的表格样式(使用CSS样式表控制表格样式)    background-repeat::repeat-x;
漂亮的表格样式(使用CSS样式表控制表格样式)    height:30px;
漂亮的表格样式(使用CSS样式表控制表格样式)    color:#35031b;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t3 td{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px dashed #feb8d9;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0 1.5em 0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t3 th{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    border:1px solid #b9f9dc;
漂亮的表格样式(使用CSS样式表控制表格样式)    padding:0 2px 0;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)table.t3 tr.a1{...}{
漂亮的表格样式(使用CSS样式表控制表格样式)    background-color:#fbd8e8;
漂亮的表格样式(使用CSS样式表控制表格样式)}
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)-->
漂亮的表格样式(使用CSS样式表控制表格样式)</style>
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)<script type="text/javascript">...
漂亮的表格样式(使用CSS样式表控制表格样式)漂亮的表格样式(使用CSS样式表控制表格样式)    function ApplyStyle(s)...{
漂亮的表格样式(使用CSS样式表控制表格样式)        document.getElementById("mytab").className=s.innerText;
漂亮的表格样式(使用CSS样式表控制表格样式)    }
漂亮的表格样式(使用CSS样式表控制表格样式)</script>
漂亮的表格样式(使用CSS样式表控制表格样式)</head>
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)<body>
漂亮的表格样式(使用CSS样式表控制表格样式)<div class="title">
漂亮的表格样式(使用CSS样式表控制表格样式)    <h1>大家好。CSS与表格的结合演示样例</h1>
漂亮的表格样式(使用CSS样式表控制表格样式)    <table><tr><td>
漂亮的表格样式(使用CSS样式表控制表格样式)        点击链接切换样式:<a href="javascript:;" onclick="ApplyStyle(this)">t1</a>
漂亮的表格样式(使用CSS样式表控制表格样式)        <a href="javascript:;" onclick="ApplyStyle(this)">t2</a>
漂亮的表格样式(使用CSS样式表控制表格样式)        <a href="javascript:;" onclick="ApplyStyle(this)">t3</a>
漂亮的表格样式(使用CSS样式表控制表格样式)    </td></tr></table>
漂亮的表格样式(使用CSS样式表控制表格样式)</div>
漂亮的表格样式(使用CSS样式表控制表格样式)<table width="90%" id="mytab"  border="1" class="t1">
漂亮的表格样式(使用CSS样式表控制表格样式)  <thead>
漂亮的表格样式(使用CSS样式表控制表格样式)    <th width="10%">网名</th>
漂亮的表格样式(使用CSS样式表控制表格样式)    <th width="30%">博客</th>
漂亮的表格样式(使用CSS样式表控制表格样式)    <th width="20%">电邮</th>
漂亮的表格样式(使用CSS样式表控制表格样式)    <th width="30%">网络硬盘</th>
漂亮的表格样式(使用CSS样式表控制表格样式)    <th width="10%">QQ</th>
漂亮的表格样式(使用CSS样式表控制表格样式)  </thead>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr class="a1">
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>wallimn</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>http://blog.csdn.net/wallimn</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>wallimn@tom.com</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>http://wallimn.ys168.com</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>54871876</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr class="a1">
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr class="a1">
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>wallimn</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>http://blog.csdn.net/wallimn</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>wallimn@tom.com</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>http://wallimn.ys168.com</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>54871876</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr class="a1">
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)  <tr>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>长三江</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>村在</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>北京*</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>东四十条</td>
漂亮的表格样式(使用CSS样式表控制表格样式)    <td>21345678</td>
漂亮的表格样式(使用CSS样式表控制表格样式)  </tr>
漂亮的表格样式(使用CSS样式表控制表格样式)</table>
漂亮的表格样式(使用CSS样式表控制表格样式)
漂亮的表格样式(使用CSS样式表控制表格样式)</body>
漂亮的表格样式(使用CSS样式表控制表格样式)</html>
漂亮的表格样式(使用CSS样式表控制表格样式)

我的网络驱动器可以下载源代码:http://wallimn.ys168.com

上一篇:iris数据集(.csv .txt)免费下载


下一篇:Linq查询条件里有可空字段比较时报错variable '<>h__TransparentIdentifier2' of type referenced from scope '', but it is not defined