常用的四種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>