表格作為一種常見的網頁元素,經常被用于展示數據。但是,對于一個復雜的表格布局,很多人可能會遇到困難。CSS可以幫助我們更好地控制表格的布局。
首先,我們可以使用CSS的border-collapse和border-spacing屬性來控制表格單元格之間的邊距和邊框。
table { border-collapse: collapse; border-spacing: 0; } th, td { border: 1px solid #ccc; padding: 10px; }
上述代碼將表格的邊框折疊在一起,并將單元格之間的距離設置為0。同時,每個單元格的邊框被設置為1px的實線,并設置10px的內外邊距。
另外,我們還可以使用CSS的background-color屬性來設置表頭的背景色。
th { background-color: #eee; }
這個例子只涉及表格布局的一小部分,但是CSS的控制能力非常強大。通過一些額外的樣式,我們可以輕松實現復雜的表格布局。