縱向表格是一種頁面中經常使用的表格布局形式。一般來說,它由若干個行和列組成,并具有分割線以及各種樣式。
CSS可以實現基本的表格排版布局,并且可以對其中的各個元素進行精細化的樣式調整。
table { border-collapse: collapse; /* 去除單元格之間的邊框 */ width: 100%; /* 設定表格寬度 */ } td, th { border: 1px solid #ccc; /* 單元格的邊框 */ padding: 10px; /* 設定單元格的內邊距 */ text-align: center; /* 設定單元格內的文字居中顯示 */ vertical-align: middle; /* 設定單元格內的內容垂直居中顯示 */ } th { background-color: #eee; /* 設定表頭的背景色 */ font-weight: bold; /* 設定表頭文字加粗 */ } tr:nth-child(2n) { background-color: #f9f9f9; /* 設定隔行變色 */ }
上面的代碼是一個簡單的縱向表格布局樣式設置,其中設定的屬性包括了表格邊框、單元格內邊距、文字居中等常用屬性。除此之外,還有一些高級的樣式屬性,比如可以使用偽類選擇器nth-child來指定特定行的樣式,可以通過CSS3中的border-radius屬性創建圓角邊框等等。
縱向表格通常在數據展示和網頁排版等場景中比較常見,需要注意的是,因為表格的結構比較復雜,所以在編寫HTML和CSS時,需要注意語義化、結構清晰,便于維護。