本文將介紹如何使用CSS修飾完美的表格HTML源代碼。表格是網頁設計中非常重要的一部分,能夠將信息有條理地呈現給用戶。使用CSS可以使得表格更加美觀、易讀、易于維護。
首先,我們需要先編寫一個基礎的HTML表格。代碼如下:
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>18</td> <td>女</td> </tr> </tbody> </table>以上代碼只是一個非常簡單的表格,只包含了表頭和兩行數據,缺乏美觀和易讀性。下面我們將使用CSS來改進它。 首先,我們可以為表格添加樣式:
<style> table { border-collapse: collapse; /* 合并邊框 */ width: 100%; /* 寬度百分百 */ font-size: 14px; /* 字體大小 */ margin-top: 30px; /* 上邊距 */ } </style>以上CSS代碼可以讓表格的邊框合并、寬度百分百、字體大小為14px、上邊距為30px。 接下來,我們可以進一步優化表格中的表頭和表格內容:
<style> table { border-collapse: collapse; /* 合并邊框 */ width: 100%; /* 寬度百分百 */ font-size: 14px; /* 字體大小 */ margin-top: 30px; /* 上邊距 */ } th { background-color: #f0f0f0; /* 表頭背景色 */ color: #666; /* 字體顏色 */ height: 40px; /* 表頭高度 */ font-weight: normal; /* 字體加粗 */ text-align: center; /* 文字居中 */ } td { height: 30px; /* 表格內容高度 */ text-align: center; /* 文字居中 */ } tbody tr:nth-child(odd) { background-color: #f9f9f9; /* 奇數行背景色 */ } </style>以上CSS代碼可以讓表頭的背景色為灰色、文本顏色為深灰色、高度為40px、字體加粗并居中對齊;表格內容的高度為30px、居中對齊;表格的奇數行背景色為淺灰色。 最后,我們再為表格添加一些邊框樣式,使其更加美觀:
<style> table { border-collapse: collapse; /* 合并邊框 */ width: 100%; /* 寬度百分百 */ font-size: 14px; /* 字體大小 */ margin-top: 30px; /* 上邊距 */ } th { background-color: #f0f0f0; /* 表頭背景色 */ color: #666; /* 字體顏色 */ height: 40px; /* 表頭高度 */ font-weight: normal; /* 字體加粗 */ text-align: center; /* 文字居中 */ border: 1px solid #ddd; /* 邊框為灰色 */ } td { height: 30px; /* 表格內容高度 */ text-align: center; /* 文字居中 */ border: 1px solid #ddd; /* 邊框為灰色 */ } tbody tr:nth-child(odd) { background-color: #f9f9f9; /* 奇數行背景色 */ } tbody td:first-child, thead th:first-child { border-left: none; /* 去掉第一列左邊框 */ } tbody td:last-child, thead th:last-child { border-right: none; /* 去掉最后一列右邊框 */ } tbody tr:last-child td { border-bottom: none; /* 去掉最后一行下邊框 */ } tbody tr:first-child td { border-top: none; /* 去掉第一行上邊框 */ } </style>以上CSS代碼使表頭和表格內容的邊框顏色為灰色、去掉第一列左邊框、去掉最后一列右邊框、去掉最后一行下邊框、去掉第一行上邊框。 經過以上優化,我們完美地設計了一張表格,讓信息更加有條理,更加易于閱讀。您可以將以上HTML代碼和CSS代碼復制到您的網站中使用。