常用的四种CSS样式表格

1. 单像素边框CSS表格

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

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

 

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

 

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

 

cell-blue.jpg

cell-grey.jpg

 

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

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

[html] 
<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 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样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

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

 

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

纯CSS显示表格高亮在IE中显示有问题，所以这边使用了JS来做高亮（由于csdn博客限制了js的使用，我会在近期将博客迁移放到自己的web主机上）。

 

有一点要小心的是，不要定义格子的背景色。

[html]
<!-- 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>