二維table樣式在網頁設計中非常常見,它可以用于展示大量數據,增強網頁的可讀性。以下是一些二維table樣式的CSS代碼示例:
table { border-collapse: collapse; /* 合并邊框 */ width: 100%; } th { background-color: #ccc; /* 表頭背景色 */ font-weight: bold; /* 表頭文字加粗 */ } td, th { border: 1px solid #000; /* 單元格邊框 */ padding: 8px; /* 單元格內邊距 */ text-align: center; /* 居中對齊 */ } tr:nth-child(even) { background-color: #f2f2f2; /* 偶數行背景色 */ }
上述代碼中,table
元素被設置為100%的寬度,并合并了單元格邊框,讓表格看起來更整潔。表頭使用th
元素,設置了背景色和文字加粗,使其更加醒目。單元格使用td
元素,設置了邊框和內邊距,并居中對齊,使文字更易讀。偶數行使用CSS的偽類nth-child()
來設置背景色,增加一定的視覺差異。
除了上述基本樣式,我們還可以根據需要添加一些特定的樣式。比如,如果表格中存在數字數據,可以添加以下CSS代碼,將數字右對齊:
td.number { text-align: right; }
在HTML代碼中,只需要將數字數據所在的單元格添加一個class
名為number
的屬性,即可生效。
二維table樣式還可以通過CSS偽類:hover
來增加交互效果。以下代碼實現了當鼠標懸停在單元格上時,該單元格的背景色變為黃色:
td:hover { background-color: yellow; }
以上這些示例只是二維table樣式CSS代碼的冰山一角,具體樣式還可以根據需要進行調整和擴展。有了這些基礎,我們可以根據自己的需求,打造出更加美觀和實用的二維table樣式。