在網頁開發中，我們經常需要對表格的行進行樣式設置，以增強頁面的可讀性和美觀度。其中一種常見的方式是使用<div>元素來給表格的奇偶行應用不同的樣式。這種方法可以通過使用CSS選擇器和偽類來實現。接下來將通過幾個代碼案例來詳細解釋和說明如何使用<div>表格奇偶。

案例一：

<style>
div.table-row:nth-child(odd) {
background-color: lightgrey;
}
div.table-row:nth-child(even) {
background-color: white;
}
</style>
<br>
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">John</div>
<div class="table-cell">Doe</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Jane</div>
<div class="table-cell">Smith</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Bob</div>
<div class="table-cell">Johnson</div>
</div>
</div>

在這個案例中，我們使用CSS選擇器nth-child來選擇表格元素的奇偶行。奇數行使用lightgrey背景色，偶數行使用白色背景色。通過這種方式，我們可以很容易地為表格的行應用奇偶樣式。

案例二：

<style>
div.table-row:nth-child(even) {
background-color: lightblue;
}
div.table-row:nth-child(even) div.table-cell {
color: white;
}
</style>
<br>
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">John</div>
<div class="table-cell">Doe</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Jane</div>
<div class="table-cell">Smith</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Bob</div>
<div class="table-cell">Johnson</div>
</div>
</div>

在這個案例中，我們通過CSS選擇器nth-child來選擇偶數行，并將背景色設置為lightblue。同時，我們還通過選擇器div.table-row:nth-child(even) div.table-cell將偶數行內的所有單元格文字顏色設置為白色。通過這種方式，我們可以在奇偶行之間創建更鮮明的對比效果。

來說，使用<div>表格奇偶的方法可以通過CSS選擇器和偽類來對表格的奇偶行應用不同的樣式。這種方法簡單易用且靈活，可以提升網頁的可讀性和美觀度。