在網頁設計中,表格是經常用到的元素之一,而 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
選擇器,使偶數行呈現不同的背景色,同時添加了鼠標懸浮效果,使用戶操作更加友好。
通過上述代碼的設置,我們可以得到一張美觀的四行二列的表格。
下一篇css表格寫對角線