欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

表格加css布局

洪振霞1年前9瀏覽0評論

表格是數據展示的重要形式,而加上CSS樣式的表格可以讓數據更加清晰、美觀。下面通過一個簡單例子演示如何使用CSS布局改善表格的樣式。

<style>
table {
border-collapse: collapse;
margin: 20px auto;
width: 80%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #eee;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>22</td>
<td>女</td>
</tr>
</table>

首先,我們使用CSS樣式表對表格進行整體樣式設置。通過設置table的樣式,設置表格為居中對齊,并設置了表格的邊框合并在一起,表格的寬度為80%。然后,給th和td設置邊框和內邊距。th單元格背景色加深以提高表頭辨識度,tr偶數行設置背景色淺色以與偶數行區分。最后,通過:hover偽類來實現當鼠標懸浮在tr上時的樣式效果。

最終,我們可以得到一個美觀實用的表格樣式,更好地展現數據。