色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

二維table樣式css

方一強2年前10瀏覽0評論

二維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樣式。