CSS是一種用來美化網頁樣式和排版的語言。
在表格制作中,我們可以使用CSS來優化表格樣式。以下是一些實用的CSS代碼:
/* 定義表格樣式 */ table { width: 100%; border-collapse: collapse; } /* 定義表頭和單元格樣式 */ th, td { border: 1px solid black; padding: 5px; text-align: center; } /* 定義表頭背景色 */ th { background-color: lightgray; } /* 定義偶數行背景色 */ tr:nth-child(even) { background-color: #f2f2f2; }
上面的代碼中,我們首先定義了表格的寬度和邊框合并,使表格更加美觀。然后定義了表頭和單元格的邊框、內邊距和文本居中。我們還為表頭設置了背景色,使其更加醒目。最后,我們使用了:nth-child偽類來為偶數行設置背景色,以區分不同的數據行。
使用這些CSS代碼,我們可以輕松地制作美觀的表格。例如:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>20</td> <td>女</td> </tr> </table>
姓名 | 年齡 | 性別 |
---|---|---|
小明 | 18 | 男 |
小紅 | 20 | 女 |