對於新手小白來說，沒有接觸過css依然可以製作表格，只不過那樣的表格，枯燥乏味。下面我給大家分享介紹一款用css樣式製作的非常好看又簡潔的表格。
div+css製作好看的表格具體程式碼範例如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>用css製作的一款好看錶格樣式樣本</title> <style> #t1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #t1 td, #t1 th { font-size:1em; border:1px solid #1094f2; padding:3px 7px 2px 7px; } #t1 th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color: #029789; color:#ffffff; } #t1 tr.alt td { color:#000000; background-color: #94ef9a; } </style></head><body><table id="t1"> <tr> <th>姓名</th> <th>性別</th> <th>愛好</th> </tr> <tr> <td>張三</td> <td>男</td> <td>唱歌</td> </tr> <tr class="alt"> <td>李四</td> <td>女</td> <td>跳舞</td> </tr> <tr> <td>王二</td> <td>男</td> <td>看書</td> </tr> <tr class="alt"> <td>趙五</td> <td>男</td> <td>爬山</td> </tr></table></body></html>
上述代碼我們通過瀏覽器訪問，效果如：
，相比較枯燥的黑白線條的表格是不是好看多了呢？又簡潔又好看，每隔一行顯示不同顏色背景,而且table邊框是細線展示。可以讓使用者更直觀的查閱表格中資訊。想要達到這樣的效果就離不開強大的css樣式屬性了。
這裡我們在style樣式裡可以發現一些重要的屬性比如：
border-collapse:collapse;這個屬性工作表示的是可以把表格邊框合并成為單一的邊框。
background-color就是設定背景顏色的。
那麼通過上述的介紹，大家對用css製作表格是否有更多的瞭解？這樣就可以根據自我審美喜好，來設定不同效果的css表格樣式。一張好看的表格不僅可以讓使用者喜歡，也可以讓自己管理起來更加直觀方便。
本篇文章具有一定的參考價值，希望對有需要的朋友有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
