以下是一個簡單的CSS代碼片段,可以用來設計一個4x6的表格:
.table {
border-collapse: collapse;
width: 100%;
}
.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.table th {
background-color: #f2f2f2;
}
.table tr:nth-child(even) {
background-color: #f9f9f9;
}
.table tr:hover {
background-color: #e5e5e5;
}
這個CSS樣式設計了一個簡單的表格,其中包含標題(th)和數據單元格(td)。表格的奇數行和偶數行有不同的底色,方便閱讀。當鼠標懸停在行上時,行的背景色會變化,提供一點視覺反饋。
在HTML文件中,你可以使用以下結構創建4x6的表格:
<table class="table">
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
<th>標題4</th>
<th>標題5</th>
<th>標題6</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據1</td>
<td>數據2</td>
<td>數據3</td>
<td>數據4</td>
<td>數據5</td>
<td>數據6</td>
</tr>
<!-- 添加更多行... -->
</tbody>
</table>
這個HTML結構應該放在你的HTML文件中,這樣CSS樣式就會應用到表格上。你可以根據需要調整樣式和內容。