CSS是一種可以控制網頁樣式的語言,我們可以通過它為網頁添加漂亮的表格樣式。下面就來介紹一些常見的CSS表格樣式。
姓名 | 年齡 | 性別 |
---|---|---|
小明 | 18 | 男 |
小紅 | 20 | 女 |
雖然表格默認樣式看起來不錯,但是如果要使網頁更加美觀,我們可以利用CSS進行樣式的定制。
首先,為表格設置一個class,通過選擇器來對表格進行樣式設置。
.table { width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-size: 14px; text-align: center; }
上述代碼中,定義了表格的一些基礎樣式,包括寬度、邊框、字體大小以及對齊方式。
接著,對表格的標題欄進行樣式設置:
.table th { background-color: #f5f5f5; color: #333; font-weight: bold; padding: 8px; }
上述代碼中,為表格的標題欄設置了背景色、字體顏色、加粗以及內邊距。
最后,對表格的數據行進行樣式設置:
.table td { padding: 8px; border-bottom: 1px solid #ccc; } .table tr:last-child td { border-bottom: none; }
上述代碼中,為表格的數據行設置了內邊距以及下邊框線,同時去除了最后一行的下邊框線。
這樣,我們就可以得到一個漂亮的表格樣式。
姓名 | 年齡 | 性別 |
---|---|---|
小明 | 18 | 男 |
小紅 | 20 | 女 |
綜上所述,通過CSS進行表格樣式的定制,可以大大改善網頁的外觀,并提升用戶的使用體驗。