CSS生成田字表格的方法

在CSS中生成田字表格，我們可以利用CSS的樣式和布局特性來(lái)實(shí)現(xiàn)，以下是一個(gè)簡(jiǎn)單的示例代碼，展示如何生成一個(gè)基本的田字表格：

HTML結(jié)構(gòu)：

<div class="tianzi-table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

CSS樣式：

.tianzi-table {
    display: table;
    width: 200px;
    height: 200px;
    border-collapse: separate;
    border-spacing: 5px;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為tianzi-table的CSS類(lèi)，用于表示田字表格，每個(gè)row類(lèi)表示表格中的一行，而cell類(lèi)則表示每個(gè)單元格，通過(guò)調(diào)整width和height屬性，您可以控制表格和單元格的大小。border屬性用于設(shè)置單元格的邊框樣式。

這只是一個(gè)簡(jiǎn)單的示例，您可以根據(jù)自己的需求進(jìn)行調(diào)整和擴(kuò)展，您可以添加更多的行和列，或者調(diào)整其他樣式屬性來(lái)定制田字表格的外觀。