CSS中的表格是網(wǎng)頁(yè)設(shè)計(jì)中非常常見(jiàn)的元素,表格的數(shù)據(jù)可以清晰地展示出來(lái),表格的TH(Table Header)標(biāo)簽是表頭單元格的縮寫(xiě),主要用來(lái)定義表格的表頭。下面,給大家分享一下如何使用CSS來(lái)設(shè)置表格中的TH。
/*設(shè)置TH的樣式*/ th { background-color: #f2f2f2; color: #000; text-align: left; padding: 10px; font-weight: bold; }
上面的CSS樣式中,我們?cè)O(shè)置了TH的背景顏色、文字顏色、文本對(duì)齊方式、內(nèi)邊距和字體加粗等樣式。其中,padding屬性可以控制單元格中文字與單元格邊框之間的距離。在樣式中設(shè)置TH的樣式,能夠讓表格更加美觀。
除了設(shè)置TH樣式之外,我們還可以設(shè)置表格的邊框樣式和單元格之間的邊距,代碼如下:
/*設(shè)置表格邊框*/ table { border-collapse: collapse; } /*設(shè)置表格單元格之間的邊距*/ td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } /*設(shè)置表格的外邊距*/ table { margin: 20px; }
上面的代碼中,我們使用了border-collapse屬性設(shè)置了表格的邊框合并,可以讓整個(gè)表格看起來(lái)更加整潔美觀。同時(shí),我們使用了border、text-align和padding屬性分別設(shè)置了單元格的邊框樣式、文本對(duì)齊方式和內(nèi)邊距。此外,我們還可以使用margin屬性設(shè)置表格的外邊距。
通過(guò)上述的CSS代碼設(shè)置,我們能夠給表格中的TH添加樣式,以及設(shè)置表格的邊框樣式、單元格之間的邊距和表格的外邊距,從而讓表格更加美觀實(shí)用。