在網(wǎng)頁設(shè)計中,表格是一個必不可少的元素。然而,普通的表格往往沒有美感,閱讀起來也不夠方便。這個時候,我們可以使用CSS來優(yōu)化表格的樣式使其更加好看。
以下是一個簡單的table樣式代碼:
table { width: 100%; border-collapse: collapse; border: 1px solid #ddd; } th, td { padding: 10px; text-align: left; } th { background-color: #4286f4; color: #fff; } tr:nth-child(even) { background-color: #f2f2f2; }
上述代碼實現(xiàn)了以下幾個功能:
- 設(shè)置表格寬度為100%;
- 設(shè)置表格邊框折疊為collapse;
- 設(shè)置表格邊框為1像素,顏色為#ddd;
- 設(shè)置表頭和表格單元格內(nèi)邊距為10像素;
- 設(shè)置表頭背景顏色為#4286f4,字體顏色為#fff;
- 設(shè)置奇數(shù)行背景顏色為#f2f2f2。
這些簡單的代碼可以使表格看起來更加美觀,易于閱讀。當然,你還可以根據(jù)自己的需求添加更多的CSS屬性來優(yōu)化表格樣式。