css美观-四种美观实用的CSS表格样式分享

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

为了给用户更好的阅读体验，需要以更直观的形式展示文章中的数据。 因此css美观，拥有一个好的桌子设计就显得非常重要。 下面我就给大家分享4种美观又实用的CSS表格样式。

1. 单像素边框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;
}

 

    
    
    

Info Header 1
Info Header 2
Info Header 3

Text 1A
Text 1B
Text 1C

Text 2A
Text 2B
Text 2C

2.带有背景图片的CSS样式表

这种风格和上一种类似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;
}

 

    
    
    

Info Header 1
Info Header 2
Info Header 3

Text 1A
Text 1B
Text 1C

Text 2A
Text 2B
Text 2C

3.手动更改整行颜色的CSS样式表（需要JS）

这个 CSS 表将手动切换每行的颜色。 当我们编辑一个包含大量数据的表格时，这些呈现方法特别有用。

源代码：

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');
}

 
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;
}

 

    
    
    
    
    
    

Info Header 1
Info Header 2
Info Header 3

Text 1A
Text 1B
Text 1C

Text 2A
Text 2B
Text 2C


Text 3A
Text 3B
Text 3C

Text 4A
Text 4B
Text 4C

Text 5A
Text 5B
Text 5C


 

4.键盘悬停高亮CSS样式表（需要JS）

纯CSS在IE中显示表格高亮有问题，所以用JS来高亮。

注意：不要定义条纹的背景颜色。

源代码：

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;
}

 

    
<tr onmouseover="this.style.backgroundColor='#ffff66';"
  onmouseout="this.style.backgroundColor='#d4e3e5';">
    
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
  onmouseout="this.style.backgroundColor='#d4e3e5';">
    
<tr onmouseover="this.style.backgroundColor='#ffff66';"
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    
<tr onmouseover="this.style.backgroundColor='#ffff66';" 
   onmouseout="this.style.backgroundColor='#d4e3e5';">
    

Info Header 1
Info Header 2
Info Header 3
Item 1A
Item 1B
Item 1C
Item 2A
Item 2B
Item 2C
Item 3A
Item 3B
Item 3C
Item 4A
Item 4B
Item 4C
Item 5A
Item 5B
Item 5C

以上就是明天为大家推荐的几种常见且常用的CSS表格样式。 我希望你喜欢他们。