CSS中的table標簽屬性可以用于調整HTML表格的樣式。可以設置表格的邊框、背景顏色、表頭、行和列等屬性。
table { border-collapse: collapse; /* 合并邊框 */ border-spacing: 0; /* 邊框間距 */ width: 100%; } td, th { padding: 8px; text-align: left; vertical-align: middle; } th { background-color: #eee; font-weight: bold; } tr:nth-child(even) { background-color: #f2f2f2; }
上面這些屬性對于表格的樣式定制相當重要。其中,border-collapse: collapse;
可以將表格中相鄰單元格之間的邊框合并,讓表格看起來更整潔。而border-spacing: 0;
將邊框間距設置為0,加強了表格的整體性。
在表格中,td
和th
是重要的元素。padding: 8px;
屬性設置了單元格內部的填充值,使得文字與邊界之間有一個適當的間隔。而text-align: left;
和vertical-align: middle;
則規定了文本的水平和垂直對齊方式,讓表格看起來更整齊。
表頭則的樣式可以用th
標簽進行自定義。在上面的代碼中,我們對表頭使用了background-color: #eee;
和font-weight: bold;
屬性。這樣可以使表頭與數據區分明顯。
最后一個屬性是表格中奇偶行背景色的設置,使用了tr:nth-child(even)
語句。這里,我們可以用層級選擇器來選擇每一行中的偶數行,并設置其背景顏色為#f2f2f2
,增加表格的可讀性。
上一篇css標簽欄
下一篇css標簽怎么換文字