<div>與表格是網頁設計中常用的兩個元素，它們在實現網頁布局和展示數據方面發揮著重要作用。在這篇文章中，我們將詳細介紹<div>和表格的使用方法，并通過幾個代碼案例來演示它們的具體應用。
<div>是HTML中的一個塊級元素，它可以用來將HTML文檔中的一部分內容分組，形成一個獨立的塊。在網頁設計中，<div>元素常用于布局，可以創建容器并設置樣式，實現復雜的網頁結構。下面是一個使用<div>元素的示例：

<style>
.container {
width: 300px;
height: 200px;
background-color: #eee;
margin: 0 auto;
}
</style>
<br>
<div class="container">
<p>這是一個容器</p>
</div>

在上面的代碼中，我們定義了一個名為.container的樣式類，設置了容器的寬度、高度、背景顏色和居中對齊。然后，在<div>元素內部使用class屬性將容器應用到這個元素上。這樣，我們就創建了一個帶有樣式的<div>容器。
表格是一種用于展示結構化數據的HTML元素，它由行和列組成，可以方便地展示和比較不同數據。下面是一個簡單的表格示例：

<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>

在上面的代碼中，我們使用<tr>表示表格的一行，<th>表示表頭單元格，<td>表示普通單元格。通過在<table>標簽內部添加<tr>、<th>和<td>元素，我們可以創建一個簡單的表格，并在其中填充數據。
除了基本的表格布局外，我們還可以通過合并單元格來創建更復雜的表格結構。下面是一個合并單元格的示例：

<table>
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">成績</th>
</tr>
<tr>
<th>語文</th>
<th>數學</th>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>85</td>
<td>95</td>
</tr>
</table>

在上面的代碼中，我們使用rowspan和colspan屬性來將單元格進行合并。通過設置rowspan="2"，我們可以將姓名單元格合并為兩行；通過設置colspan="2"，我們可以將成績單元格合并為兩列。這樣，我們就實現了一個包含合并單元格的表格。
通過上述幾個代碼案例，我們詳細介紹了<div>和表格在網頁設計中的應用方法。<div>元素可以用于創建容器，實現復雜的網頁布局；而表格則可以方便地展示和比較結構化數據，并通過合并單元格來創建更復雜的表格結構。希望本文對您理解<div>和表格的使用有所幫助。