在網站開發中，我們經常需要使用表格來展示信息，而單元格拆分是表格樣式中的一種重要技巧。單元格拆分指的是將一個單元格分為若干個小單元格，從而可以更加靈活地呈現信息。下面我們來學習一下如何使用 CSS 實現單元格拆分。

// HTML 代碼
<table>
<tr>
<td rowspan="2">單元格1</td>
<td colspan="2">單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
// CSS 代碼
td {
border: 1px solid gray;
}
td[rowspan] {
vertical-align: top;
}
td[colspan] {
text-align: center;
}
td[colspan="2"] {
font-weight: bold;
}

上述代碼中，我們使用 table 元素來創建表格，其中包括兩行兩列的單元格，在第一行中，第一列單元格合并兩行，第二列單元格合并兩列；在第二行中，第一列單元格未合并，第二列單元格未合并。我們通過 CSS 對表格進行樣式設置：

首先，我們為所有單元格添加了邊框樣式。然后，通過屬性選擇器，我們針對 rowspan 和 colspan 屬性的不同值分別設置樣式。通過設置 td[rowspan] { vertical-align: top; }，我們將跨行單元格的內容頂部對齊；通過設置 td[colspan] { text-align: center; }，我們將跨列單元格的內容居中對齊。最后，我們通過設置 td[colspan="2"] { font-weight: bold; }，讓第二列單元格合并的內容顯示為粗體。

通過上述 CSS 樣式設置，我們成功地實現了單元格拆分的效果。對于前端開發而言，單元格拆分是一個非常實用的技巧，它可以讓我們更加靈活地處理表格中的內容，從而為網站的呈現效果帶來更多的可能性。