<div>布局成表是一種常用的網(wǎng)頁布局方式，它可以將頁面的內(nèi)容以表格的形式進行展示，使得頁面的結(jié)構(gòu)更加清晰有序。在HTML中，可以使用div元素來創(chuàng)建表格布局，并通過CSS樣式來控制表格的各個部分。本文將通過幾個代碼案例來詳細說明如何使用div布局成表。

第一個案例是一個簡單的兩列布局，其中左側(cè)列用于顯示內(nèi)容，右側(cè)列用于顯示導航菜單。可以通過設(shè)置div元素的float屬性為left或right來實現(xiàn)這種布局效果。具體代碼如下：

<div style="float:left; width:70%">
<p>這是左側(cè)內(nèi)容</p>
</div>
<br>
		<div style="float:right; width:30%">
<p>這是右側(cè)導航菜單</p>
</div>

在上面的代碼中，左側(cè)的div元素被設(shè)置為浮動到左側(cè)，并占據(jù)頁面寬度的70%，右側(cè)的div元素被設(shè)置為浮動到右側(cè)，并占據(jù)頁面寬度的30%。這樣，頁面就被分為兩列，左側(cè)列用于顯示內(nèi)容，右側(cè)列用于顯示導航菜單。

第二個案例是一個三列布局，其中左側(cè)列用于顯示導航菜單，中間列用于顯示內(nèi)容，右側(cè)列用于顯示廣告。可以通過設(shè)置div元素的寬度來控制每一列的大小，具體代碼如下：

<div style="float:left; width:20%">
<p>這是左側(cè)導航菜單</p>
</div>
<br>
		<div style="float:left; width:60%">
<p>這是中間內(nèi)容</p>
</div>
<br>
		<div style="float:left; width:20%">
<p>這是右側(cè)廣告</p>
</div>

在上面的代碼中，分別設(shè)置了三個div元素的浮動和寬度。通過設(shè)置這三個div元素的寬度比例，可以實現(xiàn)不同列的大小比例。這樣，頁面就被分為三列，分別用于顯示導航菜單、內(nèi)容和廣告。

第三個案例是一個響應(yīng)式布局，即根據(jù)設(shè)備的屏幕大小動態(tài)調(diào)整布局。可以通過使用CSS媒體查詢來實現(xiàn)這種效果，具體代碼如下：

<style>
@media only screen and (max-width: 600px){
.column {
width: 100%;
float: none;
}
}
</style>
<br>
		<div class="column">
<p>這是左側(cè)內(nèi)容</p>
</div>
<br>
		<div class="column">
<p>這是右側(cè)導航菜單</p>
</div>

在上面的代碼中，使用@media媒體查詢來判斷屏幕大小是否小于600像素，如果是，則將column類的div元素的寬度設(shè)置為100%，并取消浮動。這樣，當設(shè)備的屏幕大小小于600像素時，頁面的布局將變?yōu)榇怪迸帕校皇撬脚帕小?/p>

通過以上三個案例，我們可以看到使用div元素來實現(xiàn)表格布局的靈活性和可擴展性。通過設(shè)置div元素的屬性和使用CSS樣式，我們可以輕松地實現(xiàn)不同的布局方式，以適應(yīng)不同的頁面需求和設(shè)備屏幕大小。