四款好看實(shí)用的CSS表格樣式分享

2022-05-19 15:59 更新

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


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

     ——CSS快速入門

1. 單像素邊框CSS表格

微信截圖_20201110143709

 

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

源代碼：

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

QQ截圖20201110144413

這個(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）

QQ截圖20201110144710

這個(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 < rows.length; i++){         

if(i % 2 == 0){

rows[i].className = "evenrowcolor";

}else{

rows[i].className = "oddrowcolor";

}}}}

window.onload=function(){

altRows('alternatecolor');}


嘗試一下 ?

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

微信截圖_20201110145003

純CSS顯示表格高亮在IE中顯示有問(wèn)題，所以這邊使用了JS來(lái)做高亮。

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

源代碼：

實(shí)例

table.hovertable tr {

background-color:#d4e3e5;}


嘗試一下 ?

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


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)