表格在網(wǎng)頁中經(jīng)常被使用,通過樣式的設(shè)置,可以讓表格更加美觀、易讀。下面介紹一些常用的表格樣式:
table{ border-collapse: collapse; /*表格邊框合并*/ border-spacing: 0; /*表格的單元格間距*/ font-size: 14px; /*表格的字號*/ margin: 10px 0; /*表格外邊距*/ width: 100%; /*表格寬度,可以是具體像素或百分比*/ } td, th{ border: 1px solid #999; /*表格邊框*/ padding: 8px; /*表格單元格內(nèi)邊距*/ text-align: center; /*表格單元格中的內(nèi)容水平居中*/ } th{ background-color: #eee; /*表頭背景色*/ } tr:nth-of-type(even){ background-color: #f9f9f9; /*偶數(shù)行的背景色*/ }
通過上述代碼,我們可以做到以下幾個(gè)效果:
1. 表格的邊框會自動合并為一個(gè)邊框,避免了邊框過多造成的視覺疲勞。
2. 單元格的padding設(shè)置,使得表格更加整潔美觀。
3. 表頭和偶數(shù)行單元格背景色的設(shè)置,讓表格更加易讀,提高信息的傳達(dá)效果。
4. 通過設(shè)置表格的外邊距和寬度,使得表格可以更好的與頁面中的其他元素進(jìn)行協(xié)調(diào)。
總之,合理設(shè)置表格樣式,可以讓表格在網(wǎng)頁中發(fā)揮更加重要的作用。
上一篇css中表格居中6
下一篇citybox.vue