要在網頁中添加表格,通??梢允褂肏TML的table標簽來實現。而表格的樣式則可以通過CSS來進行定制。以下是一個簡單的示例:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>28</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table>
上面的代碼會生成一個包含姓名、年齡、性別三列的表格,其中第一行為表頭。
下面,我們使用CSS對這個表格進行樣式定制:
table { border-collapse: collapse; /* 合并邊框線 */ width: 100%; } th, td { border: 1px solid #ccc; /* 設置邊框線 */ padding: 8px; /* 設置內邊距 */ text-align: center; /* 文字居中對齊 */ } /* 設置表頭的背景色和文字顏色 */ th { background-color: #f2f2f2; color: #333; } /* 設置奇偶行的背景色 */ tr:nth-child(odd) { background-color: #f9f9f9; } /* 鼠標懸停時改變背景色 */ tr:hover { background-color: #e5e5e5; }
上面的CSS代碼會讓表格的邊框線更加清晰,表頭和奇偶行的背景色也會發生變化。當鼠標懸停在表格上時,行的背景色也會發生改變。
通過這些CSS的設置,我們可以讓表格的展示更加美觀和清晰,提高頁面的整體質量和用戶體驗。
上一篇css表格怎么換色