< p >Div Table樣式< /p >
<div>是HTML中最基本的布局標簽之一，用于創建網頁中的不同區塊，可以實現各種復雜的布局效果。而<table>標簽用于創建表格，可以方便地展示數據。然而，DIV標簽也可以用來創建表格的布局，這就是所謂的Div Table樣式。使用Div Table樣式可以更加靈活地進行布局設計，同時也減少了使用<table>標簽所帶來的一些限制。下面將通過幾個代碼案例來詳細解釋Div Table樣式。
< p >案例一：基本的Div Table布局< /p >
< pre >
\< style > .table { display: table; width: 100%; }
.row { display: table-row; }
.cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } \< /style >
\< div class="table" > \< div class="row" > \< div class="cell" >Cell 1\< /div > \< div class="cell" >Cell 2\< /div > \< div class="cell" >Cell 3\< /div > \< /div > \< div class="row" > \< div class="cell" >Cell 4\< /div > \< div class="cell" >Cell 5\< /div > \< div class="cell" >Cell 6\< /div > \< /div > \< /div >
</ pre >

上面的代碼定義了一個簡單的Div Table布局。，通過CSS樣式定義了.table、.row和.cell類，用來設置Div Table的整體樣式、行的樣式和單元格的樣式。其中，.table類設置display為table，使div表現得像是一個表格；.row類設置display為table-row，讓div表現得像是一個表格的行；.cell類設置display為table-cell，使div表現得像是一個表格的單元格，同時也設置了一些樣式，如padding和邊框。接著，在HTML中使用這些類來定義具體的行和單元格，從而實現Div Table的布局。

案例二：帶有表頭的Div Table布局

<br>
  \< style >
.table {
display: table;
width: 100%;
}
<br>
    .row {
display: table-row;
}
<br>
    .header {
display: table-header-group;
font-weight: bold;
}
<br>
    .cell {
display: table-cell;
padding: 10px;
border: 1px solid #ccc;
}
\< /style >
<br>
  \< div class="table" >
\< div class="row header" >
\< div class="cell" >Header 1\< /div >
\< div class="cell" >Header 2\< /div >
\< div class="cell" >Header 3\< /div >
\< /div >
\< div class="row" >
\< div class="cell" >Cell 1\< /div >
\< div class="cell" >Cell 2\< /div >
\< div class="cell" >Cell 3\< /div >
\< /div >
\< div class="row" >
\< div class="cell" >Cell 4\< /div >
\< div class="cell" >Cell 5\< /div >
\< div class="cell" >Cell 6\< /div >
\< /div >
\< /div >
<br>

上面的代碼在基本的Div Table布局的基礎上，添加了一個表頭。通過添加.header類，并將其display設置為table-header-group，可以將一個div定義為表格的表頭。同時，還可以通過CSS樣式設置表頭的樣式，如設置字體加粗。這樣，就能在Div Table中加入一個帶有表頭的布局。

案例三：自適應的Div Table布局

<br>
  \< style >
.table {
display: table;
width: 100%;
table-layout: fixed;
}
<br>
    .row {
display: table-row;
}
<br>
    .cell {
display: table-cell;
padding: 10px;
border: 1px solid #ccc;
}
\< /style >
<br>
  \< div class="table" >
\< div class="row" >
\< div class="cell" >Cell 1\< /div >
\< div class="cell" >Cell 2\< /div >
\< div class="cell" >Cell 3\< /div >
\< /div >
\< div class="row" >
\< div class="cell" >Cell 4\< /div >
\< div class="cell" >Cell 5\< /div >
\< div class="cell" >Cell 6\< /div >
\< /div >
\< /div >
<br>

上面的代碼在基本的Div Table布局的基礎上，添加了table-layout: fixed屬性，用來設置Div Table的布局方式。通過設置為fixed，可以使Div Table根據表頭和單元格的最大寬度自動調整每一列的寬度，實現自適應布局。這樣，在Div Table中即使內容過長，也不會破壞布局結構，而是自動換行顯示。

通過以上的代碼案例，我們可以看到Div Table樣式的靈活性和可定制性。通過定義相應的CSS樣式，結合div標簽的特性，可以實現各種不同的表格布局效果，滿足不同的設計需求。