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

css表格四行二列的設置

黃萬煥1年前6瀏覽0評論

在網頁設計中,表格是經常用到的元素之一,而 CSS 的優勢就是可以讓表格的樣式更加美觀。下面就來介紹一下如何使用 CSS 來設置一個四行二列的表格。

<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
<tr>
<td>第四行第一列</td>
<td>第四行第二列</td>
</tr>
</table>

以上是 HTML 方式創建表格的代碼。接下來,我們將使用 CSS 來設置樣式。

table {
border: 1px solid #ccc; /* 表格邊框樣式 */
border-collapse: collapse; /* 合并邊框 */
width: 500px; /* 表格寬度 */
margin: 0 auto; /* 表格居中 */
padding: 10px; /* 表格內邊距 */
}
td {
border: 1px solid #ccc; /* 單元格邊框樣式 */
padding: 15px; /* 單元格內邊距 */
}
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶數行背景色 */
}
tr:hover {
background-color: #e6e6e6; /* 鼠標懸停時的背景色 */
}

上述代碼中,我們通過設置border屬性來定義表格和單元格的邊框樣式;使用border-collapse屬性將相鄰的邊框合并;通過width屬性設置表格寬度,并使用margin屬性將表格居中;使用padding屬性設置表格內邊距。另外,我們還使用了nth-child選擇器,使偶數行呈現不同的背景色,同時添加了鼠標懸浮效果,使用戶操作更加友好。

通過上述代碼的設置,我們可以得到一張美觀的四行二列的表格。