使用CSS樣式表可以讓我們更好地對HTML表格進行美化和布局。在下面的例子中,我們使用了margin、padding、border、background-color和text-align等CSS屬性來美化一個簡單的HTML表格。
首先,看一下例子HTML表格的代碼:
<table> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr> <td>張三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>22</td> </tr> </table>
接著,我們使用CSS屬性來美化表格:
<style> table { border-collapse: collapse; margin: 20px; padding: 10px; background-color: #f9f9f9; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } th { background-color: #555; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } </style>
除了表格的邊框和背景色之外,我們還使用了text-align屬性使表格內容居中。如果想要對特定的單元格進行美化,則可以對其使用id或class進行樣式設置。還可以使用偽類選擇器來美化不同的表格行。
總的來說,使用CSS樣式表可以很容易地讓我們通過改變表格的邊框、背景色、字體和對齊方式等進行美化和布局。這些簡單的樣式設置可以大大提高網站的外觀和用戶體驗。