在網頁設計中,表格是一種重要的元素。通過CSS的樣式控制,可輕松地讓表格變得更加美觀和實用。
下面是一個CSS表格項目設計圖片的示例:
/*樣式控制*/ table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } /*實例*/ <table> <tr> <th>姓名</th> <th>年齡</th> <th>電話</th> </tr> <tr> <td>張三</td> <td>25</td> <td>13888888888</td> </tr> <tr> <td>李四</td> <td>28</td> <td>13999999999</td> </tr> </table>
通過以上樣式控制,我們可以使表格擁有以下特點:
- 表格邊框合并為一條粗邊框,看起來更干凈利落。
- 表頭底色為綠色,字體顏色為白色,顯眼清晰。
- 表格行的底部加上了細線條,看起來更有層次感。
這樣的表格設計使得數據展示更加美觀、實用,提高了網站的用戶體驗。
上一篇css表框加高光