新聞中心
為了讓用戶擁有更好的閱讀體驗,將文章中數(shù)據(jù)以更直觀的方式展示是非常必要的,因此,擁有良好的表格設計就顯得非常重要了。下面,w3cschool就和大家分享4款好看且實用的CSS表格樣式。

具體操作:直接復制粘貼后即可在瀏覽器打開顯示
——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;}
嘗試一下 ?
2. 帶背景圖的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;}
嘗試一下 ?
3. 自動換整行顏色的CSS樣式表格(需要用到JS)
這個CSS表格會自動切換每一行的顏色,這種呈現(xiàn)方式,在我們編輯一個數(shù)據(jù)龐大的表格時,非常好用。
源代碼:
實例
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');}
嘗試一下 ?
4. 鼠標懸停高亮的CSS樣式表格 (需要JS)
純CSS顯示表格高亮在IE中顯示有問題,所以這邊使用了JS來做高亮。
注意:不要定義格子的背景色。
源代碼:
實例
table.hovertable tr {
background-color:#d4e3e5;}
嘗試一下 ?
以上是w3cschool為大家推薦的幾種比較常見和常用的css表格樣式了,希望大家喜歡。
分享文章:創(chuàng)新互聯(lián)CSS教程:四款好看實用的CSS表格樣式分享
文章網(wǎng)址:http://www.5511xx.com/article/dhgopod.html


咨詢
建站咨詢
