CSS是一種在網(wǎng)頁設(shè)計中常用的樣式表語言,它不僅可以設(shè)置網(wǎng)頁的樣式,還可以給表格增加各種效果。以下是一些常用的CSS代碼,可以幫助我們更好地定制表格。
/* 設(shè)置表格邊框 */ table { border-collapse: collapse; /* 合并邊框 */ border: 1px solid #ccc; /* 設(shè)置邊框 */ } /* 設(shè)置表頭顏色 */ th { background-color: #f2f2f2; /* 設(shè)置背景顏色 */ font-weight: bold; /* 設(shè)置字體加粗 */ } /* 設(shè)置單元格對齊方式 */ td { text-align: center; /* 文字居中 */ vertical-align: middle; /* 垂直居中 */ } /* 設(shè)置奇偶行的背景顏色不同 */ tr:nth-child(odd) { background-color: #f9f9f9; /* 偶數(shù)行 */ } tr:nth-child(even) { background-color: #fff; /* 奇數(shù)行 */ } /* 設(shè)置鼠標(biāo)移上去時的背景顏色 */ td:hover { background-color: #ddd; /* 鼠標(biāo)移上去時的背景顏色 */ }
以上代碼可以在CSS文件中使用,也可以在html文件中的style標(biāo)簽中使用。為了更好地展示表格效果,以下是一個簡單的表格樣例:
姓名 | 年齡 | 工作 |
---|---|---|
小明 | 18 | 學(xué)生 |
小紅 | 20 | 程序員 |
小剛 | 22 | 設(shè)計師 |
以上就是簡單的CSS表格樣式設(shè)置,希望對大家有所幫助。