<div>表格布局是一種常用的網頁布局方式，主要借助HTML中的div元素以及CSS來實現頁面元素的排列和放置。相比于傳統的table表格布局，在各種尺寸的設備上都能夠更好地適應，具有更好的靈活性和可擴展性。本文將通過幾個代碼案例來詳細講解<div>表格布局的使用方法和實現效果。</div>
<div>案例一：</div> <div>下面是一個簡單的代碼案例，演示了如何使用<div>表格布局來實現一個兩列的頁面布局。代碼如下：</div>

<div class="container">
<div class="column">
<p>左欄內容</p>
</div>
<div class="column">
<p>右欄內容</p>
</div>
</div>
<br>
  <style>
.container {
display: table;
width: 100%;
}
<br>
    .column {
display: table-cell;
width: 50%;
padding: 10px;
}
</style>

<div>上述代碼中，使用一個class為.container的<div>元素來包裹兩個.column元素，并設置display屬性為table，使其具有表格布局的特性。然后在.column類中，設置display屬性為table-cell，使其以表格單元格的形式顯示，并設置寬度為50%。通過這樣的設置，左欄和右欄會平分整個容器的寬度，并且自動適應不同的屏幕尺寸。</div>
<div>案例二：</div> <div>下面是一個稍復雜一些的代碼案例，演示了如何使用<div>表格布局來實現一個三列的頁面布局，并使用媒體查詢來設置不同的屏幕尺寸下的布局效果。代碼如下：</div>

<div class="container">
<div class="column">
<p>左欄內容</p>
</div>
<div class="column">
<p>中間欄內容</p>
</div>
<div class="column">
<p>右欄內容</p>
</div>
</div>
<br>
  <style>
.container {
display: table;
width: 100%;
}
<br>
    .column {
display: table-cell;
padding: 10px;
}
<br>
    @media (max-width: 768px) {
.container {
display: block;
}
<br>
      .column {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
</style>

<div>上述代碼中，與案例一類似，使用一個class為.container的<div>元素來包裹三個.column元素，并設置display屬性為table。在.column類中，設置display屬性為table-cell，使其以表格單元格的形式顯示。在媒體查詢@media (max-width: 768px)中，設置.container和.column的display屬性為block，并設置.width為100%和.margin-bottom為10px，這樣在屏幕寬度小于等于768px的情況下，三個欄目會按照垂直方向依次排列，并且自適應屏幕寬度。</div>
<div>通過以上兩個代碼案例的解釋，我們可以看到<div>表格布局通過<div>元素和CSS的配合，可以實現靈活的頁面布局。我們可以根據實際需求來設置容器和單元格的樣式，實現各種不同形式的頁面布局。</div>