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

css網頁設計表格

錢斌斌2年前9瀏覽0評論

在網頁設計中,表格是非常常見的元素,它可以用來展示各種數據、圖表、排版等。而在CSS中,我們可以通過設置表格的樣式來使其更美觀,更符合我們的需求。

/* 表格樣式 */
table {
border-collapse: collapse; /* 合并邊框 */
width: 100%; /* 寬度100% */
margin: 20px 0; /* 上下間距20px */
}
th, td {
padding: 8px; /* 單元格內邊距 */
text-align: left; /* 左對齊 */
border-bottom: 1px solid #ddd; /* 底部間隔線 */
}
th {
background-color: #f2f2f2; /* 表頭背景色 */
color: #333; /* 表頭文字顏色 */
}
/* 奇偶行交替背景色 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #fff;
}

這里我們先定義了表格的基本樣式,首先通過border-collapse:collapse將單元格邊框合并,控制表格寬度的時候可以直接用寬度為100%來實現。然后為表格中的表頭和單元格設置了統一的內邊距和左對齊,同時加入了底部間隔線border-bottom來區分不同內容。表頭還加入了背景色和文字顏色的設置。

在基本樣式定義完成之后,為了增加表格的可讀性,我們還可以添加奇偶行交替的背景色。這需要使用到CSS3的偽類選擇器——nth-child。其語法為:

/* 偶數行 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 奇數行 */
tr:nth-child(odd) {
background-color: #fff;
}

這樣,我們就可以將大部分程序員最愛的黑白顏色突破一下,添加些漂亮的顏色來使表格更加美觀。