參考：https://www.w3cschool.cn/css/css-sfrk2opy.html

?

參考：http://www.hipenpal.com/tool/css-beautiful-table-templates-in-simplified-chinese.php?nowpage=5&movepage=2&type=1&od=e

四款好看實用的CSS表格樣式分享

由?wadewoshi?創建，Alma 最后一次修改?2018-04-23

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

? ? ?——CSS快速入門

　　1.?單像素邊框CSS表格

?

　　這是一個簡單但是常用的表格樣式。

　　源代碼：

<!-- CSS goes in the document HEAD or added to your external stylesheet --> <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樣式表格

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

　　源代碼：

?

<!-- CSS goes in the document HEAD or added to your external stylesheet --> <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 goes in the document BODY --> <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表格會自動切換每一行的顏色，這種呈現方式，在我們編輯一個數據龐大的表格時，非常好用。

　　源代碼：

<!-- 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><!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

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

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

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

　　源代碼：

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

轉載于:https://www.cnblogs.com/masha2017/p/11400618.html

總結

以上是生活随笔為你收集整理的几个好看的表格样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。