CSS表格樣式美化可以讓網頁表格看起來更加美觀和專業。以下是一些常用的CSS表格樣式技巧。
/* 設置表格邊框 */ table { border-collapse: collapse; } /* 設置表格的樣式 */ table td, table th { border: 1px solid #ddd; padding: 8px; text-align: left; } /* 鼠標懸停時改變表格行的顏色 */ table tr:hover { background-color: #f5f5f5; } /* 設置表頭單元格的樣式 */ table th { padding-top: 12px; padding-bottom: 12px; background-color: #4CAF50; color: white; } /* 設置表格斑馬線樣式 */ table tr:nth-child(even) { background-color: #f2f2f2; } /* 設置表格標題文字樣式 */ caption { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; }
使用上述CSS屬性和樣式可以讓表格顯示得更加專業和清晰。例如:
<table> <caption>銷售數據</caption> <thead> <tr> <th>日期</th> <th>銷售額</th> <th>利潤</th> </tr> </thead> <tbody> <tr> <td>8月1日</td> <td>$500</td> <td>$100</td> </tr> <tr> <td>8月2日</td> <td>$650</td> <td>$150</td> </tr> <tr> <td>8月3日</td> <td>$800</td> <td>$200</td> </tr> </tbody> </table>
使用CSS表格樣式美化可以讓網頁表格看起來更加專業和美觀,提升用戶體驗。
下一篇css表格沒有左右邊框