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

具體操作：直接復(fù)制粘貼后即可在瀏覽器打開顯示

1.?單像素邊框CSS表格

這是一個(gè)簡單但是常用的表格樣式。

源代碼：

實(shí)例

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樣式表格

這個(gè)樣式和和上面的差不多，只是多了背景圖，的視覺上會(huì)好看不少。

源代碼：

實(shí)例

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.?自動(dòng)換整行顏色的CSS樣式表格(需要用到JS)

這個(gè)CSS表格會(huì)自動(dòng)切換每一行的顏色，這種呈現(xiàn)方式，在我們編輯一個(gè)數(shù)據(jù)龐大的表格時(shí)，非常好用。

源代碼：

實(shí)例

function?altRows(id){

if(document.getElementsByTagName){

var?table?=?document.getElementById(id);

var?rows?=?table.getElementsByTagName("tr");for(i?=?0;?i?

if(i?%?2?==?0){

rows[i].className?=?"evenrowcolor";

}else{

rows[i].className?=?"oddrowcolor";

}}}}

window.οnlοad=function(){

altRows('alternatecolor');}

嘗試一下 ?

4.?鼠標(biāo)懸停高亮的CSS樣式表格?(需要JS)

純CSS顯示表格高亮在IE中顯示有問題，所以這邊使用了JS來做高亮。

注意：不要定義格子的背景色。

源代碼：

實(shí)例

table.hovertable?tr?{

background-color:#d4e3e5;}

嘗試一下 ?

以上是w3cschool為大家推薦的幾種比較常見和常用的CSS表格樣式了，希望大家喜歡。

總結(jié)

以上是生活随笔為你收集整理的漂亮html表格页面模板,四款好看实用的CSS表格样式分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。