<div> 模擬table 是一種使用<div> 標簽來模擬表格的布局方式。在HTML中，<table> 是用于創建表格的標簽，但有時候在某些特定的情況下，我們可能會想要使用其他標簽來實現類似表格的效果。這時候，我們就可以使用<div> 標簽以及一些CSS樣式來達到我們的目的。
下面我們將用幾個代碼案例來詳細解釋說明如何使用<div> 模擬table。
第一個案例是一個簡單的兩列表格。我們可以使用<div> 標簽作為表格的容器，然后使用兩個<div> 標簽作為每一列的容器。通過設置這些<div> 標簽的CSS樣式，我們可以實現兩列的對齊和寬度控制。具體代碼如下：

<p><div class="table"></p>
<p>    <div class="row"></p>
<p>        <div class="cell">第一列</div></p>
<p>        <div class="cell">第二列</div></p>
<p>    </div></p>
<p></div></p>

<p>.table {</p>
<p>    display: table;</p>
<p>}</p>
<p>.row {</p>
<p>    display: table-row;</p>
<p>}</p>
<p>.cell {</p>
<p>    display: table-cell;</p>
<p>}</p>

在這個案例中，我們使用了三個CSS樣式類：.table、.row和.cell。通過設置display 屬性為table、table-row和table-cell，我們將<div> 標簽轉換為了表格中的對應部分。
第二個案例是一個帶有表頭的表格。除了上述的<div> 容器和CSS樣式外，我們還需要使用一個額外的<div> 容器來作為表頭，具體代碼如下：

<p><div class="table"></p>
<p>    <div class="header"></p>
<p>        <div class="cell">表頭1</div></p>
<p>        <div class="cell">表頭2</div></p>
<p>    </div></p>
<p>    <div class="row"></p>
<p>        <div class="cell">第一列</div></p>
<p>        <div class="cell">第二列</div></p>
<p>    </div></p>
<p></div></p>

在這個案例中，我們在<div> 內部使用了一個額外的<div> 容器來創建表頭。通過使用.table、.header和.cell 的CSS樣式類，我們可以將表頭和內容區分開來，并在樣式上做出調整。
第三個案例是一個跨行跨列的復雜表格。在這個案例中，我們可以利用CSS樣式來設置每一單元格的行和列的跨度，以及背景顏色等樣式，具體代碼如下：

<p><div class="table"></p>
<p>    <div class="row"></p>
<p>        <div class="cell" rowspan="2" colspan="2">跨行跨列</div></p>
<p>    </div></p>
<p>    <div class="row"></p>
<p>        <div class="cell">第一列</div></p>
<p>        <div class="cell">第二列</div></p>
<p>    </div></p>
<p></div></p>

<p>.cell {</p>
<p>    display: table-cell;</p>
<p>    background-color: #ccc;</p>
<p>}</p>

在這個案例中，我們通過設置.row 和.cell 的CSS樣式類，以及單元格的rowspan和colspan屬性，實現了跨行和跨列的效果。同時，我們還使用了background-color 樣式屬性來設置單元格的背景顏色。
通過以上幾個代碼案例，我們可以看到如何使用<div> 模擬table 來創建各種各樣的表格布局。通過結合CSS樣式，我們能夠靈活地控制表格的外觀和布局，滿足不同需求下的表格展示。