快捷搜索:  88888  88888JyI=  88888e360  88888[.](,.)(  88888[]  88888)

四款好看实用的CSS表格样式分享

为了让用户拥有更好的阅读体验,将文章中数据以更直观的方式展示是非常必要的,因此,拥有良好的表格设计就显得非常重要了。下面就和大家分享4款好看且实用的CSS表格样式。

 

1. 单像素边框CSS表格

 

四款好看实用的CSS表格样式分享     

 

这是一个简单但是常用的表格样式。

 

源代码:

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<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>

 

2. 带背景图的CSS样式表格

 

四款好看实用的CSS表格样式分享

 

这个样式和和上面的差不多,只是多了背景图,的视觉上会好看不少。

  

源代码:

 

<!-- 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>

 

3. 自动换整行颜色的CSS样式表格(需要用到JS)

 

四款好看实用的CSS表格样式分享
 

这个CSS表格会自动切换每一行的颜色,这种呈现方式,在我们编辑一个数据庞大的表格时,非常好用。

 

源代码:

<!-- 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";
            }else{
                rows[i].className = "oddrowcolor";
            }     
        }
    }
} 
window.onload=function(){
    altRows('alternatecolor');
}
</script>
 
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">table.altrowstable { 
   font-family: verdana,arial,sans-serif; 
      font-size:11px;    
   color:#333333;   
    border-width: 1px; 
      border-color: #a9c6c9;   
       border-collapse: collapse;
}table.altrowstable th {   
 border-width: 1px;    padding: 8px;   
  border-style: solid;    
  border-color: #a9c6c9;
}
table.altrowstable td {  
    border-width: 1px;  
      padding: 8px;  
        border-style: solid;  
          border-color: #a9c6c9;
}
.oddrowcolor{   
 background-color:#d4e3e5;
}
.evenrowcolor{  
  background-color:#c3dde0;
}
</style>
 
<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<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>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
 
<!--  The table code can be found here: 
  http://www.textfixer/resources/css-tables.php#css-table03 -->

 

4. 鼠标悬停高亮的CSS样式表格 (需要JS)

 

四款好看实用的CSS表格样式分享

纯CSS显示表格高亮在IE中显示有问题,所以这边使用了JS来做高亮。

注意:不要定义格子的背景色。

源代码:

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">table.hovertable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #999999;    border-collapse: collapse;
}
table.hovertable th {    background-color:#c3dde0;  
  border-width: 1px;    padding: 8px;    border-style: solid; 
     border-color: #a9c6c9;
}
table.hovertable tr {    background-color:#d4e3e5;
}
table.hovertable td {    border-width: 1px;    padding: 8px;   
 border-style: solid;    border-color: #a9c6c9;
}
</style>
 
<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
  onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
  onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

 

以上就是今天为大家推荐的几种比较常见和常用的CSS表格样式了,希望大家喜欢。

您可能还会对下面的文章感兴趣: