css如何设置表格样式

css如何设置表格样式

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

表格常见的应用

表格的颜色

例如

  • .datalist {   
      color: #0046a6;   
      background-color: #d2e8ff;   
      font-family: Arial;   
     
    }   
    .datalist caption {   
      font-size: 18px;   
      font-weight: bold;   
    }   
    .datalist th {   
      color: #003e7e;   
      background-color: #7bb3ff;   
    }   
    
    		
  • 表格的边框
    例如

  • 
    .datalist {   
      border: 1px solid #007eff;   
      font-family: Arial;   
      border-collapse: collapse;   
    }   
    .datalist th, .datalist td {   
      border: 1px solid #429fff;   
    }   
    
    		
  • 隔行变色

    当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。

    例如

  • 
    .datalist tr.altrow {   
      background-color: #c7e5ff;   
     
    }  
    		
  • 鼠标经过变色

    对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。

  • 例如
  •  
  • 
    .datalist tr:hover {   
      background-color: #c4e4ff;   
    }   
    .datalist tr:hover { background-color: #c4e4ff; }
    
    		
  • 下面介绍几个CSS表格的实例

    一、单像素边框CSS表格

    这是一个很常用的表格样式。

    css样式、HTML代码

  •  
  • HTML 代码   复制
  • 
    <style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
    </style>
    
    <!-- Table goes in the document BODY -->
    <table class="gridtable">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>
    
    		
  • 效果图:

    二、带背景图的CSS样式表格

    和上面差不多,不过每个格子里多了背景图。

    cell-blue。jpg

    cell-grey。jpg

    1. 下载上面两张图,命名为cell-blue。jpg和cell-grey。jpg

    2. 拷贝下面的代码到你想要的地方,记得修改图片url

    3、css样式、HTML代码

  •  
  • HTML 代码   复制
  • 
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.imagetable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table.imagetable th {
        background:#b5cfd2 url('cell-blue。jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table.imagetable td {
        background:#dcddc0 url('cell-grey。jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    </style>
    
    <!-- Table goes in the document BODY -->
    <table class="imagetable">
    <tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>
    
    		
  • 效果图

    三、 自动换整行颜色的CSS样式表格
     

    这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。

    代码:

  •  
  • HTML 代码   复制
  • 
    <!-- Javascript goes in the document HEAD -->
    <script type="text/javascript">
    function altRows(id){
        if(document.getElementsByTagName){  
            
            var table = document.getElementById(id);  
            var rows = table.getElementsByTagName("tr"); 
             
            for(i = 0; i < rows.length; i++){          
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
    标签: