<div>是HTML中的一個標簽，用于創建一個容器，可以在其中放置文本、圖像、表格等HTML元素。在網頁中，我們經常需要使用表格來展示數據，如果數據量很大，需要分頁來進行顯示。而使用<div>標簽可以輕松實現表格的分頁效果，使得網頁更加美觀和易于瀏覽。
在下面的示例中，我們將演示如何使用<div>標簽來實現一個簡單的表格分頁功能。，我們需要定義一個包含數據的表格，并將其放置在一個<div>容器中。然后，使用CSS樣式來定義容器的大小和樣式，使其適應網頁布局。最后，使用JavaScript代碼來實現切換不同頁的功能。

html
<div id="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>35</td>
<td>Paris</td>
</tr>
<!-- 更多數據行... -->
</tbody>
</table>
</div>

在上面的代碼中，我們使用了一個<div>標簽，其id屬性為table-container，用于包含表格。接下來，我們使用CSS樣式來定義容器的大小以及相關樣式。

css
#table-container {
width: 500px;
height: 300px;
overflow: auto;
border: 1px solid black;
}

在上面的CSS代碼中，我們設置了容器的寬度為500像素，高度為300像素，并定義了邊框樣式。同時，使用overflow: auto來實現在內容溢出容器時顯示滾動條。
接下來，我們使用JavaScript代碼來實現表格的分頁功能。具體實現方式可以根據需求進行調整，以下是一種簡單的示例：

javascript
var tableContainer = document.getElementById('table-container');
var table = tableContainer.querySelector('table');
var rowsPerPage = 5;
var currentPage = 1;
<br>
function showPage(page) {
var start = (page - 1) * rowsPerPage;
var end = start + rowsPerPage;
<br>
  var rows = Array.from(table.querySelectorAll('tr'));
rows.forEach(function(row, index) {
if (index >= start && index < end) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
});
}
<br>
function goToPage(page) {
currentPage = page;
showPage(currentPage);
}
<br>
// 初始化顯示第一頁
showPage(currentPage);

在上面的JavaScript代碼中，我們獲取表格容器和表格元素，然后定義了每頁顯示的行數rowsPerPage和當前頁碼currentPage。接著，我們定義了兩個函數，showPage()和goToPage()。
showPage()函數用于根據當前頁碼顯示相應的數據行，通過調整數據行的樣式來實現顯示或隱藏。在函數中，我們計算起始行和結束行的索引，然后遍歷所有的數據行，根據索引決定是否顯示。
goToPage()函數用于切換到指定的頁碼，并調用showPage()函數來顯示相應的數據行。最后，我們使用showPage(currentPage)來初始化顯示第一頁的數據。
通過上述代碼，我們可以實現一個簡單的基于<div>標簽的表格分頁功能。將代碼應用到實際項目中時，可以根據需求進行修改和擴展，例如添加上一頁和下一頁的功能以及頁面跳轉輸入框等。
來說，使用<div>標簽可以方便地實現表格的分頁效果，減少頁面的加載量，并提升用戶的瀏覽體驗。通過合理的CSS樣式和JavaScript代碼實現，可以實現豐富的分頁功能。希望本文對您有所幫助，謝謝閱讀！</div>